Что такое пользовательский лендинг

Пользовательский (hosted) лендинг — это произвольная HTML-страница, загруженная в систему в виде ZIP-архива. Она отображается пользователю в рамках Flow кампании: после перехода по трекинговой ссылке и до редиректа на оффер.

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

Все загружаемые лэндинги должны соответствовать правилам допустимого использования сервиса.

Структура ZIP-архива

Архив должен содержать файл index.html (или index.twig) в корне. Все статические файлы (изображения, CSS, JS, шрифты) должны находиться рядом или во вложенных папках.

landing.zip
├── index.html        ← обязательно
├── style.css
├── script.js
└── images/
    └── bg.jpg

Система разворачивает архив и раздаёт файлы через S3. Все пути к ассетам внутри HTML обязательно должны быть относительными.

Относительные пути к ассетам

Платформа публикует лендинг по динамическому URL вида:

https://cdn.example.com/landings/<id>/

Поэтому все ссылки на файлы внутри index.html должны быть относительными — без ведущего / и без указания домена.

Примеры правильных путей

<!-- Стили -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/main.css">

<!-- Скрипты -->
<script src="script.js"></script>
<script src="js/vendor/gsap.min.js"></script>

<!-- Изображения -->
<img src="images/bg.jpg" alt="background">
<img src="images/logo.png" alt="logo">

<!-- Фоновое изображение в CSS -->
<style>
  .wheel {
    background-image: url('images/wheel.png');
  }
</style>

<!-- Шрифты (в style.css) -->
@font-face {
  font-family: 'MyFont';
  src: url('fonts/myfont.woff2') format('woff2');
}

<!-- Видео -->
<video src="video/promo.mp4" autoplay muted loop></video>

<!-- Аудио -->
<audio src="sfx/spin.mp3"></audio>

Примеры неправильных путей ❌

<!-- Абсолютный путь от корня — сломается при публикации -->
<link rel="stylesheet" href="/style.css">
<img src="/images/bg.jpg">

<!-- Полный URL — не будет работать в окружении лендинга -->
<script src="https://mysite.com/script.js"></script>

---

Загрузка лендинга

1. Перейти на страницу /app/landings

2. Нажать кнопку Загрузить лэндинг

3. Заполнить форму:

4. Нажать Save — система загрузит архив, распакует его и опубликует лендинг

После успешной загрузки лендинг появляется в таблице и доступен для использования в Flow кампании.

---

Редактирование лендинга

Нажать кнопку ⋮ напротив нужной записи → Редактировать. Можно изменить название, logo, статус и загрузить новую версию ZIP-архива.

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

---

Редактор HTML-шаблона

Для каждого лендинга доступно встроенное редактирование файла index.html прямо в интерфейсе — без повторной загрузки ZIP-архива.

Как открыть

1. Нажать кнопку ⋮ напротив нужного лендинга

2. Выбрать Edit Template

Откроется диалог на весь экран с двумя панелями.

Панели редактора

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

Важно: редактор работает с файлом index.html— основным шаблоном лендинга. Остальные файлы архива (CSS, JS, изображения) остаются без изменений.

Сохранение

Нажать Save Template — изменения применяются немедленно. Новый ZIP загружать не нужно.

Как платформа встраивает логику в лендинг

При отображении лендинга система автоматически добавляет к HTML блок с необходимыми скриптами (landing-includes). Это происходит на стороне сервера — никаких правок в HTML делать не нужно.

Что встраивается автоматически:

1. Глобальная переменная trackUrl

const trackUrl = '...'; // трекинговая ссылка с клик-параметрами

Это ссылка, по которой пользователь должен перейти после выполнения действия на лендинге. Используется функцией engine_onClickButton().

2. Функция engine_onClickButton()

Основная функция движка — ведёт пользователя дальше по кампании. Поведение зависит от контекста:

3. Автоматическая привязка <a> элементов

Все <a> теги на странице автоматически получают:

• href = значение trackUrl

• обработчик клика, вызывающий engine_onClickButton()

Это означает, что любая ссылка на лендинге автоматически ведёт пользователя по Flow — без каких-либо дополнительных настроек с вашей стороны.

---

Как использовать engine_onClickButton() на своих элементах

Если на лендинге есть кнопки, div-блоки или другие интерактивные элементы (не <a>), которые должны вести пользователя дальше по кампании — повесьте на них engine_onClickButton через addEventListener:

// Повесить на кнопку
document.getElementById('spin-button').addEventListener('click', engine_onClickButton);

// Повесить на произвольный элемент
document.querySelector('.play-btn').addEventListener('click', engine_onClickButton);

// Повесить после DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.cta-button').forEach(el => {
    el.addEventListener('click', engine_onClickButton);
  });
});

Функция engine_onClickButton уже определена платформой — она доступна глобально в window.

Полный пример лендинга

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Spin & Win</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="wheel-container">
    <!-- Кнопка spin — a-элемент, обработчик навешивается автоматически -->
    <a class="spin-btn">SPIN</a>
  </div>

  <!-- Либо: обычная кнопка с ручной привязкой -->
  <button id="play-btn">Play Now</button>

  <script src="wheel.js"></script>

  <!-- Блок кода который вешает на клик по кнопке Play Now переход дальше -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('play-btn').addEventListener('click', engine_onClickButton);
    });
  </script>
</body>
</html>

engine_onClickButton и trackUrl будут доступны, так как платформа автоматически вставляет их в страницу перед вашим контентом.

---

Макрос trackUrl

Если нужно использовать трекинговую ссылку непосредственно в HTML (например, для href на элементе без JS), система также раскрывает переменную trackUrl на странице:

<a href="{{ trackUrl }}">Перейти</a>

Однако предпочтительный способ — использовать engine_onClickButton(), так как он корректно обрабатывает все сценарии (PWA, подписка, обычный редирект).

---

Использование лендинга в кампании

После загрузки лендинг доступен в настройках ротации кампании (раздел /app/campaigns → редактирование кампании → стрим сеты → Ротация). Выберите загруженный лендинг в поле «Landing» внутри нужного стрим сета.

---

Частые вопросы

Нужно ли вручную добавлять трекинговые скрипты в HTML?
Нет. Все скрипты (подписка, engine_onClickButton, trackUrl) встраиваются автоматически платформой.

Почему <a href="#"> уже ведёт по Flow без изменений?
Потому что при загрузке страницы все <a> получают автоматический href = trackUrl и обработчик клика.

Можно ли использовать свой JS-фреймворк (React, Vue, etc.) внутри лендинга?
Да. Главное — подключать engine_onClickButton через addEventListener после инициализации вашего приложения, так как функция определяется платформой асинхронно.

Что произойдёт, если ZIP не содержит index.html?
Лендинг будет создан, но при попытке открыть его пользователь получит ошибку. Убедитесь, что index.html находится в корне архива.

Можно ли обновить лендинг без изменения его ID?
Да. При редактировании записи и загрузке нового ZIP — ID лендинга остаётся прежним, обновляется только контент.