В видео ниже мы разобрали особенности настройки HTML-преленда для промоматериалов.
Основные моменты #
HTML-преленд — одностраничный сайт с рекламой товара/услуги, который призван увеличить конверсию и «подогреть» посетителя. Пользователь, попадая с рекламного баннера на промежуточную страницу, должен получить мотивацию к покупке. Так он переходит непосредственно на сайт, где может приобрести товар или воспользоваться услугой.
Создавая промоматериал для площадки с «Directlink» или «Banner», вы можете прибегнуть к конструктору прелендингов. Он находится во вкладке «Добавить промо» настроек кампании. Указав основную информацию и выбрав тип площадки, перейдите во вкладку «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} стоит числовое значение, означающее порядковый номер файла. Вы можете добавить на платформу Salematics несколько документов со стилями. Чтобы обратиться ко второму файлу, используйте по аналогии переменную {CSS2}.
Теперь загрузим файл CSS через соответствующую кнопку.
В открывшемся окне добавим документ со стилем и закроем вкладку.
Важно: вы можете добавлять несколько файлов через кнопку «Загрузить CSS». Каждому файлу будет присвоено числовое значение: {CSS1}, {CSS2}, {CSS3} и так далее. Убедитесь, что необходимые ссылки заменены на соответствующие переменные таким же образом, как описывалось выше.
Замена ссылки на изображение и загрузка файлов #
Если вы хотите использовать на прелендинге изображение, пропишите вместо существующих ссылок переменную {IMG1}.
В нашем примере находится изображение, которое используется в качестве фона. В коде это выглядит так:
<body background="bg-cta.jpg" style = "background-position: center;">Для корректного отображения картинки на прелендинге, заменим ссылку переменной {IMG1}:
<body background="{IMG1}" style = "background-position: center;">Важно: вы можете добавить на платформу несколько изображений, заменив порядковый номер в переменной. Здесь действует принцип, который применяется к файлам со стилями: {IMG1} — первая картинка, {IMG2} — вторая картинка и так далее.
Чтобы лендинг открывался без ошибок, добавьте изображение через соответствующую кнопку.
В открывшемся окне загрузим файл и закроем вкладку.
Важно: вы можете добавлять несколько изображений через кнопку «Загрузить». Каждому файлу будет присвоено числовое значение: {IMG1}, {IMG2}, {IMG3} и так далее. Убедитесь, что необходимые ссылки заменены на соответствующие переменные по схеме, описанной выше.
Замена 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} невозможно.
Добавление макросов для подстановки информации о посетителе #
Для персонификации лендинга можно использовать дополнительные переменные. Полный перечень переменных доступен под ссылкой «Макроподстановки».
В качестве примера подставим в текст название города, в котором находится пользователь, применяя переменную {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} не терялся смысл. Рекомендация относится ко всем параметрам.
Проверка преленда #
Итоговый вид прелендинга можно увидеть через кнопку «Предпросмотр».
Важно: дополнительные параметры не сработают. Они начинают функционировать после запуска кампании.
Настройка типов рекламных площадок #
Теперь настройте типы размещения. Они определяют инвентарь или способ показа промо в рекламном драйвере.
Для HTML-преленда доступны следующие виды:
- «Directlink» — простой переход пользователя на ресурс рекламодателя через Target URL. Выбран по умолчанию.
- «Banner» — баннер, который может быть в виде изображения или HTML файла.
Настройка Target Page URL #
В последнем блоке необходимо указать ссылку целевой страницы ресурса, на которую будет направлен пользователь с объявления. Для Target URL можно выбрать тип ссылки:
- «Регулярный» — ведет на простую страницу (лендинг). Это может выглядеть так —
https://www.viber.com/download-android-update/. - «Файл» — ссылка перенаправляет пользователя на документ для скачивания. Тип может быть использован в случае, когда у рекламодателя нет лендинга. Например, при клике по directlink начнется загрузка файла на устройство —
https://download.viber.com/apk/ViberAndroid-9.6.5.5.apk. Или рекламодатель может воспользоваться HTML-прелендом для аналогичных целей. - «Mobile Deep Link» — позволяет указать ссылку на раздел мобильного приложения. При переходе по ссылке откроется приложение, в котором будет находиться конкретный раздел или карточка товара. Так, ссылка
tg://resolve/?domain=trickortнаправит пользователя в определенную группу мессенджера Telegram.
Target URL обладает макроподстановками. Параметры передают рекламодателю информацию о пользователе, на основе которой подбирается промоматериал.
Макроподстановки добавляются согласно инструкциям, которые отображаются в подсказках, скрытых под знаками вопроса. Перечень параметров находится под одноименной ссылкой.
Cкопируйте целевой адрес со страницы сайта рекламодателя. Вставьте URL в соответствующее поле на платформе. Проверьте, чтобы в ссылке не содержались параметры, которые не поддерживает платформа. Некоторые параметры могут не работать с postback.
Важно: если в настройках аккаунта рекламодателя выставлены параметры целевого URL, они автоматически будут подставлены в Target URL. Убедитесь, что вы не дублируете параметры из аккаунта рекламодателя, иначе могут возникнуть ошибки. Подробнее об этом читайте в материале «Интеграция MANAGED рекламодателя через postback».
Итоговая проверка промоматериала #
Чтобы проверить работу HTML-преленда, сохраните установленные настройки промоматериала через соответствующую кнопку.
Перейдите в раздел с перечнем промоматериалов.
В списке найдите поле с сохраненным промо и нажмите на иконку в колонке «Тестовый переход».
Откроется прелендинг, на котором нужно проверить его отображение. Также удостоверьтесь в корректной работе Target URL. Для этого в любом месте страницы кликните правой кнопкой мыши, нажмите «Просмотреть код» и проанализируйте целевую ссылку на боковой панели.
Если ошибок нет, вернитесь на платформу и измените статус кампании с «Черновик» на «Запущено» через соответствующую кнопку.
Вы можете потренироваться в создании тестового HTML-прелендинга, скачав архив и следуя инструкции.
Подытожим материал:
- HTML-преленд — это одностраничный сайт с рекламой товара или услуги, который создан для увеличения конверсии и «подогрева» интереса посетителя.
- При настройке промоматериала для площадки с «Directlink» или «Banner» можно воспользоваться конструктором прелендингов, который находится на платформе Salematics.
- HTML код рекламного баннера, который вы будете добавлять на платформу, нужно доработать. Если изображения и стили загружены на другой сервер или файлы прописаны в коде прелендинга, замените CTA ссылки.
- Для персонализации лендинга возможно использование дополнительных макросов.
- Перед запуском промоматериала убедитесь в корректной работе HTML-преленда.
