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

Maria

Maria

Sales-manager
FB-killa team
FB-killa Plus
Регистрация
21 Окт 2020
Сообщения
1.348
Реакции
838
Источник

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

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

  • Плагины WebScrapBook или Save All Resources — первый от второго отличается только тем, что не умеет выкачивать структуру папок и пихает все файлы в одну, что можно привести к нерабочему сайту, если используются какие-нибудь скрипты, навроде Drewlex
  • wget — универсальный боец, но потребуется научиться вставлять в него прокси нужного гео и, иногда, реферер
  • Сервисы для выкачивания, например CopySite от XDan — самый удобный для обычного юзера вариант, но, зачастую, платный
Итак, лендинг вы выкачали, что дальше? Создаём бэкап лендинга (на случай, если мы что-то напортачим), и открываем индексный файл в любом текстовом редакторе с подсветкой синтаксиса: у меня это NeoVim, вы можете взять Notepad++ или даже Visual Studio Code.

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

Косметика​

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

image-1.png
Удаляем все атрибуты и оставляем <html> девственно чистым
Если на ленде используется арабский или любой другой язык в котором буквы пишутся справа налево, то в тег html нужно добавить атрибут dir="rtl".

Проверяем, что в разделе <head> есть мета-тег с кодировкой utf-8. Без него, бывает, что сайт отображается в некорректной кодировке:

image-2.png

Если внутри тега <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, а вы как хотели?
?‍♂️
Поэтому, если вы в нём не сильны — просто заменяйте файлы проверенными версиями!

Все скрипты, которые кажутся вам лишними, сначала закомментируем:

image-3.png

после чего проверяем работоспособность сайта:
  • все ссылки должны скроллить нас на форму
  • в форме должны работать все игровые механики, если они там изначально были
  • если на картинки был наложен blur, он должен убираться при клике
  • рабочий таймер обратного отсчёта
  • корректные даты самой статьи на ленде и в комментариях
  • всякие колбэкеры/камбэкеры, если они были и если они вам нужны
Если после проверки все ок, то смело удаляем закомментированные скрипты.

Расскажу чуть подробнее про отдельный вид скриптов
?


Вырезаем скрипты домонетизации​

Арбитражники часто используют в своих лендах «бэкфикс»: то есть подмену действия, происходящего при нажатии на кнопку «Назад» в браузере. Вместо «Назад» происходит открытие другого лендинга или витрины. Вот пример кастомной домонетизации:

image-4.png

Домонетку можно легко обнаружить по событию onpopstate — просто ищем это слово по всем выкачанным html-файлам и скриптам, и если находим, то в 99% случаев это она
?
Весь блок, показанный на скрине, смело удаляем.

Также, как вариант, если лень искать по файлам, а проверить хочется — открываем у себя в браузере ленд с локальной машины. Дальше кликаем в произвольном месте ленда (необходимое условие, чтобы у скриптов домонетки на десктопе появилась возможность работать с историей браузера), и жмём «Назад». Ничего не произошло? Поздравляю, скорее всего в ленде нет домонетизации. Почему скорее всего? Потому что в скрипте домонетки, например, может стоять проверка на локалхост. Поэтому лучше проверить поиском, либо проверить кнопку «Назад» уже после того, как вы закачали обработанный ленд на хостинг или в трекер.

Помимо кастомных бэкфиксов встречают бэкфиксы от различных сервисов и ПП. Их можно обнаружить по следующим кускам кода:

image-5.png


Домонетизация от OneProfit

image-6.png


Домонетизация от Minfobiz

image-7.png


Домонетизация от KMA


Также некоторые используют древний скрипт от 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:

image-8.png

Меняем цену и валюту: здесь вам понадобится навык умножения на два, чтобы прописать «старую» цену
?


Название оффера

Делаем тупо заменой по тексту, но рекомендую делать это не разом, а по очереди, чтобы не заменить ненароком какие-нибудь названия картинок/скриптов.

Форм-фактор​

Если вы меняете мазь на таблетки или капли на порошок, то вам придётся воспользоваться услугами Google Translate. Переводим весь ленд на русский и вычитываем всё подряд. Вам нужно найти те куски текста, которые не подходят по смыслу. Таблетки нельзя «втирать в колено 2 раза в день», а порошок нельзя накапать в стакан. Всё это вам придётся исправить, лучше всего, конечно, с использованием профессионального переводчика. Но если лень, то Deepl/Google Translate к вашим услугам, что не отменяет того факта, что вам придётся придумывать новый кусок текста.

Перевод на другой язык​

Если вы или ваша команда всерьёз намерены лить трафик на новое гео и у вас есть ленды на других языках, то лучше всего будет воспользоваться услугами профессионалов или отдать ленд на перевод в ПП.

После перевода проверьте в первую очередь все имена: имена персонажей истории, имена комментаторов. Все они должны быть из нового гео. Ищите гуглом списки типа: «топ 100 мужских имён в Бангладеше» и заменяйте.

Далее смотрите все географические названия: город, страна, этнохороним (испанцы, португальцы и т.п.). Всё редактируем под новое гео.

Если ПП позволяет, то ищем реальных местных персонажей: звёзд, врачей, политиков и т.п. и заменяем фото тех, что были, на новых.

Остаётся только поменять цену товара и местную валюту и можно лить!

Проверяем работоспособность​

Итак, в конце вашей работы по редактированию вы должны проверить:

  • вёрстка: она не поехала, сайт корректно отображается и в десктопном и в мобильном вариантах
  • ссылки не открываются в новом или текущем окне, они все скроллят на форму заявки
  • работают все игровые механики и доп.скрипты
  • в форме корректные цены и есть банка товара
  • нету «двойных» дат, т.е. даты у самой статьи и у комментариев написаны один раз. Если видите, что даты две, то вы некорректно выкачали сайт (скорее всего через «Сохранить как» в браузере), придётся поискать в тексте текущий год и удалить лишнее
  • далее остаётся отправить тестовый лид и проверить, что он упал в Отклонённые

Заключение​

Как вы могли заметить, при редактировании лендов довольно много задач приходится выполнять вручную: менять скрипты, названия и т.д. Подумайте над тем, что из этого можно автоматизировать: лично у меня до 30-50% задач по обработке лендов делает телеграм-бот. Он уже дошёл до того, что даже использует компьютерное зрение и чекает, нет ли названия старого оффера на картинках + может их автоматом менять. Возможно, когда-нибудь поделюсь подобным решением в паблике, а вам пожелаю лить в плюс и вычищать ваши лендинги как следует!
 
Хорошая инфа. Желтый как всегда все по полочкам (y)
 
Sou brasileiro e quero vender online, como posso obter resultados?
 
Назад
Верх