Редактируем лендинги как профи: очистка, замена оффера, страны и языка – полный чеклист.

Всем привет, сегодня расскажу о том, как я чищу и редактирую выкачанные из ПП или из спаев (пре)лендинги. Ничего сверхъестественного вы здесь не найдёте, обычный прагматичный подход. Можете выдавать эту статью, как руководство к действию для юных технарей/верстальщиков, с которыми вы собираетесь работать. Если, вдруг, вы обнаружите, что я не описал здесь какой-то момент, с которым вы регулярно сталкиваетесь — добро пожаловать в комментарии. А мы начнём, пожалуй!

Не буду в сотый раз описывать, как выкачивать лендинги, просто перечислю инструменты:

Плагины WebScrapBook или Save All Resources — первый от второго отличается только тем, что не умеет выкачивать структуру папок и пихает все файлы в одну, что можно привести к нерабочему сайту, если используются какие-нибудь скрипты, навроде Drewlex
wget — универсальный боец, но потребуется научиться вставлять в него прокси нужного гео и, иногда, реферер
Сервисы для выкачивания, например CopySite от XDan — самый удобный для обычного юзера вариант, но, зачастую, платный

Итак, лендинг вы выкачали, что дальше? Создаём бэкап лендинга (на случай, если мы что-то напортачим), и открываем индексный файл в любом текстовом редакторе с подсветкой синтаксиса: у меня это NeoVim, вы можете взять Notepad++ или даже Visual Studio Code.

Да, если вы редактируете лендинг у которого индексный файл с расширением .php, а не .html, настоятельно рекомендую вычистить весь php-код и переименовать файл. По моему мнению PHP в лендингах из ПП — это излишество, которое нужно только для самих ПП, а обычному арбитражнику практически не несёт никаких плюшек. Не понимаете, что и как вычищать? Изи, просто закиньте PHP-лендинг на хостинг и выкачайте его себе заново!

Косметика

Начнём с очистки тега <html>, тот же WebScrapBook, например, оставляет там полный адрес исходного сайта, откуда вы вытянули ленд, а это, имхо, лишнее.

Удаляем все атрибуты и оставляем `<html>` девственно чистым

Если на ленде используется арабский или любой другой язык, в котором буквы пишутся справа налево, то в тег 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% задач по обработке лендов делает телеграм-бот. Он уже дошёл до того, что даже использует компьютерное зрение и чекает, нет ли названия старого оффера на картинках + может их автоматом менять. Возможно, когда-нибудь поделюсь подобным решением в паблике, а вам пожелаю лить в плюс и вычищать ваши лендинги как следует!