Offer adaptaion for AIO

Моментик

Все оффера должны делаться на основании "современной" версии оффера, к примеру оффер из Keitaro [386] и [404] KZ ru Kaspi AI-QCHi.

Тэг

Адаптация пойдёт сверху-вниз. Для начала нужно добавить в тэг <head>, перед самым его закрывающим тэгом </head> два макроса

Оффер без квиза

В статье описано то, что нужно пропустить при адаптации оффера

{{aio:head}}
{{aio:macros:aio_gtag}}

Макрос {{aio:head}}

Это макрос самого AIO, вообще, он добавляется автоматом, когда ленд загружается в AIO, но лучше добавим его превентивно, чтобы контроллировать где он будет находиться в коде.

Макрос {{aio:macros:aio_gtag}}

Это тоже макрос AIO, который отвечает за добавление google tag manager и отправку Page View гуглу

Тэг

Сразу после открывающего тэга <body> нужно добавить макрос

{{aio:macros:offer_form}}

Макрос {{aio:macros:offer_form}}

Это кастомный макрос, в котором прописаны стили для input формы отправки лида и стиль для враппера самого инпута

Форма отправки лида

Далее, опускаемся к форме отправки лида и нужно по аналогии назвать каждый инпут правильным name

input Имя - name="first_name"
input Фамилия - name="last_name"
input Телефон - name="phone"

!!! warning "Инпут телефона"
    Инпут с телефоном обязательно должен иметь `type="tel"`, иначе движок AIO не распознает этот инпут и не навесит туда фильтрационную библиотеку.

Перед кнопкой отправки формы нужно добавить новый скрытый инпут:
<input id="quizInput" type="hidden" name="quiz_data" value="">

Для чего нужен скрытый инпут

Скрытый инпут был добавлен для того, чтобы скрипт собирал в него все ответы пользователя, а потом AIO сам брал value из этого инпута и отправлял с лидом в нашу CRM

JS часть оффера

Следующим шагом, нужно спустить к JS коде страницы и перенести часть кода из файла quiz.js в index.html. А именно, объявление массива объектов questions, в котором хранятся: описание вопроса, ответы и картинка.

    <script>
      const aioCdn = "{{cdn}}";

      const questions = [
        {
          question: "Сколько Вы хотите зарабатывать ежемесячно?",
          answers: [
            { text: "250 000 ₸" },
            { text: "750 000 ₸" },
            { text: "1 500 000 ₸" },
            { text: "Больше 1 500 000 ₸" },
          ],
          img: "{{cdn}}/offer-assets/img/q1.jpg",
        },
        {
          question: "Сколько времени в день вы готовы уделять работе с платформой?",
          answers: [{ text: "До 10 минут" }, { text: "До 30 минут" }, { text: "Готов(а) уделять больше времени" }],
          img: "{{cdn}}/offer-assets/img/q2.jpg",
        },
        {
          question: "Как быстро Вы хотите получить прибыль от своих вложений?",
          answers: [{ text: "До 7 дней" }, { text: "От 14 до 30 дней" }, { text: "От 30 дней" }],
          img: "{{cdn}}/offer-assets/img/q3.jpg",
        },
        {
          question: "Откуда Вы узнали о платформе от Казатомпром+?",
          answers: [
            { text: "Официальные источники" },
            { text: "Новостные ресурсы" },
            { text: "Социальные сети" },
            { text: "Рекомендации знакомых" },
          ],
          img: "{{cdn}}/offer-assets/img/q4.jpg",
        },
      ];
    </script>

Для чего константа aioCdn и зачем макрос

Эта переменная нужна для того, чтобы прокинуть макрос {{cdn}} дальше, вглубь макроса {{aio:macros:aio_nonsdk_form_handler}}. Там хранится основная логика работы с формой ленда, валидация, обработка ошибок, редирект на страницу "спасибо" и т.д. Этот {{cdn}} будет подставляться перед путём страницы "спасибо", так как она находится внутри папки проекта и переход возможно произвести только по абсолютному пути. Это особенность AIO и если обратить внимание на подключение стилей после загрузки в AIO, то он автоматом добавил пути ко всем стилям.

Зачем макрос {{cdn}} перед каждым изображением в массиве

Этот макрос нужно добавлять для того, чтобы картинки тоже подгружались абсолютным путём к конкретной папке. AIO сам подставит сюда нужный абсолютный путь во время загрузки в трекер.

Удаление лишних файлов

После того, как мы добавим новый код, далее, нужно удалить абсолютно все .js файлы в конце страницы, файл send.php.

Страница thanks

По сути, нужно закинуть папку с оффером в Cursor и прописать ему один промпт, который переносит содержимое страницы спасибо в конец файла index.html, переносит thanks.css в offer-assets/css, а так же логику работы таймера, который будет запускаться только при покаже страницы спасибо после всех этапов.

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

Код промпта приведён ниже:

Скопировать

Скопировать весь текст можно скопировать нажав на иконку слева сверху блока с текстом

У меня есть страница-«спасибо» (thanks.html) и основной лендинг (index.html). Перенеси HTML, CSS-подключение и JS-логику со страницы thanks.html в index.html, но не показывай этот блок сразу:
1. Подключи нужный CSS-файл (например, thanks.css) в <head> index.html.
2. Перенеси HTML-разметку блока в index.html, обернув её в контейнер с уникальным id (например, #thanks-section) и style="display: none".
3. В переносимом thanks.css найди стили, которые в исходном thanks.html были заданы для тега <main> (отступы, layout и т.п.), и перенеси их в новый класс .container-wrapper. Добавь этот класс на тот же div, что несёт id="thanks-section" (то есть у блока будет id="thanks-section" class="container-wrapper"), чтобы стили продолжали применяться без конфликта с остальной верстой основного лендинга.
4. Перенеси связанный JS (таймеры, счётчики и т.п.) в отдельный <script> в конце <body>, переименовав все функции и переменные с уникальным префиксом (например, thanks*), чтобы не конфликтовали с остальным JS на странице. Это касается и ключей localStorage.
Важно: в конце <body> index.html есть строки-плейсхолдеры вида {{aio:macros:...}} и {{aio}} — это шаблонные вставки билд-системы, и они должны оставаться самой последней конструкцией перед </body></html>, в исходном порядке и без изменений. Новый <script> нужно вставить перед этими плейсхолдерами, а не после них.
5. Во всём переносимом и новом JS-коде используй const вместо var везде, где переменная не переназначается; используй let только там, где переназначение необходимо (например, для значения даты старта таймера и для идентификатора интервала). Не используй var вообще.
6. Не запускай логику автоматически — оберни запуск в функцию-триггер (например, showThanksSection()), которая:
   - скрывает предыдущий блок лендинга (например, секцию с классом final-form, через style.display = "none"),
   - показывает перенесённый блок (style.display = "block"),
   - запускает таймер/логику только в этот момент.
   Саму функцию-триггер не вызывай — я вызову её сам в нужном месте, когда добавлю логику показа.
7. Размещай перенесённый блок (#thanks-section) внутри <main>, как последний прямой потомок (после существующих секций, перед </main>).
8. После изменений проверь, что верстка и стили остальных секций (особенно квиз и кнопки ответов) не сломались — как из-за глобальных CSS-правил (*, :root) в переносимом файле, которые могут затронуть всю страницу, так и из-за изменения структуры DOM внутри <main> (квиз генерируется JS-макросом билдера {{aio:macros:quiz_logic}} и может опираться на количество/порядок прямых дочерних элементов <main> — лишний потомок способен незаметно, без ошибок в консоли, сломать рендер радиокнопок ответов квиза).

Добавление макросов скриптов + AIO

Следующим шагом будет добавление ещё парочки макросов, уже в самый конец файла, перед закрывающим тэгом </body>

Макрос quiz_logic

Этот макрос оброс условиями и дополнениями, поэтому нужно пояснить то, как выбрать правильный макрос для работы логики квиза

Сейчас у нас существует 4 вида этого макроса:

quiz_logic - это самый обычный и стандартный вид скрипта. Он нужен для стандартных офферов с квизом, который представляет из себя вопросы в виде обычных кнопок, запись данных в quiz_data инпут.
quiz_logic_filter - это вид скрипта, который работает как квиз, но тут есть доп. оценка ответов, если 1 или несколько ответов оказались неверными, то вместо формы регистрации будет отображаться страница с описанием, что пользователь лох позорный. Остальная логика работает как обычно.
quiz_with_subtitle_and_radio_button - это вид скрипта, который работает как обычный квиз, но тут варианты ответов являются не кнопками, а radio-buttons, а вопросы являются не полями объекта в массиве quiestions, а на самих картинках вопроса, есть только answerTitle, который будет отображаться в CRM перед ответом.
quiz_trade_logic - это вид скрипта, который сделан под определённые оффера на тематику трейдинга от команды RED. Сделан он потому, что там скрипт изначально сделан слишком отличающимся от стандартного, поэтому его оптимизация была не целесообразна и вынесена в отдельный макрос.

  {{aio:macros:aio_nonsdk_form_handler}} 
  {{aio:macros:quiz_logic}} 
  {{aio:macros:offer_links_version_increment}}

Что делает макрос {{aio:macros:aio_nonsdk_form_handler}}

Это внутренний макрос AIO, который был слегка допилен нашими силами. Там хранится основная логика работы с формой ленда, валидация, обработка ошибок, редирект на страницу "спасибо" и т.д.

Что делает макрос {{aio:macros:quiz_logic}}

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

Что делает макрос {{aio:macros:quiz_logic}}

Это тоже кастомный макрос, он нужен лишь для того, чтобы добавлять в путях стилей в конце ?v=цифра, это нужно для жёсткого сброса кэша, если срочно нужно что-то поменять в конкретном файле стилей ленда и перезалить лишь один файл. Работа этого макроса гарантирует, что файл точно будет отдаваться без кэша.