Чек-лист подготовки Лендинга к заливу!

Всем салюты! На связи дядя Вова!

Сегодня поговорим про основные моменты, которые следует учесть перед тем как загрузить архив с лендом на свой хостинг. Если вы льете нутру, то ряд этих манипуляций вам просто необходимо знать наизусть.

Хочется добавить от себя: для того, чтобы редактировать лендинги вовсе не обязательно исследовать сотни курсов по html/css/js. Достаточно немного попрактиковаться и на уровне интуитивной логики начать редактировать код. Но даже если вы этого не желаете делать - эта статья будет отличным чек-листом для ТЗ, которое вы сможете смело вручить своему программисту.

Погнали Тигры!

После того как вы скачали лендинг из Spy-сервиса или из ПП вам необходимо его хорошенько подредактировать. Сегодня я расскажу чёткий и поэтапный план действий! Надеюсь все располагают упорством и текстовым редактором Sublim Text 3!

1 часть. Визуальная.

1) Название оффера в тексте. Для начала мы удостоверимся, что название оффера на скаченном лендинге соответствует тому названию оффера, на который мы собираемся лить. Как бы банально это не звучало, но внимательность и скурпулёзность в этом деле нам не помешает. Проверяем лендинг и в случае если надо заменить название - меняем одной кнопкой "Replace":

Сюда же нюанс: внимательно отнеситесь к форм-фактору оффера. Потому что эта невнимательность может привести к такому содержанию: "Я принимала во внутрь по 3 таблетки этого ГЕЛЯ два раза в день во время еды". Думаю суть вы поняли. Если меняется форм-фактор - меняется и текст. Переводчиком, не спеша, подгоняя смысл и склонения на целевом языке.

2) Заменяем фото Банки/Товара.

Меняем нынешнее фото товара на лендинге на фото товара нашего оффера. Для этого достаточно перенести новое фото товара с таким же названием, что и у старого, в ту же папку.

Думаю смысл тут понятен. Однако, бывает такое, что фото нового товара немного больше чем то, что было и если вдруг стили css не сохраняют пропорции, то размер нового фото может "поломать" красоту вашего лендинга. Для того, чтобы не лезть в код и не играться со стилями css в таких случаях я обычно открываю в фотошопе фото старого оффера и с сохранением того же размера накладываю фото нового товара. Сохраняю это фото в той же папке, с тем же названием.

Отлично! Теперь у нас на лендинге есть фото нашего оффера! Едем дальше!

3) Заголовок. Я приверженец того, что замена заголовков - это одна из наиболее важных составляющих высокого CR. Поэтому и вам настоятельно рекомендую это делать. Ищем его в коде и меняем на свое усмотрение. Желательно прочитать пару полезных книг или статей по копирайтингу, чтобы ваш текст, который будет появляться сразу после клика по объявлению, завлекал посетителя прочитать историю дальше.

4) Врач или главный герой. Этот пункт довольно относительный, так как бывает такое, что определенный врач чуть ли не задает тренд на том или ином гео (привет Dr. James Ong) и его замена может сказаться в худшую сторону, но для этого существует сплит лендингов. Мы же рассмотрим этот пункт немного с другой стороны. Допустим, врач на лендинге никак вам не симпатизирует и у вас имеется чуйка, что он не будет импанировать потенциальному клиенту. Лишним не будет прочитать его комментарий. Возможно смысл его комментария в тексте не подходит под его внешний вид.

Абсолютно то же самое и с главным героем. Если вы видите, что фотографии неестественные или не к месту, то заменяйте/добавляйте/удаляйте их.

5) Комментарии. Фото результата + живой товар.

Обязательным образом через гугл-переводчик в быстром темпе проверяем смысл комментариев. Редактируем то, что не вписывается в концепцию "реального" отзыва. При этом в запасе желательно иметь фото живого товара. Перед тем как начать лить оффер вам, обязательным образом, нужно запросить эти фото у вашего менеджера. Они вам пригодятся как для крео, так и для комментариев на лендинге.

Дополняем фото живого товара/фото результата

По коду, как правило, нет ничего сложного: нужно просто скопировать блок изображения с соседнего комментария, где это фото есть, загрузить новое фото в папку со всеми картинками и прописать к нему путь.

6) Оценка общего внешнего вида лендинга. Финальные правки. В этот пункт я бы добавил несколько подпунктов, а именно:

Лаконичность последовательности: Текст, Фото, Текст, Фото.

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

Приятное оформление Формы заказа.

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

Код для красной строки (при условии, что ваш основной текст в тегах <p></p>):

<style>
p { text-indent: 25px; }
</style>

Код для фона текста в заголовке:

<p> Kako početi jebati puno žena? <span style="background-color: #30E3CA;">Kako povećati penis za 7 cm za 1 sedmicu? </span>Svaki muškarac treba da pročita ovaj članak do kraja! </p>

P.s более углублено про редактирования визуала лендинга можно прочитать тут: https://telegra.ph/Kak-dorabotat-prelending-chtoby-uvelichit-CR-i-ROI-05-16

На этом оформление визуальной части Лендинга завершено! Остальные элементы ставятся по желанию и надобности!

2 часть. Техническая.

Помимо того, что наш лендинг обрел достойный вид и готов побороться за звание "конвертящего", нам необходимо внедрить несколько обязательных "технических ингредиентов" в коде.

1) JQuery и чистка лишних JS файлов в архиве.

Начнем с JQuery. Так как этот скрипт отвечает за работоспособность тех или иных элементов на сайте, то наверно проще его оставлять всегда и везде. Однако, тот файл JQuery, который находится у вас в архиве может быть с "сюрпризом" в виде какого-то скрипта, который будет воровать какое-то количество ваших лидов. Именно поэтому я настоятельно рекомендую:

Либо подгружать этот JS-файл скриптом из интернета. Но сразу оговорюсь - этот способ не жалуют, так как отнимаются миллисекунды на загрузку страницы. Хотя, признаться честно, разницы между локальным и облачным JQuery по скорости загрузки страницы я не заметил. Загружается этот скрипт между тегами <head></head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

Либо локально с этого же сайта https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js нужно сохранить содержимое в файл jquery.min.js и создать путь к нему:

Далее в папке нашего лендинга нам следует почистить все ненужные JS-скрипты. Так как скорее всего эту статью будут читать далеко не программисты, мы будем пользоваться "костыльным методом удаления". Простыми словами: удалил файл, обновил в браузере index.html, проверил все ли работает и не съехало ли что-то.

Например, мы решили удалить этот файл:

И видим, что было до и после:

В данном примере мы доказали себе, что данный скрипт трогать не стоит. Возвращаем его обратно. Он отвечает за отображение актуальной даты.

Собственно по такой аналогии я избавляюсь от 95% скриптов, которые оказываются в папке, после загрузки лендинга с ПП или SPY.

2) Инпуты в тегах <form></form>. Что здесь нужно проверить и изменить?

Во-первых: тип поля. У поля ввода имени - это "text". У поля ввода телефона - это "tel". Таким образом, у человека на лендинге при вводе номера телефона будет появляться клавиатура с цифрами, вместо клавиатуры со всем алфавитом.

Во-вторых: название инпутов. У разных ПП разные требования, но чаще всего у поля ввода имени name="name", а у поля ввода телефона name="phone". Будьте внимательны. Имена полей, которые ПП требует для отправки чаще всего указаны в файле обработчике.

В-третьих: placeholder. Это то что будет отображаться в поле формы до момента клика на нее. Своего рода подсказка.

В-четвертых: параметр required. Отвечает за то, чтобы, при отправке данных с формы, в ней не было пустых полей.

В-пятых: параметр autocomplete. Заполнение полей из сохраненных вариантов. Советую использовать только на поле name, так как на поле phone может вставиться что-то некорректное. Дадим человеку осознанно и вдумчиво ввести свой номер телефона. Однако стоит задуматься: а нужен ли он вообще? Если приняли решение, что человек должен вводить все сам ручками, то ставим к тегу <form этот атрибут:

autocomplete="off"

3) API файл. Отправка лидов с вашего сервера в ПП. Каждая ПП имеет свой обработчик. Это небольшой php-файл, на который будет ссылаться ваша форма. Чаще всего менеджер вашей ПП после знакомства с вами обязан вам предоставить мануал по его настройке. И, как правило, настраивается там все проще простого. Например, на скриншоте ниже мне нужно указать 3 личных параметра: api_key, target_hash, country_code.

По сути на этом настройка файла-обработчика закончена. Теперь, после того как человек оставит заявку, эти данные отправятся в ПП, которая поймет, что этот лид принадлежит именно вам.

Возвращаемся в index.html к тегам <form> и указываем в атрибуте action путь до нашего обработчика:

Теперь наша форма после нажатия на кнопку "Отправить" будет ссылаться на наш обработчик, который в свою очередь отправит данные лида в ПП. Но почему атрибут action имеет вид:

Об этом как раз поговорим в следующем пункте!

4) Проброс пикселя по ссылке. Динамический пиксель. Когда-то я уже рассказывал про методы проброса пикселя по ссылке в этой статье: ЖМЯК. Отнюдь, информации там много, а пробросить пиксель хочется как можно проще и быстрее. Поэтому разберем в этом пункте максимально быстрый способ пробросить пиксель по ссылке до страницы Спасибо.

Возвращаясь к последнему предложению из предыдущего пункта, отметим тот факт, что мы не просто ссылаемся на файл-обработчик, а ссылаемся на него с уже приписанными к нему: Параметр+Номер пикселя.

Простыми словами - вы указали в источниках в Кейтаро вот так:

И теперь ваша ссылка скопированная после создания кампании будет выглядеть так: xxxxxxxxxxx.ru/?ad_id={{ad.id}}&fbpixel=1111111111111111

Благодаря конструкции action="order.php?fbpixel=<?=$_GET["fbpixel"]?>", после открытия ссылки номер пикселя "1111111111111111" как бы впишется в эту конструкцию на лендинге и будет иметь вид:

action="order.php?fbpixel=1111111111111111"

Все что нам теперь нужно будет сделать - это открыть еще раз обработчик order.php и поменять редирект на Спасибо с функции header на функцию include (чтобы Спасибо открывалось под обработчиком order.php, а не редиректило на confirm.php):

Ну и не забываем поставить короткий пиксель на Спасибо (confirm.php):

Переименовываем index.html в index.php:

Загружаем на хостинг. Проверяем отбив пикселя с помощью расширения:

5) Настраиваем постбэк для ПП. Здесь как и с пунктом 4 основную помощь может оказать менеджера вашей ПП. Однако, если хотите провернуть это сами - то следуйте простым советам.

Первое что нужно сделать - это настроить глобальный постбэк в ПП.

А дальше вам нужно вставить всего 1 строчку между тегами <form></form>. Выглядит она примерно так:

<input type="hidden" name="clickid" value="{subid}">

Важно: значение "clickid", по которому передается статус вашего лида из ПП в Кейтаро в разных ПП может быть разным. Смотреть это можно все также по обработчику:

Проверить работоспособность настроек очень просто. Оставляем тестовый лид и смотрим в ПП передался ли ID клика, который сгенерировал Кейтаро. Если все успешно, значит этот лид скоро отобразится в интерфейсе Кейтаро (Промокод - VLADIMIR 20% скидка на первую покупку).

6) Добавляем атрибут loading="lazy" ко всем изображениям. После применения данного атрибута загрузка медиа будет постепенной и по мере скролла.

7) Ссылки-якоря. Ни для кого не секрет, что юзеру намного проще "не потеряться" на лендинге, если ему в помощь придут ссылки-якоря. И они, действительно, могут помочь потенциальному покупателю быстрее найти форму заказа. Как правило, эти ссылки якоря ставятся на название оффера, которое фигурирует как в основном тексте, так и в комментариях.

Для этого достаточно присвоить какому-то блоку ближе к форме id и придумать ему название. Например, id="order_form":

И создать на нужных ключевых словах - ссылки на этот id:

И последнее, что можно тут добавить - это вставка скрипта плавного скролла до указанного якоря:

<script type="text/javascript">
$('a').on('click', function (e) {
e.preventDefault();
$('html, body').animate({scrollTop: $('#toform').offset().top - 70}, 700)})
</script>

8) Маска на форму. Данная фишка относится к разряду пунктов, к которому стоит отнестись с осторожностью. Все дело в том, что на многих гео имеется плавающая длина телефонного номера.

Но если вы все же решились ее настроить, то прошу перейти на данный пост, где есть подробная инструкция по установке: ЖМЯК.

Сюда же бонусом: скрипт на поле ввода имени, запрещающий ввод цифр. Зачем нам люди которые не могут ввести нормально свое имя?

<script type="text/javascript">
function preventDigits(sender) {
sender.value = sender.value.replace(/\d/g, "");}
</script>

В инпут имени добавляем:

<input type="text" id="txt" onkeyup="preventDigits(this);" />

Теперь, если человек будет вводить цифры, то они будут стираться!

9) Уменьшаем вес архива. Обязательным образом уменьшаем всё то, что можно уменьшить. Например, с помощью сервиса:

https://www.iloveimg.com/ru/compress-image

На этом вся техническая подготовка завершена! Лендинг готов к заливу!

P.s помимо всего вышеперечисленного мы можем внедрить некоторые фишки для того, чтобы уменьшить количества треша. Прочитать про это можно в статье у Желтого: https://yellowweb.top/10-sposobov-snizit-kolichestvo-otklonyonki-i-tresha-na-vashih-lendingah/

3 часть. Плюшки.

Наверняка вы задумывались о каких-то дополнительных скриптах для того, чтобы в той или иной степени поднять CR своего лендинга. Разберем в этой части некоторые из них!

1) Рулетки, коробки, подарки, двери, стирашки вместо обычной формы.

Скрипт рулетки: https://t.me/vladimircard/718

Скрипт боксов: https://t.me/yellow_web/770

Лендинг со стиралкой (выдирайте скрипт сами): https://disk.yandex.ru/d/AwefuD6zERgFmQ

2) Большая кнопка "Заказать" внизу экрана и Коллбекер.

Коллбекер: https://disk.yandex.ru/d/r83lz39BG8ZK_w

Кнопка: https://codepen.io/dvygolov/pen/xxLJmrN

Подробная статья по кнопке: https://t.me/yellow_web/542

3) Динамическое изменение элементов.

Скрипт динамически изменяющегося города. Например можно сделать текст: "Для жителей города (СКРИПТ подтягивающий название города) сегодня проходит акция!"
Динамические даты в комментариях.
Динамически изменяющееся количество оставшегося товара на сайте

4) Попапы формы заказа. Появляются либо при наведении курсора на верхнюю часть экрана. Либо спустя какое-то время. Опять же нативность данного способа под сомнениям, но потестить определенно стоит.

5) Скрипт фейковых заказов на лендинге. Часто многие ПП ставят этот скрипт по дефолту на свои лендинги. Можете поставить сами, потестить и сравнить результаты.