Добавление форм на лендинги

Стандартная SDK-форма и собственные формы

После загрузки лендингов в AIO (процесс описан в руководстве Загрузка лендингов в AIO) есть два способа подключить форму: использовать стандартную SDK-форму или добавить собственную.

В этом руководстве разобраны оба варианта.

Как использовать стандартную SDK-форму

Перейдите в Landings. Нажмите правой кнопкой мыши на нужный лендинг и выберите Manage Landing.

В блоке Code добавьте тег {{form}} в то место index.html, где должна появиться форма.
Тег {{form}} на лендинге.
Нажмите кнопку Save.

SDK-форма AIO автоматически отрисуется и будет показываться посетителям вашего лендинга.

Стандартная SDK-форма выглядит так:

Язык формы выбирается автоматически по языку браузера посетителя.

Правила валидации:

Email должен содержать символ @
Номера телефонов проверяются с помощью https://intl-tel-input.com

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

SDK-форму также можно настроить: изменить её стиль и поведение. Подробнее в руководстве Настройка SDK-формы.

Как использовать собственную форму

Добавление своей формы в HTML лендинга

Вместо стандартной SDK-формы можно использовать собственную. Просто добавьте свою форму в код лендинга и передавайте данные из её полей в поля визита AIO с помощью скрипта.

Добавьте форму в HTML лендинга. Это можно сделать как до загрузки лендинга в AIO, так и после.
Перейдите в Settings→Macros.

Найдите скрипт AIO Non-SDK Form Handler и убедитесь, что он активен.

Если он выключен, нажмите на макрос правой кнопкой мыши, выберите “Edit Macros” и включите переключатель.

Перейдите в Landings. Нажмите правой кнопкой мыши на нужный лендинг, выберите “Manage Landing” и добавьте на лендинг макрос {{aio:macros:nonsdk_form_handler}}. Вставьте его после закрывающего тега {{aio}}, как показано ниже:

Убедитесь, что slug полей вашей формы совпадают с нашими slug полей. Чтобы данные из вашей формы корректно записывались в поля AIO, slug поля должен совпадать с его именем в AIO.

Slug полей нашей формы:

first_name
last_name
email
phone.

Когда форма и макрос {{aio:macros:nonsdk_form_handler}} добавлены на лендинг, нажмите “Save”.

Ваша форма будет показываться посетителям лендинга. Когда посетитель заполнит форму, данные лида автоматически сохранятся в поля AIO через макрос {{aio:macros:aio_nonsdk_form_handler}} и будут видны в соответствующих полях в AIO.

Поля с данными лида, доступные в таблицах AIO.

Добавление своей формы через макросы

Собственную форму (или любые стили) можно добавить как макрос и просто вызывать её по тегу. Форма автоматически отрисуется и будет показываться посетителям лендинга.

Перейдите в Settings→Macros.

Нажмите +Macros, чтобы добавить свой скрипт.

Вставьте скрипт в блок HTML.

Поведение макроса настраивается переключателями:

Prefer Placement: выберите Header или Footer, чтобы разместить макрос в начале или в конце лендинга соответственно.
Active: включите, чтобы макрос работал, или выключите, чтобы отключить его.
Global: включите, чтобы макрос автоматически применялся ко всем лендингам вашего Tenant. Выключите, чтобы он не применялся автоматически. Если Global выключен, макрос можно добавить на лендинг по его slug в формате {{aio:macros:your_macros_slug}}.

Пример скрипта формы:

<script>
(function () {
  window.aioBus = window.aioBus || [];

  window.aioBus.push({
    type: "form-controls",
    controls: [
      { key: "first_name", placeholder: "First Name", type: "text",  value: null, rules: ["required","minlength:2","maxlength:64"] },
      { key: "last_name",  placeholder: "Last Name",  type: "text",  value: null, rules: ["required","minlength:2","maxlength:64"] },
      { key: "phone",      placeholder: "Phone",      type: "phone", value: null, rules: ["required","minlength:5","maxlength:20"] },
      { key: "submit",     placeholder: "REGISTER NOW", loading:"SUBMIT_LOADING", success:"SUBMIT_SUCCESS", step:"SUBMIT_STEP", type:"submit" }
    ]
  });

  // Локаль и телефон: defaultCountry по умолчанию, показывать код. (separateDialCode — если поддерживается)
  window.aioBus.push({
    type: "config",
    config: {
      form: {
        language: "en",
        phone: { defaultCountry: "us", showDialCode: true, separateDialCode: true }
      }
    }
  });
})();
</script>

Когда макрос добавлен и сохранён, перейдите в Landings. Нажмите правой кнопкой мыши на нужный лендинг и выберите Manage Landing.

В блоке Code добавьте тег {{form}}, чтобы указать, где на лендинге должна отображаться форма.

Добавьте созданный ранее макрос с формой в формате {{aio:macros:your_macros_slug}}. Вставьте его после закрывающего тега {{aio}}, как показано ниже:

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

По той же логике можно добавлять на лендинги стили и создавать сколько угодно макросов в Settings → Macros. Главное, вставляйте макросы на лендинги в формате {{aio:macros:your_macros_slug}} и размещайте их после закрывающего тега {{aio}}.

Отправка данных лида в Destination

Откройте Destination (или Advertiser), куда нужно отправлять данные лида.
Найдите поля, через которые данные лида передаются в Destination. В эти поля можно вставить следующие плейсхолдеры:

Phone: {{aio.visit.fields.phone}}
Email: {{aio.visit.fields.email}}
First Name: {{aio.visit.fields.first_name}}
Last Name: {{aio.visit.fields.last_name}}

Поля с данными лида из шаблона интеграции в Destinations.

➡️Если вместо API-интеграции вы используете ссылки Simple Redirect, плейсхолдеры можно добавить в редирект-ссылку. Пример:

https://exampleredirect.com/?click_id={{aio.visit.uuid}}&fname={{aio.visit.fields.first_name}}&lname={{aio.visit.fields.last_name}}&email={{aio.visit.fields.email}}&phone={{aio.visit.fields.phone}}