Взаимодействие с лидом ДО подписки. Повышаем конверсию через персонализацию!

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

Основной инструмент взаимодействия в данном случае - команда браузера.

Это специальное событие, которое можно отправить на страницу, которую просматривает текущий посетитель. Особенность этого события в том, что вы можете передать в него собранные ранее данные о посетителе. Например из какого источника он пришел, сколько просмотрел страниц перед этим, видел ли предложение, досмотрел ли видео до определенного момента и т.п.

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

К примеру, это означает, что внутри попапа вы можете подставить динамический текст, который будет зависеть от предыдущих действий посетителя.

Для настройки этого действия вам понадобится понимание JavaScript. Если у вас есть задача реализовать подобное действие и у вас не хватает знаний, обратитесь к нам в службу заботы - мы поможем сформировать решение или найти подходящего исполнителя.

Настройка

Для начала, вам нужно убедиться, что на странице установлен счетчик модуля воронок. Если ваша страница размещается на GetCourse, счетчик уже должен быть установлен автоматически. Если нет - поставьте его вручную, скопировав код с главной страницы модуля.

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

<!-- funnel events handler -->
<script>
window.addEventListener("load", () => {
  window.clrtMakeReactive()
  window.addEventListener("claritySocket", funnelEventHandler)
  function funnelEventHandler(event) {
      // начало кода, обрабатывающего событие
      const params = JSON.parse(event.detail.params)
      console.log("🔌 handle command. Params: ", params)
      // конец кода
  }
})
</script>
<!-- funnel events handler -->

Комментариями отмечены границы кода (строки "начало кода" и "конец кода"), в котором нужно описать логику "как реагировать на событие воронки". Здесь используется чистый JavaScript. Если у вас к странице подключены библиотеки - вы можете их использовать. Если у вас нет знаний JavaScript, попробуйте найти в интернете как решается ваша задача или спросите у chatGPT :) Полученный код вставьте в указанных границах.

Обратите внимание на значение params. Это как раз данные события, которые мы будем формировать из воронки. Это строковое значение. Поэтому, чтобы получить из него JS-объект, необходимо использовать JSON.parse.

Теперь осталось самое простое. Добавить в воронке блок "Отправить команду в браузер" и записать в него нужные параметры.

Важное замечание! Между визитом страницы и отправкой команды необходима задержка в несколько секунд, для того чтобы загрузились все необходимые скрипты. Период зависит от того, насколько долго грузится ваша страница. Если страница грузится быстро, то достаточно задержки в 2-3 секунды. При этом если вы реагируете на событие уже загруженной страницы, эта задержка не обязательна.

Теперь приступим к установке значения для команды.

Как и во многих других блоках, для формирования значения, здесь используется JS-выражение.

Давайте представим, что ранее в воронке мы присвоили агенту session несколько переменных. Передадим ранее собранные значения, а также информацию о текущем визите - utm-метку source (в качестве источника визита).

{
  points: session.points,
  sawOffer: session.sawOffer,
  videoViewPercent: session.videoViewedPercent,
  source: event.utm.source
}

Далее этот объект будет преобразован в строку.

Теперь добавим вывод этих данных в консоль браузера. А также покажем окно, в котором подставим источник пользователя в качестве значения.

Для этого, добавим в нужном месте такой код:

const params = JSON.parse(event.detail.params)
console.log("Данные посетителя: ", params)
alert("Вы пришли из " + (params?.source || 'неизвестного источника'))

Сохраняем и включаем воронку, публикуем страницу и идем смотреть результат.

Видим, что в консоли отображаются данные из воронки, но источника нет. Это связано с тем, что переход был по прямой ссылке.

Теперь добавляем к странице источник, например telegram таким образом:

?utm_source=telegram

По аналогии с этим, можно показывать разный контент в зависимости от того, откуда пришел пользовател. Из ВК - один контент, из Телеграма - другой, из третьего объявления яндекса, в котором упоминается "современная профессия" - другой.

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