Перейти к основному содержимому

Кнопка на лендинге ведёт на оффер

Классическая схема: посетитель приходит с рекламы на ваш лендинг, читает страницу и по кнопке уходит на оффер. В Qubix это цель кампании «Лендинг с оффером»: Qubix отдаёт ваш index.html ровно таким, каким вы его загрузили, — ничего в нём не меняет и ничего в него не вставляет. Переход на оффер делает библиотека Browser SDK, которую вы подключаете сами.

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

Что нужно заранее

  • Лендинг загружен в Qubix — раздел Сайты, тип «лендинг». Как загрузить — Загрузка сайта.
  • Кампания с целью «Лендинг с оффером»: в кампании выбран ваш сайт и оффер (или несколько офферов со сплитом по весам).
  • Домен подключён и активенДомены.

ИИ-режим

Оба шага — подключить SDK и повесить оффер на кнопку — делаются одной просьбой к ИИ-ассистенту. Откройте карточку вашего сайта: окно Сайты → ваш лендинг → вкладка Файлы, файл index.html. Позовите ассистента прямо в этом окне и опишите задачу словами:

  • «Подключи SDK и повесь на кнопку „Играть" переход на оффер с переносом меток»;
  • «Сделай, чтобы все кнопки класса .btn вели на оффер»;
  • «Почему кнопка не получает оффер? Вот мой код: …».

Ассистент напишет готовый блок под вашу страницу — останется вставить и сохранить.

Ручной режим

Те же два шага своим кодом — чтобы понимать, что именно вставлено, или сделать по-своему.

Шаг 1. Подключите SDK

В index.html лендинга добавьте одну строку — скрипт отдаётся с того же домена, на котором работает кампания:

index.htmlHTML
<script src="/sdk.js" defer></script>

Ни настроек, ни ключей не нужно: контекст — какой оффер выбран, какие метки пришли с кликом — сервер уже положил в куку, SDK читает её сам.

Шаг 2. Повесьте оффер на кнопку

Проставить ссылку сразу после загрузки страницы:

index.htmlHTML
<a id="cta" class="btn" href="#">Играть</a>

<script>
window.addEventListener('DOMContentLoaded', function () {
var offer = sdk.getOffer()
if (offer) {
document.getElementById('cta').href = sdk.buildOfferUrl(offer.url)
}
})
</script>

Или в момент клика — если кнопок несколько или адрес нужен только по действию:

HTML
<button id="cta" class="btn">Забрать бонус</button>

<script>
document.getElementById('cta').addEventListener('click', function () {
var offer = sdk.getOffer()
if (offer) {
location.href = sdk.buildOfferUrl(offer.url)
}
})
</script>

Что здесь делает каждый вызов:

  • sdk.getOffer() — возвращает выбранный для этого посетителя оффер: { id, url }. Если страница открыта не через кампанию (например, вы смотрите её напрямую), вернёт null — поэтому проверка if (offer) обязательна.
  • sdk.buildOfferUrl(offer.url) — собирает готовую ссылку: подставляет в адрес оффера макросы ({click_id}, {sub1}…, {all_source_params}) значениями, которые пришли с кликом. Идентификатор клика переносится сам — партнёрка получит его в том написании, которое ждёт.

Сплит и закрепление — уже работают

Если в кампании несколько офферов с весами, сервер выбирает один из них до отдачи страницы и запоминает выбор за посетителем. Повторный заход того же человека получит тот же оффер. В коде лендинга для этого не нужно ничего: sdk.getOffer() всегда возвращает уже принятый выбор, а не бросает жребий заново.

Статистика — тоже сама

Визит по кампании учитывается сам — ставить «пиксель визита» или звать что-то при загрузке не нужно. Свои шаги воронки — прокрутил до формы, открыл окно, нажал кнопку — размечайте вручную:

JavaScript
sdk.sendEvent('cta_click', { place: 'hero' })

Куда попадают события и как смотреть по ним статистику — Статистика вашего лендинга.

Не путайте с прелендингом

У цели «Прелендинг и витрина PWA» кнопка ведёт не на оффер, а на витрину приложения — там вместо sdk.buildOfferUrl зовут sdk.showStore(). Если вам нужен переход на оффер — цель кампании должна быть «Лендинг с оффером». Сценарий прелендинга разобран в SDK на вашем прелендинге.

Цель кампанииКуда ведёт кнопкаВызов
Лендинг с офферомна оффер, с меткамиsdk.buildOfferUrl(sdk.getOffer().url)
Прелендинг и витрина PWAна витрину приложенияsdk.showStore()

Проверить

  1. Соберите ссылку кампании (блок «Пример рекламной ссылки» в карточке домена) и откройте её в браузере в приватном окне.
  2. Кнопка должна получить адрес оффера с подставленными метками — видно в статусной строке браузера при наведении или в инструментах разработчика.
  3. Визит появится в разделе событий; свои события (sdk.sendEvent) — там же, с небольшой задержкой.

Что дальше