Добавив рулетку и форму заказа отпадает необходимость использовать лендинг. Получаем больший процент попавших на форму заказа юзеров, чем было бы переходов на лендинг. На некоторых гео и офферах это заметно повышает % конверсий.

В итоге мы получим вот такую рулетку:

Берем нужный преленд с сайта партнерки или выкачиваем понравившийся любым из этих способов: https://cpa.rip/stati/copy-landing/.

Закидываем в корень преленда папку «ruletka» (все файлы в конце статьи).

В папке картинку «image11.png» меняем на фото товара.

В коде преленда подключаем скрипты и стили, копируем код из файла «скрипты и стили.txt», который находится в архиве.

Если код jQuery уже был подключен, строку <scriptsrc=»ruletka/jquery-1.12.4.min.js»></script> убираем.

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

Вот пример такого места на скрине:

Находим код кнопки в коде преленда и сразу за ним вставляем кода рулетки.

*Текст на кнопке меняем например на «Получить скидку».

Разберем части кода.

Код самой рулетки:

Код блока заказа. А) фото товара с указанием скидки. Б) Таймер. В) Форма заказа*. Г) Срок действия акции.

Форму заказа необходимо настроить для передачи лидов по API вашей партнерской программы. В каждой партнерской программе это реализовано по-своему. Необходимо руководствоваться их инструкцией или обратиться к менеджеру.

Чаще всего работает следующим образом (на примере партнерки Offerrum): к преленду подключается файл обработчик «order.php». Редактируется html-код формы заявки на лендинге, чтобы форма в качестве параметра action ссылалась на файл «order.php». На скриншоте ниже уже отредактированный код лендинга, форма в котором в качестве параметра action использует order.php

При нажатии кнопки «submit» order.php отправляет данные формы в партнерку.

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

❗️Чтобы .php обработчик работал, перед заливкой необходимо переименовать индексный файл прелендинга из index.html в index.php

Код всплывающего окна

Все тексты меняем на свое усмотрение.

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

После вращения рулетки появляется всплывающее окно с результатом:

Юзер закрывает попап и видит форму заказа + мотивирующие к заказу элементы (старая/новая цена, таймер, срок действия акции):

При возникновении конфликта подключенных стилей со стилями самого преленда, вносим необходимые правки. Переименовываем конфликтующие селекторы стиля в подключенном коде и соответственно в файле: ruletka/index.css

Ссылка на архив с файлами: https://cpa.rip/files/ruletka-cparip.zip