Конференции

Стамбул, Турция
28-29
Сентябрь
Варшава, Польша
06
Октябрь
14
Октябрь
Лиссабон, Португалия
16-17
Октябрь
HOLLYWOOD, USA
16-18
Октябрь
Дубай, ОАЭ
26-27
Октябрь
Берлин, Германия
26-27
Октябрь
Дубай, ОАЭ
28
Октябрь
Милан, Италия
28-30
Октябрь
Бангкок, Таиланд
30-01
Ноябрь -
Декабрь
Las Vegas, USA
23-25
Январь

Скрипт “коробочек” для landing page, установка и настройка


Применим на практике скрипт с коробками для Landing Page от Жёлтого Веба, который повышает процент перехода к форме заказа и мотивирует оставить заявку.

Также вместо коробок можно использовать рулетку: https://cpa.rip/stati/roulette-script/

Для Европы его использовать нельзя:

Бесплатная скачивалка Landing Page

Скачаем понравившийся лендинг с помочью нашей скачивалки Landing Page – там же доступна подробная инструкция по работе с ним.

Наш скачанный ленд (локально дизайн может плыть, на серваке будет открываться 1в1 как в оригинале):

Скрипт GiftBoxes от Жёлтого Веба

Далее скачаем готовый скрипт коробок с github: https://github.com/dvygolov/YWB.GiftBoxes.JS

Скрипт был доработан автором для удобства подключения и использования.

Что умеет

  • поддерживается 2 стиля коробок: обычные и покрасивее. Вы можете заказать вашему дизайнеру любые картинки коробок и кинуть их в папку bimg, назвав их также, как файлы, лежащие там, добавив в конец порядковый номер. Типа: closed3.png, opened3.png и т.д.
  • скрипт не вставляет свою форму, вы можете использовать его на любом ленде, где УЖЕ есть форма. Достаточно указать селектор этой самой формы и скрипт автоматом её скроет до момента открытия пользователем “выигрышной” коробки.
  • скрипт автоматом подменяет все ссылки с якорями, чтобы скролл шёл к блоку коробок, а не к скрытой скриптом форме.

Как подключить

Откройте архив со скачанным лендом и найдите файл index.php

  • в нем должен быть подключен JQuery

Если не подключен необходимо сделать это самостоятельно. Можно подгружать напрямую с code.jquery.com, прописав следующую строчку <script src="https://code.jquery.com/jquery-3.6.0.min.js"> (версия библиотеки по обстоятельствам).

  • после чего закиньте файлы скачанного скрипта коробок в корень лендинга:

  • и подключите скрипт, прописав на него ссылку <script src="ywbboxes.js"></script>:

  • Найдите в коде лендинга форму отправки лидов и прямо перед ней добавьте тег <div> и задайте ему какой-нибудь id, например <div id="boxesMain"></div>

  • у формы (или всего блока, внутри которого болтается форма) тоже должен быть свой id, например formMain

Как настроить

  • Добавьте на страницу код который приведен ниже и настройте его под себя

</div>
<script>
initBoxes({
selectors:{
boxes:"#boxesMain",
form:"#formMain"
},
texts:{
instructions: "Click on any box and try to find one with a 50% discount 👇",
lastTry:["Warning!","This is your LAST TRY."],
congratulations:["Congratulations!","You can order the product with a 50% discount!"]
},
product:{
price: 1990,
currency:"$"
},
style:2
});
</script>

  • По факту вся настройка сделана в духе скрипта Drewlex и идёт через метод initBoxes. Задаются 2 селектора: для блока коробок ("#boxesMain") и для формы ("#formMain").
  • Далее задаются тексты: для заголовка блока коробок, и для каждого сообщения. Также задаётся цена и валюта товара. Ну и последний блок – это порядковый номер стиля

Готово! Проверяем. Вместо формы заказа на лендинге появился блок с коробочками. После “игры” с ними юзеру выдается сообщение о победе/скидке и появляется форма заказа.

Решение возможных проблем

В некоторых случаях могут возникнуть проблемы с отображением и функционированием скрипта коробочек. Например на него могут влиять css стили самого лендинга. В нашем случае одновременно отображались и закрытые и открытые коробки:

Чтобы найти стиль который мешает переходим к просмотру кода элемента. Выделяем коробочку и смотри какие стили на него влияют. Красным выделены файлы стилей лендинга. Пробуем отключать пока не найдем виновника:

Виновник найден. Это display: block; в 181 строке файла style_9503_2.css. При этом важно, чтобы отключение этого параметра не ломало сам лендинг. Убираем найденный параметр.

Проверяем что ошибка устранена.

Скрипт рулетки

Ранее мы выкладывали скрипт рулетки и инструкцию его подключения: https://cpa.rip/stati/roulette-script/

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


Like it? Share with your friends!

1 Комментарий

X