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

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

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

Основной инструмент взаимодействия в данном случае — нода «Отправить команду в браузер».

С ее помощью вы можете запустить различные действия на странице, которую просматривает пользователь, например:

• показать поп-ап (всплывающее окно),
• открыть еще одну страницу,
• отправить цель в рекламный кабинет и т. д.

Особенность ноды заключается в том, что вместе с командой вы можете передать собранные ранее данные о посетителе, например:

• из какого источника он пришел,
• сколько просмотрел страниц перед этим,
• видел ли предложение,
• досмотрел ли видео до определенного момента и т. д.

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

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

Для начала установите счетчик модуля «Воронки» на страницу, если ваш сайт находится на стороннем сервисе. Для этого:

1. Перейдите на главную страницу модуля.
2. Нажмите на «Код счетчика».
3. Нажмите «Скопировать в буфер обмена».
4. Установите скопированный код на страницу стороннего сайта.

Для страницы, расположенной на GetCourse, дополнительно устанавливать счетчик не нужно.

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

<!-- funnel events handler -->
 <script>
  let funnelParams = null;

  window.addEventListener("load", () => {
    window.clrtMakeReactive();
    window.addEventListener("claritySocket", funnelEventHandler);
    function funnelEventHandler(event) {
      funnelParams = JSON.parse(event.detail.params);
      console.log("🔌 handle command. Params: ", funnelParams);
    }
  });
</script>
<!-- funnel events handler -->

В данном коде:

• опишите логику, как страница должна реагировать на событие воронки, в части кода между строкам «начало кода» и «конец кода» (используйте JavaScript);
• если к странице подключены библиотеки, вы также можете использовать их.

Код можно добавить в HEAD страницы. Если страница расположена на GetCourse:

1. Перейдите в раздел «Сайт» — «Страницы» .
2. Выберите нужную страницу.

3. Перейдите в дополнительные настройки.
4. Вставьте скопированный код в поле «Теги в разделе HEAD».

Следующим шагом добавьте в воронку ноду «Отправить команду в браузер».

Чтобы установить задержку:

1. Нажмите дважды на переход (стрелку).
2. Отметьте чекбокс «Задержка» и укажите продолжительность.
3. Сохраните изменения.

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

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

{
 points: session.points,
 source: event.utm.source
}

Далее можно вывести эти данные в консоль браузера и отдельное окно, которое увидит посетитель страницы. Для этого добавьте код в нужном месте страницы в блоке «Javascript-код».

window.addEventListener("load", function () {
 setTimeout(function () {
 if (funnelParams) {
 console.log(funnelParams);
 alert("Количество баллов за посещение страницы: " + (funnelParams?.points || "неизвестно") + "\nВы пришли из " + (funnelParams?.source || "неизвестного источника"));
 } else {
 alert("Нет данных о параметрах пользователя");
 }
 }, 4000);
 }); 

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

По аналогии с описанным примером можно показывать разный контент в зависимости от того, откуда пришел пользователь: из VK один контент, из Тelegram — другой и т. д. Источник пользователя в данном случае можно будет отследить в переменной event.utm.source, а в воронке перед отправкой команды в браузер выполнить проверку переменных, как показано ниже.

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

Основной инструмент для работы с настраиваемыми событиями — нода «Событие».

Активировать такое событие можно разными способами, например, с помощью обработчика формы на странице, отправкой запроса внешним сервисом, вызовом JavaScript на странице и т. д.

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

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

Используйте этот вариант, если хотите протестировать, как будет вести себя воронка после срабатывания события:

1. Для начала сохраните сценарий, чтобы тест сработал.

2. В ноде «Событие» перейдите на вкладку «Отладка».
3. Выберите тип объекта, для которого нужно создать событие.
4. Выберите внешний идентификатор нужного объекта (по умолчанию указан ваш ID пользователя).
5. Нажмите «Создать».

6. Подтвердите действие.

Для объекта будет создано событие и запустится действие, идущее далее по воронке.

Вы можете настроить вызов события со страницы сайта:

• при отправке формы — когда пользователь заполняет и отправляет форму;
• при нажатии на кнопку — когда пользователь нажимает на кнопку, без заполнения формы своими данными;
• практически для любого другого действия пользователя на странице, например, если пользователь долистал до середины/конца страницы и др.

Если ваш сайт расположен на GetCourse:

1. Добавьте в форму на странице обработчик «Запустить событие в воронках».
2. Пропишите в нем идентификатор события из настроек ноды.

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

Если ваш сайт расположен на стороннем сервисе:

1. Разместите на странице счетчик модуля «Воронки», как рассказано в инструкции [ранее ▲].
2. Создайте виджет GetCourse, добавьте в него обработчик «Запустить событие в воронках» и настройте, как рассказано выше.
3. Добавьте виджет на вашу страницу.

Если ваш сайт расположен на стороннем сервисе и вы хотите использовать форму сторонней CMS:

1. Разместите на странице счетчик модуля «Воронки», как рассказано в инструкции [ранее ▲].
2. В форме настройте вызов javascript и в параметрах укажите код для вызова события из воронки.

rfnl("<ваш_код_события_из_настроек_блока_в_воронке>")

Если ваш сайт расположен на GetCourse:

1. В настройках кнопки выберите «Действие при клике» — «Действие расширений».
2. Выберите вариант «Отправить событие ReFunnels».
3. Пропишите в поле «Код события» идентификатор события из настроек ноды.

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

Если ваш сайт расположен на стороннем сервисе, используйте для кнопки инструкцию из раздела [ниже ▼].

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

1. Если ваша страница находится не на GetCourse, то сначала установите на нее счетчик. Код счетчика выглядит следующим образом.

<!-- refunnels counter start-->
<script src="https://<домен вашей школы>/chtm/s/metric/clarity.js"></script>
<!-- refunnels counter end-->

2. Далее добавьте на страницу JS-скрипт, который будет «ловить» нужное действие пользователя. Например, чтобы отследить пролистывание страницы до середины, конца или определенного блока, используйте скрипт ниже.

// Добавляем обработчики событий на скролл
window.addEventListener('scroll', () => checkScrollToMiddle('eventCode'));
window.addEventListener('scroll', () => checkScrollToEnd('eventCode'));
window.addEventListener('scroll', () => checkScrollToElement('ltBlock2124054661', 'eventCode'));
// Фиксация события при достижении определенного места
function onScrollToMiddle(eventCode) {
 rfnl(eventCode);
}
function onScrollToEnd(eventCode) {
 rfnl(eventCode);
}
function onScrollToElement(elId, eventCode) {
 rfnl(eventCode);
}
let middleReached = false;
let endReached = false;
let elementReached = false;
// Функция для проверки скролла до середины страницы
function checkScrollToMiddle(eventCode) {
 if (middleReached) return;
 const middle = document.body.scrollHeight / 2;
 if (window.scrollY + window.innerHeight >= middle) {
 middleReached = true;
 // Фиксация события для воронки
 onScrollToMiddle(eventCode);
 }
}
// Функция для проверки скролла до конца страницы
function checkScrollToEnd(eventCode) {
 if (endReached) return;
 const end = document.body.scrollHeight;
 if (window.scrollY + window.innerHeight >= end) {
 endReached = true;
 // Фиксация события для воронки
 onScrollToEnd(eventCode);
 }
}
// Функция для проверки скролла до интересующего блока
function checkScrollToElement(elementId, eventCode) {
 if (elementReached) return;
 const element = document.getElementById(elementId);
 if (element) {
 const elementPosition = element.getBoundingClientRect().top + window.scrollY;
 if (window.scrollY + window.innerHeight >= elementPosition) {
 elementReached = true;
 // Фиксация события для воронки
 onScrollToElement(elementId, eventCode);
 }
 } else {
 console.error(`Element with id ${elementId} not found`);
 }
}

3. В воронке добавьте ноду «Событие» — можно создать несколько нод под каждый тип события (скролл до середины, конца или определенного блока).
4. Скопируйте из ноды идентификатор события.

5. Вставьте идентификаторы событий в соответствующие места в коде, т. е. замените все места с текстом «eventCode» на идентификатор соответствующего события.
   

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

7. Вставьте код блока в соответствующих местах в JS-коде.
   

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

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

• можно запустить воронку для конкретного объекта (агентов пользователя/заказа/чата/сессии), если он уже существует в аккаунте GetCourse и внешняя система «знает» его идентификатор;
• объекта еще нет, и вы хотите запускать действия в воронке, используя входящие данные, и, возможно, зарегистрировать пользователя в аккаунте GetCourse.

Чтобы событие могло активироваться внешними системами или процессами на GetCourse, нужно разрешить ему это:

1. Зайдите в настройки ноды «Событие».
2. Перейдите на вкладку «Внешний вызов».
3. Установите чекбокс «Разрешить вызов внешней системой» и нажмите «Применить».

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

Ниже описано несколько вариантов использования данного функционала:

1. Запуск воронки для существующего в аккаунте объекта.
2. Запуск воронки в ответ на любое событие внешней системы.
3. Просмотр «сырых» данных входящего запроса.

Вы можете запустить воронку для объекта, который уже существует в вашем аккаунте:

• по команде от внешней системы,
• а также из процесса на GetCourse.

Например, таким образом вы можете запускать воронку не по пользователям, а по созданным в аккаунте заказам.

Для этого:

1. При вызове из внешней системы или из процесса: скопируйте из ноды «Событие» ссылку для внешнего вызова.

2. При вызове из внешней системы: вставьте эту ссылку там, где нужно вызвать событие воронки.
   При вызове из процесса:
   • добавьте операцию «Вызвать url»,

• вставьте скопированную ссылку в поле «Url (ссылка)».

3. При вызове из процесса: добавьте к ссылке нужные параметры и сохраните.
   При вызове из внешней системы: внешняя система должна передать по указанной ссылке 1 или несколько идентификаторов (по 1 для каждого типа объекта), чтобы воронка «понимала», о каком или каких объектах идет речь. Для этого
   • добавьте в тело запроса нужные параметры — список возможных параметров представлен ниже;

userId?: string
 dealId?: string
 sessionId?: string
 uid?: string // id сессии из объекта window.clrtUid
 chatId?: string
 botId?: string
 email?: string
 createUser?: boolean
 createUserParams?: {
 firstName?: string
 lastName?: string
 }
 customData?: Record<string, string>
 utm_source?: string
 utm_medium?: string
 utm_campaign?: string
 utm_content?: string
 utm_term?: string

• установите формат ответа внешней системы.

<p>{
 success: boolean
 message: string
}</p>

Несколько особенностей передачи параметров:

1. Если в информации от внешнего сервиса не будет одного из обязательных параметров, сформируется случайный идентификатор сессии и событие зафиксируется для агента «сессия».
2. Если будет передан идентификатор объекта, которого нет в аккаунте GetCourse, в стороннем сервисе будет возвращена ошибка.

3. Если вы передаете email, которого нет в аккаунте GetCourse и хотите зарегистрировать нового пользователя, необходимо передать параметр createUser: true. При создании нового пользователя также можно передать имя firstName и фамилию lastName.

4. Если вы хотите передать нестандартные параметры объекта, используйте значение customData. Чтобы использовать полученные таким образом параметры, используйте для их извлечения в воронках переменную события event.params.
   

5. Если вы хотите передать из стороннего сервиса информацию, касающуюся чата с пользователем, например, если вы ведете переписку с пользователем в Telegram не только через GetCourse, то вы можете работать с агентом chat в воронке через параметр chatId. Передать chatId можно двумя способами:
   • Внутренний Id чата, который содержится в воронке в переменной объекта chat.id. Его можно проверить, выбрав чат из списка на странице /chtm/app/sender.

• Id чата в соответствующем боте — в данном случае нужно будет также передать botId, чтобы не перепутались идентификаторы из разных соцсетей. Чтобы получить id бота, перейдите в настройки этого бота в /chtm/app/sender и скопируйте идентификатор из адресной строки.

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

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

{
 gcUserId: 111222,
 ticket: {
 id: 111444,
 title: 'Билет #376'
 }
}

Чтобы использовать эти данные в воронке:

1. Включите в ноде «Событие» на вкладке «Внешний вызов» опцию «Вычислить ID объектов из параметров запроса».

2. Выберите тип агента и пропишите путь, по которому передается идентификатор объекта в параметрах входящего события. В нашем примере: body.gcUserId для агента «Пользователь».

3. Далее вы можете использовать настройку «Преобразовать объекты из параметров запроса», чтобы задать значения переменных и использовать их далее в воронке.

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

user.ticketId = body.ticket.id
user.ticket = body.ticket.title

После чего вы сможете использовать в воронке переменные user.ticket и user.ticketId.

Внешняя система передает параметры, которые сохраняются в объект body. Далее можно работать с переданными параметрами, например, как было описано [в разделе выше], используя путь с body.

Чтобы протестировать входящий запрос из внешней системы и узнать, какой объект она отправляет в body:

1. Установите чекбокс «Логировать все входящие данные».

2. После этого отправьте тестовый запрос из внешней системы.
3. Данные входящего запроса можно увидеть в отладке.

Вы можете настроить несколько веток с разным поведением в одной воронке, которые будут срабатывать в зависимости от времени активации ноды «Событие».

Например, у вас есть отдел, который работает с 9 до 18 и с которым пользователь может связаться через Telegram-бот. Вы можете настроить все таким образом, что:

• в рабочее время будет отправляться уведомление сотрудникам сразу при запуске бота пользователем;
• в нерабочее время пользователь будет получать сообщение о том, что с ним свяжутся утром, уведомление сотрудникам также уйдет утром следующего дня.

Для того чтобы настроить время срабатывания:

1. Перейдите на вкладку «Запуск».
2. Дважды нажмите на стрелку-переход от события к действию.
3. Нажмите «Установить условие(я)».

4. Настройте время, в которое будет срабатывать переход. В нашем примере настроено два перехода: один в рабочее время (с 9:00 до 18:00 Мск), второй в нерабочее (с 18:01 до 8:59 Мск).

Вы также можете настроить проверку не только по времени, но и по дате запуска события. Для этого потребуется Javascript-код и переменные:

1. Перейдите в настройки реактивности ноды «Событие» перед переходами и запишите в переменную дату и время срабатывания события. Сделать это можно с помощью кода ниже, где chat — агент, а dateStamp — название переменной (задается вами).

chat.dateStamp = new Date().getTime();

2. Далее настройте переходы для разных дат. Для этого в настройках стрелок можно с помощью выражений сравнивать дату, записанную в переменную при срабатывании события, с нужной вам датой. В нашем примере для одного перехода будет использоваться дата до 1 сентября 2025 года 9:00 Мск, а для второго — с 1 сентября 2025 года 9:00 Мск включительно.

chat.dateStamp < new Date("2025-09-01T09:00:00+03:00")

chat.dateStamp >= new Date("2025-09-01T09:00:00+03:00")

При таких настройках при запуске события до 1 сентября воронка пойдет по одной ветке, а если событие будет запущено в 9 утра 1 сентября или позднее, то воронка пойдет по второй ветке.

Подробнее про работу с выражениями вы можете прочитать в статье «Работа с выражениями в модуле Воронки».

Воронка позволяет сделать api-вызов внешней системы, если такая система поддерживает REST API, т. е. если к ней можно совершить HTTP-запрос для выполнения какого-либо действия.

Чтобы отправить такой запрос, вы можете использовать ноды:

• Вызвать URL,
• Пользовательский код.

Ниже рассмотрим вариант api-вызова с помощью ноды «Вызвать URL». Для этого вам нужно:

1. Сформировать ссылку, по которой воронка будет передавать запрос.
2. Выбрать метод вызова.
3. Указать тип ответа от внешней системы.
4. Сохранить результат в локальную переменную (дополнительно).
5. Преобразовать агенты (дополнительно).

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

Например, если по воронке идет агент пользователь, в ссылку можно подставить его ID.

https://my-service-url.com/api/any-method?userId={user.id}

В такой ссылке вместо {user.id} будет подставлен идентификатор пользователя. Это особенно полезно, когда система требует GET-вызова и нет возможности сформировать тело запроса.

Получившуюся ссылку вставьте в ноду «Вызвать URL» и нажмите «Применить».

На данный момент поддерживается 2 типа вызова:

1. GET — достаточно сформировать ссылку, как было описано выше.
2. POST — нужно сформировать тело и заголовки запроса. Для этого в выражении необходимо вернуть JS-объект. В поле ввода вы можете написать любое JS-выражение. Главное, чтобы на выходе был возвращен объект, который будет использован при вызове ссылки. Ниже пример сложного (в body) и простого (в head) формирования объекта.

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

{
 userId: user.id,
 dealId: deal.id,
 tgUsername: chat.username,
 points: user.points - user.penaltyPoints
}

При этом оба поля — «Объект тела запроса (JS)» и «Объект заголовков (JS)» — являются необязательными для заполнения.

В зависимости от того, как отвечает внешний сервис, можно выбрать тип ответа — json или text.

Ответ сервера вы можете сохранить в локальную переменную. Для этого:

1. Установите чекбокс «Сохранить ответ в».
2. Выберите тип агента.
3. Укажите название переменной.

Ответ сервера полностью будет записан в указанную переменную.

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

Данные события доступны в объекте response.

{
 body: any
 headers: Record<string, string>
 statusCode: number
}

В примере ниже в пользовательскую переменную respValue записывается значение, полученное в response.body.value.

В модуле воронок есть возможность выполнить серверный код на любом этапе воронки, используя данные события и объектов воронок. Для этого:

1. Добавьте ноду «Пользовательский код».

2. Войдите в ее настройки, нажмите «Создать файл» и укажите путь для нового файла. В аккаунте будет создан файл.

3. Перейдите к файлу по кнопке «Перейти к коду».

4. Напишите любой javascript/typescript код для обработки события.

Входящий объект params имеет следующий тип.

interface HookParams {
 agentsByType: Record // все агенты определенные в событии
 eventData?: GenericEventData // данные события, разные в зависимости от исходного события
 transition: {
 id: string
 title: string
 from: string
 to: string
 scene: string
 options: Record
 isRed?: boolean
 } // информация о переходе (стрелке)
 primaryAgent?: AgentInfo // агент, являющийся "главным" в текущем контексте. Может быть определен в настройках перехода
 templateData: Config // данные шаблона, если есть
}
type AgentType = 'user' | 'deal' | 'chat' | 'session'
interface AgentInfo {
 id: string // внутренний идентификатор агента. Не путать с идентификатором объекта, на который ссылается агент
 type: string
 externalId: string // внешний идентификатор объекта, на который ссылается агент. Например deal_id
 isTerminated: boolean
 props: Record
 mainAgentId: string
 parentAgentIds: string[]
 displayName: string
}

На выходе нужно вернуть объект следующего типа.

type Result = {
 success: boolean
 stopActionsChain?: boolean // позволяет остановить выполнение дальнейших действий
 data?: Record<string, any> // данные, которые будут записаны в свойства агента, если в блоке стоит такая настройка
 nextEventRegistered?: boolean // Продвинутая настройка. Если true, следующее событие не будет зафиксировано автоматически. Его нужно записать самостоятельно.
}

Значение data будет записано в переменную, указанную в настройках ноды.