Всем привет, сегодня расскажу о том, как я чищу и редактирую выкачанные из ПП или из спаев (пре)лендинги. Ничего сверхъестественного вы здесь не найдёте, обычный прагматичный подход. Можете выдавать эту статью, как руководство к действию для юных технарей/верстальщиков, с которыми вы собираетесь работать. Если, вдруг, вы обнаружите, что я не описал здесь какой-то момент, с которым вы регулярно сталкиваетесь — добро пожаловать в комментарии. А мы начнём, пожалуй!
Не буду в сотый раз описывать, как выкачивать лендинги, просто перечислю инструменты:
- Плагины WebScrapBook или Save All Resources — первый от второго отличается только тем, что не умеет выкачивать структуру папок и пихает все файлы в одну, что можно привести к нерабочему сайту, если используются какие-нибудь скрипты, навроде Drewlex
- wget — универсальный боец, но потребуется научиться вставлять в него прокси нужного гео и, иногда, реферер
- Сервисы для выкачивания, например CopySite от XDan — самый удобный для обычного юзера вариант, но, зачастую, платный
Итак, лендинг вы выкачали, что дальше? Создаём бэкап лендинга (на случай, если мы что-то напортачим), и открываем индексный файл в любом текстовом редакторе с подсветкой синтаксиса: у меня это NeoVim, вы можете взять Notepad++ или даже Visual Studio Code.
Да, если вы редактируете лендинг у которого индексный файл с расширением .php, а не .html, настоятельно рекомендую вычистить весь php-код и переименовать файл. По моему мнению PHP в лендингах из ПП — это излишество, которое нужно только для самих ПП, а обычному арбитражнику практически не несёт никаких плюшек. Не понимаете, что и как вычищать? Изи, просто закиньте PHP-лендинг на хостинг и выкачайте его себе заново!
Косметика
Начнём с очистки тега <html>
, тот же WebScrapBook, например, оставляет там полный адрес исходного сайта, откуда вы вытянули ленд, а это, имхо, лишнее.
Если на ленде используется арабский или любой другой язык, в котором буквы пишутся справа налево, то в тег html нужно добавить атрибут dir="rtl"
.
Проверяем, что в разделе <head>
есть мета-тег с кодировкой utf-8. Без него, бывает, что сайт отображается в некорректной кодировке:
Если внутри тега <head>
есть тег <base>
то удаляем его, чтоб не мешался🙃
Очистка скриптов
Скрипты на лендингах чаще всего встречаются в трёх местах: внутри тега <head>
, сразу же после тега <body>
и в самом конце перед закрывающимся </body>
. Ищем их по слову <script>
и просматриваем все подряд.
Обычно на лендингах используется всего несколько скриптов:
- JQuery
- Вывод дат: дата статьи, комментариев, специальных предложений и акций (dtime.min.js и т. д.)
- Таймер обратного отсчёта (jquery.countdown.js и аналоги) для времени или кол-ва упаковок
- маски для телефонных номеров (inputmask, intltelnum)
- скрипт, вешающий на все ссылки ленда скролл к форме
В дополнение к этому встречаются:
- скрипты рулетки, коробок, дверей (общеизвестный drewlex.js, например)
- скрипты для формы фейковых комментариев
- скрипты для проведения quiz-ов
- скрипты для отображения карусели из картинок
- скрипты для попапов, колбэкера, камбэкера, корзины товаров и прочих свистелок
Всё остальное, что вы встретите, и что скорее всего можно безболезнено вычистить — это:
- скрипты ПП (например, shakesland.js)
- скрипты домонетизации
- стилеры лидов
- плагины JQuery
- код пикселей Facebook, Google Tag Manager и Яндекс.Метрики
Соответственно, для стандартных и регулярно встречающихся скриптов у вас под рукой ВСЕГДА должны быть ссылки на их CDN или же сами скрипты. Дело в том, что арбитражники не особо любят, когда их лендинги выкачивают все подряд, и они научились запихивать внутрь того же JQuery стилеры лидов, домонетизацию и т.п.
Поэтому обязательно заменяем JQuery на версию из CDN:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Обычно достаточно последней версии и всё будет работать, даже если на ленде прописана какая-то другая. Плюс на всякий случай проверьте, что JQuery на ленде не прописана в нескольких тегах <script>, такое встречается сплошь и рядом.
То же самое проделываем для всех скриптов, которые лежат в отдельных файлах: либо заменяем на проверенные версии либо быстренько просматриваем на предмет того, что кроме их непосредственной функции, они не выполняют ничего подозрительного. Подозрительное это: редиректы, обращение к любым сторонним ресурсам, перехват onclick у ссылок, создание ifame-ов, работа с полями формы, тело скрипта закодировано в base64 (легко узнать по наличию двух знаков равно в конце строки ==), минифицированный или обфусцированный код (хотя в целом минификацию используют практически все библиотеки). Да, нужно знать Javascript, а вы как хотели?🤷♂️ Поэтому, если вы в нём не сильны — просто заменяйте файлы проверенными версиями! Но очевидно, что если файл называется index.js, main.js, script.js
и т.п., то у вас навряд ли будет какая-то «стандартная» версия для его замены, придётся-таки просмотреть код.
Все скрипты, которые кажутся вам лишними, сначала закомментируем:
после чего проверяем работоспособность сайта:
- все ссылки должны скроллить нас на форму
- в форме должны работать все игровые механики, если они там изначально были
- если на картинки был наложен blur, он должен убираться при клике
- рабочий таймер обратного отсчёта
- корректные даты самой статьи на ленде и в комментариях
- всякие колбэкеры/камбэкеры, если они были и если они вам нужны
Если после проверки все ок, то смело удаляем закомментированные скрипты.
Расскажу чуть подробнее про отдельный вид скриптов👇
Вырезаем скрипты домонетизации
Арбитражники часто используют в своих лендах «бэкфикс»: то есть подмену действия, происходящего при нажатии на кнопку «Назад» в браузере. Вместо «Назад» происходит открытие другого лендинга или витрины. Вот пример кастомной домонетизации:
Домонетку можно легко обнаружить по событию onpopstate
— просто ищем это слово по всем выкачанным html-файлам и скриптам, и если находим, то в 99% случаев это она🙃 Весь блок, показанный на скрине, смело удаляем.
Также, как вариант, если лень искать по файлам, а проверить хочется — открываем у себя в браузере ленд с локальной машины. Дальше кликаем в произвольном месте ленда (необходимое условие, чтобы у скриптов домонетки на десктопе появилась возможность работать с историей браузера), и жмём «Назад». Ничего не произошло? Поздравляю, скорее всего в ленде нет домонетизации. Почему скорее всего? Потому что в скрипте домонетки, например, может стоять проверка на локалхост. Поэтому лучше проверить поиском, либо проверить кнопку «Назад» уже после того, как вы закачали обработанный ленд на хостинг или в трекер.
Помимо кастомных бэкфиксов встречают бэкфиксы от различных сервисов и ПП. Их можно обнаружить по следующим кускам кода:
Также некоторые используют древний скрипт от Brooky Bryan для определения нажатия кнопки «Назад», обнаружить его присутствие можно поиском строки «bajb
» по всем выкачанным файлам ленда.
Работа с формой заявки
Сразу же скажу, что если у каждого из ваших лендингов отдельный файл отправки лидов, то это, по моему мнению, дичь. Вот вам видео, где я рассказываю о том, как обустроить работу с отправкой лидов. Суть в том, чтобы файл отправки был один на оффер, лежал бы в отдельной папке, и нам бы оставалось только прописать его в атрибут action формы. Например: ../common/orders/ph/enerflex.php
Обязательно проверяем, что у тега формы прописан метод отправки method="post"
. Некоторые ПП грешат тем, что шлют лиды через Javascript и не прописывают method. Не надо так!
Далее смотрим все поля формы и удаляем те, у которых стоит type="hidden"
. Удалили? Гут. Время вставить все нужные ВАМ сабы в те же самые hidden поля. У меня это всегда один и тот же набор:
<input type='hidden' name='sub1' value='{subid}'/>
<input type='hidden' name='sub2' value='{landing_id}'/>
<input type='hidden' name='sub3' value='{sub_id_3}' />
<input type='hidden' name='px' value='{px}'/><input type='hidden' name='country' value='{country_code}'/>
У вас могут быть другие названия и значения, но рекомендую вам организовать работу так, чтобы набор полей был всегда одним и тем же. Тогда его вставку можно организовать просто по горячей клавише.
Также я частенько удаляю в форме <select>
, где стоит выбор страны. Нахер он нужен вообще?
Если вы не можете найти в тексте ленда форму, то это значит, что форма генерируется Javascript-ом, скорее всего при помощи скрипта Drewlex. Прочитайте про него у меня на сайте и быстро разберётесь, как редактировать его настройки.
Обработка полей имени, телефона и кнопки отправки
Если вы переносите ленд с одного гео на другое, то проверьте, что у поля Имя в атрибуте placeholder (если он есть, конечно) написан подходящий пример местного имени. Либо, если вы переводили ленд на другой язык, а в placeholder написано «Введите ваше имя», проверьте, что placeholder корректно перевёлся, зачастую это не так.
С телефоном чуть сложнее: здесь тоже проверяем placeholder, если в нём находится пример телефона, то он должен соответствовать местному формату. Если используется скрипт маски, то в нём тоже необходимо проверить формат номера. Также у поля с номером телефона должен быть type="tel"
, а не "text"
, писал про это неоднократно.
Autocomplete для имени и телефона добавляйте по вкусу🙃
Если в качестве кнопки используется <button>
проверяем, что у неё задан type="submit"
, если вместо неё <input>
, то там этот "submit"
уже стоит. При переносе в другое гео и на другой язык обязательно смотрим, перевёлся ли текст на кнопке!
Замена оффера
Замена оффера на лендинге состоит из нескольких шагов: замена картинок, цены, названия и форм-фактора. Рассмотрим их по очереди.
Картинки
Тут всё более-менее просто: берём из ПП картинку с банкой и заменяем ту, что на ленде. Найти места, где используется картинка обычно можно, поискав по тексту html что-то навроде prod.png
или product.png
или названиеоффера.png
. Если ничего не находится, придётся открывать ленд в браузере и искать глазами, после чего открываем картинку в новой вкладке и смотрим её имя.
Ситуация осложняется, если (помимо основной картинки с банкой) фото с оффером также присутствует в комментариях. Обычно туда пихают фото с товаром в руках и т.п. Для замены придётся либо найти такие же фото для вашего оффера (запросить у менеджеров ПП), либо тупо удалить эти самые картинки.
Если банка с товаром (или название оффера) вфотошоплена в другие фотографии на ленде, то тут вы либо редактируете их сами и заменяете одну банку на другую, либо отдаёте эту задачу профессиональным дизайнерам. Рекомендую второй путь.
Цена
Обычно найти блок с ценами на товар не составляет труда: достаточно просто поискать по тексту ленда слово price
:
Меняем цену и валюту: здесь вам понадобится навык умножения на два, чтобы прописать «старую» цену🙃
Название оффера
Делаем тупо заменой по тексту, но рекомендую делать это не разом, а по очереди, чтобы не заменить ненароком какие-нибудь названия картинок/скриптов.
Форм-фактор
Если вы меняете мазь на таблетки или капли на порошок, то вам придётся воспользоваться услугами Google Translate. Переводим весь ленд на русский и вычитываем всё подряд. Вам нужно найти те куски текста, которые не подходят по смыслу. Таблетки нельзя «втирать в колено 2 раза в день», а порошок нельзя накапать в стакан. Всё это вам придётся исправить, лучше всего, конечно, с использованием профессионального переводчика. Но если лень, то Deepl/Google Translate к вашим услугам, что не отменяет того факта, что вам придётся придумывать новый кусок текста.
Перевод на другой язык
Если вы или ваша команда всерьёз намерены лить трафик на новое гео, и у вас есть ленды на других языках, то лучше всего будет воспользоваться услугами профессионалов или отдать ленд на перевод в ПП. Но до того момента, как перевод будет готов, вы можете заюзать мой софт для автоперевода, он весьма неплох!🤘
После перевода проверьте в первую очередь все имена: имена персонажей истории, имена комментаторов. Все они должны быть из нового гео. Ищите гуглом списки типа: «топ 100 мужских имён в Бангладеше
» и заменяйте.
Далее смотрите все географические названия: город, страна, этнохороним (испанцы, португальцы и т.п.). Всё редактируем под новое гео.
Если ПП позволяет, то ищем реальных местных персонажей: звёзд, врачей, политиков и т.п. и заменяем фото тех, что были, на новых.
Остаётся только поменять цену товара и местную валюту и можно лить!
Проверяем работоспособность
Итак, в конце вашей работы по редактированию вы должны проверить:
- вёрстка: она не поехала, сайт корректно отображается и в десктопном и в мобильном вариантах
- ссылки не открываются в новом или текущем окне, они все скроллят на форму заявки
- работают все игровые механики и доп.скрипты
- в форме корректные цены и есть банка товара
- нету «двойных» дат, т.е. даты у самой статьи и у комментариев написаны один раз. Если видите, что даты две, то вы некорректно выкачали сайт (скорее всего через «Сохранить как» в браузере), придётся поискать в тексте текущий год и удалить лишнее
- далее остаётся отправить тестовый лид и проверить, что он упал в Отклонённые
Заключение
Как вы могли заметить, при редактировании лендов довольно много задач приходится выполнять вручную: менять скрипты, названия и т.д. Подумайте над тем, что из этого можно автоматизировать: лично у меня до 30-50% задач по обработке лендов делает телеграм-бот. Он уже дошёл до того, что даже использует компьютерное зрение и чекает, нет ли названия старого оффера на картинках + может их автоматом менять. Возможно, когда-нибудь поделюсь подобным решением в паблике, а вам пожелаю лить в плюс и вычищать ваши лендинги как следует!