Настройка HTML преленда для промоматериалов

Основные моменты #

HTML преленд представляет собой одностраничный сайт с рекламой товара/услуги, призванный увеличить конверсию и «подогреть» посетителя. Пользователь, попадая с рекламного баннера на промежуточную страницу, должен получить мотивацию к покупке. Так он переходит непосредственно на сайт, где может приобрести товар или воспользоваться какой-то услугой.

Создавая промоматериал для площадки с «Directlink», вы можете прибегнуть к конструктору прелендингов, который находится во вкладке «Добавить промо» настроек кампании. Указав основную информацию и выбрав тип площадки, перейдите во вкладку «HTML».

Настройка HTML преленда для промоматериалов
Блок «Кампании», Раздел «Информация»

В появившемся поле вам необходимо добавить HTML код рекламного баннера. Для демонстрации функционала мы будем использовать следующую разметку веб-страницы:

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>New Age - Start Bootstrap Theme</title>

  <link href="new-age.css" rel="stylesheet">

</head>

<body background="bg-cta.jpg" style = "background-position: center;">

  <section class="cta">
    <div class="cta-content">
      <div class="container">
        <h2>Hello {CITY_NAME}<br>Stop waiting.<br>Start building</h2>
        <a href="https://website.com/" class="btn btn-outline btn-xl">Let's Get Started!</a>
      </div>
    </div>
  </section>

</body>

</html>

Доработка прелендинга и загрузка сопутствующих документов #

Сперва вам необходимо изменить код для его корректной работы. Вы можете сделать это непосредственно в поле «HTML код рекламного баннера» или в любом удобном редакторе. При использовании редактора не забудьте перенести готовый код в вышеуказанное окно.

Если все ваши изображения и файлы со стилями загружены на другой сервер или же они прописаны прямо в коде прелендинга, сразу переходите к шагу «Замена CTA ссылки».

Замена ссылки для стилей и загрузка CSS-файлов #

Когда у прелендинга стили содержатся в отдельном файле, вы можете загрузить его вместе с самим HTML прелендом. Для этого в вашем коде необходимо сменить ссылку на CSS-файл. В нашем примере мы внесем правку в следующую строку:

<link href="new-age.css" rel="stylesheet">

Вместо new-age.css вставляем {CSS1} и получаем такой элемент:

<link href="{CSS1}" rel="stylesheet">

Важно: в конце переменной {CSS1} стоит числовое значение, означающее порядковый номер файла. Вы можете добавить в админку несколько документов со стилями. Для того чтобы обратиться ко второму файлу, используйте по аналогии переменную {CSS2}.

Теперь загрузите файл CSS через кнопку «Load CSS», расположенную под окном с HTML кодом.

Настройка HTML преленда для промоматериалов
Кнопка «Load CSS»

Далее нажмите на «Select file», выберите необходимый документ со стилем и закройте вкладку.

Обращаем внимание на то, что вы можете загружать сразу несколько файлов, воспользовавшись кнопкой «Добавить CSS». Каждому файлу будет присвоено свое числовое значение: {CSS1}, {CSS2}, {CSS3} и так далее. Обязательно убедитесь, что все необходимые ссылки заменены на соответствующие переменные таким же образом, как описывалось выше.

Настройка HTML преленда для промоматериалов
Кнопка «Load CSS»

Замена ссылки на изображение и загрузка файлов #

Если вы планируете использовать на своем прелендинге изображение, вам нужно прописать вместо имеющихся ссылок переменную {IMG1}.

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

<body background="bg-cta.jpg" style = "background-position: center;">

Чтобы картинка корректно отображалась на прелендинге, замените ссылку на нее переменной {IMG1}:

<body background="{IMG1}" style = "background-position: center;">

Важно: вы можете добавить несколько изображений одновременно, заменив порядковый номер в переменной. Тут действует тот же принцип, что и для файлов со стилями: {IMG1} — первая картинка, {IMG2} — вторая картинка и так далее.

Для безошибочного открытия лендинга загрузите необходимые изображения, используя кнопку «Load image», расположенную под окном с HTML кодом.

Настройка HTML преленда для промоматериалов
Кнопка «Load image»

Далее нажмите на «Select file», выберите необходимый файл и закройте вкладку.

Вы также можете загрузить сразу несколько изображений, воспользовавшись кнопкой «Загрузить». Каждому файлу будет присвоено свое числовое значение: {IMG1}, {IMG2}, {IMG3} и так далее. Обязательно убедитесь, что все необходимые ссылки заменены на соответствующие переменные по схеме, описанной выше.

Настройка HTML преленда для промоматериалов
Загрузка изображений

Замена CTA ссылки #

Чтобы в Target URL автоматически подставлялись динамические параметры, такие как click_id и другие, следует заменить все ваши целевые ссылки на переменную {URL}.

В нашем демонстрационном лендинге присутствует только одна такая ссылка:

<a href="https://website.com/" class="btn btn-outline btn-xl">Let's Get Started!</a>

Давайте вставим вместо нее переменную {URL}. Теперь строка будет выглядеть следующим образом:

<a href="{URL}" class="btn btn-outline btn-xl">Let's Get Started!</a>

Важно: целевая ссылка может быть только одна. В данном случае {URL2} создать невозможно.

Добавление макросов для подстановки информации о посетителе #

Для персонификации лендинга можно использовать дополнительные переменные. Их полный перечень доступен под ссылкой «Дополнительные параметры», расположенной под полем с HTML кодом.

Настройка HTML преленда для промоматериалов
Перечень «Дополнительные параметры»

В нашем примере мы будем подставлять в текст название города нахождения пользователя с помощью переменной {CITY_NAME}:

<h2>Hello {CITY_NAME}<br>Stop waiting.<br>Start building</h2>
        <a href="{URL}" class="btn btn-outline btn-xl">Let's Get Started!</a>

Важно: чтобы определить город, мы используем технологию Maxmind. Однако не к каждому IP-адресу в этой базе найдется необходимый город. Поэтому при составлении текстов для прелендинга постройте его так, чтобы он не терял смысл, когда вместо переменной {CITY_NAME} ничего не будет отображаться. Данная рекомендация относится и к иным параметрам.

Проверка преленда #

Для проверки того, как будет отображаться ваш прелендинг, нажмите на кнопку «Preview», находящуюся под полем «HTML код рекламного баннера».

Настройка HTML преленда для промоматериалов
Кнопка «Preview»

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

Особенности блока «Настройка типов размещения» #

Настраивая промоматериал, стоит уделить отдельное внимание типу размещения «Overlay», находящемуся в соответствующем блоке, поскольку он требует дополнительной регулировки.

Настройка HTML преленда для промоматериалов
Тип размещения «Overlay»

В расположенной ниже графе «Background» следует указывать цвет, кликнув на соответствующее поле, и прозрачность фона. Фон появляется, когда рекламное окно меньше размера экрана.

Настройка HTML преленда для промоматериалов
Графа «Background»

Далее выберите «Вариант отображения». Отметив опцию «Fixed», прелендинг будет открываться только при условии того, что он полностью сможет поместиться на экран пользователя. Здесь же нужно прописать размер рекламного баннера в пикселях или процентах.

Настройка HTML преленда для промоматериалов
Опции «Вариант отображения» и «Размер рекламного баннера»

Если вы хотите сделать преленд более адаптивным, отметьте пункт «Ranged». Тогда у вас появится возможность указать минимальный и максимальный размер рекламного окна в пикселях или процентах.

Настройка HTML преленда для промоматериалов
Опции «Вариант отображения» и «Размер рекламного баннера»

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

Настройка HTML преленда для промоматериалов
Опции «Отступ»

Теперь определим позицию для показа рекламного окна. В админке поддерживается девять различных вариантов размещения.

Настройка HTML преленда для промоматериалов
Опции «Позиция»

Настройка Target Page URL #

Далее необходимо настроить Target URL. О том, как это правильно сделать, читайте специализированный раздел нашего материала, посвященный созданию CPA-кампании.

Настройка HTML преленда для промоматериалов
Раздел «Target URL»

Итоговая проверка промоматериала #

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

Настройка HTML преленда для промоматериалов
Кнопка «Сохранить»

Затем перейдите в раздел «Назад к списку», ссылка на который находится в верхней левой части экрана.

Настройка HTML преленда для промоматериалов
Раздел «Назад к списку»

В появившемся списке найдите поле с сохраненным промо и нажмите на овальную иконку в колонке «Тестовый переход».

Откроется прелендинг, где следует проверить правильность его отображения. Также стоит удостовериться в корректной работе Target URL. Для этого в любом месте страницы кликните правой кнопкой мыши, нажмите «Просмотреть код» и проанализируйте целевую ссылку на боковой панели.

Если ошибок не обнаружено, вернитесь в админку и поменяйте статус кампании с «Draft» на «Launched» через нажатие на соответствующую кнопку.

Настройка HTML преленда для промоматериалов
«Тестовый переход»

Вы можете потренироваться в создании тестового HTML прелендинга, следуя описанной инструкции и скачав данный архив.

Давайте подытожим все вышесказанное:

  1. HTML преленд — это одностраничный сайт с рекламой товара или услуги, созданный для увеличения конверсии и «подогрева» интереса посетителя.
  2. При настройке промоматериала для площадки с «Directlink», можно воспользоваться к конструктором прелендингов, который находится в админке.
  3. Стоит иметь в виду, что HTML код рекламного баннера, который вы будете добавлять в админку, обязательно нужно доработать. Если все изображения и файлы со стилями загружены на другой сервер или же они прописаны непосредственно в коде прелендинга, вам остается только заменить CTA ссылки.
  4. Для персонализации лендинга возможно использование дополнительных макросов.
  5. Если промоматериал настраивается по типу «Overlay», необходимо внести ряд изменений в специально отведенные для этого поля.
  6. Прежде чем запускать кампанию, убедитесь в корректной работе HTML преленда.