Вы можете отслеживать действия посетителей сайта в МультиЧате и передавать их в виде событий в системы веб-аналитики и рекламные пиксели с помощью Google Tag Manager.

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

Для того чтобы отслеживать события МультиЧата через GTM, нужно сначала установить скрипт Callibri в код сайта. Сам скрипт может быть установлен любым способом: как напрямую в код сайта, так и через GTM. После этого можно переходить к настройке отслеживания событий.

Список событий и названия колбэков

Каждое событие в МультиЧате вызывает JavaScript-функцию (колбэк) с заданным названием. В некоторые колбэки передаются аргументы с параметрами события.

Открытие МультиЧата. Название колбэка: callibri_onOpen
Закрытие МультиЧата. Название колбэка: callibri_onClose
Открытие меню МультиЧата в мобильной версии. Название колбэка: callibri_onOpenMobileFirstMenu
Отправка первого сообщения в чат. Название колбэка: callibri_onMessageSent
Отправка заявки из МультиЧата. Название колбэка: callibri_onSendFeedback
Заказ обратного звонка из МультиЧата. Название колбэка: callibri_onSendCallback
События поп-ап окон:
- Открытие поп-ап окна. Название колбэка: callibriCatcherShow
- Заполнение формы поп-ап окна в режиме «телефон». Название колбэка: callibriCatcherSendCallback
- Заполнение формы поп-ап окна в режиме «email». Название колбэка: callibriCatcherSendFeedback
Переход в соцсеть или мессенджер для продолжения переписки:
- Telegram. Название колбэка: callibri_onOpentelegram
- Facebook Messenger. Название колбэка: callibri_onOpenfacebook
- ВКонтакте. Название колбэка: callibri_onOpenvk
- Viber. Название колбэка: callibri_onOpenviber
- Одноклассники. Название колбэка: callibri_onOpenok
- WhatsApp. Название колбэка: callibri_onOpenwhatsapp
- Instagram Direct. Название колбэка: callibri_onOpeninstagram
Переход в соцсеть или мессенджер из таба «Контакты»
- Telegram. Название колбэка: callibri_onOpenPublictelegram
- Facebook. Название колбэка: callibri_onOpenPublicfacebook
- ВКонтакте. Название колбэка: callibri_onOpenPublicvk
- Viber. Название колбэка: callibri_onOpenPublicviber
- Одноклассники. Название колбэка: callibri_onOpenPublicok
- YouTube. Название колбэка: callibri_onOpenPublicyoutube
- Instagram. Название колбэка: callibri_onOpenPublicinstagram
- WhatsApp. Название колбэка: callibri_onOpenPublicwhatsapp
События квизов
- Открытие квиза. Название колбэка: callibri_onQuizOpen
  Аргумент функции: ID квиза.
- Прохождение вопроса квиза. Название колбэка: callibri_onQuizStep
  Аргументы функции: ID квиза, номер пройденного вопроса (0 — стартовый слайд, 1 — первый вопрос, 2 — второй вопрос и т.д.).
- Переход на форму заявки в квизе. Название колбэка: callibri_onQuizFinish
  Аргумент функции: ID квиза.
- Отправка заявки из квиза. Название колбэка: callibri_onQuizOrder
  Аргумент функции: ID квиза.

Добавление колбэков в GTM

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

dataLayer.push({'event': 'event_name'});

Для простоты, в качестве имени события (event_name) будем подставлять название колбэка.

Итоговый код выглядит так:

<script>
function callibri_onOpen() {
   dataLayer.push({'event': 'callibri_onOpen'});
}
function callibri_onClose() {
   dataLayer.push({'event': 'callibri_onClose'});
}
function callibri_onOpenMobileFirstMenu() {
   dataLayer.push({'event': 'callibri_onOpenMobileFirstMenu'});
}
function callibri_onMessageSent() {
   dataLayer.push({'event': 'callibri_onMessageSent'});
}
function callibri_onSendFeedback() {
   dataLayer.push({'event': 'callibri_onSendFeedback'});
}
function callibri_onSendCallback() {
   dataLayer.push({'event': 'callibri_onSendCallback'});
}
function callibriCatcherShow() {
   dataLayer.push({'event': 'callibriCatcherShow'});
}
function callibriCatcherSendCallback() {
   dataLayer.push({'event': 'callibriCatcherSendCallback'});
}
function callibriCatcherSendFeedback() {
   dataLayer.push({'event': 'callibriCatcherSendFeedback'});
}
function callibri_onOpentelegram() {
   dataLayer.push({'event': 'callibri_onOpentelegram'});
}
function callibri_onOpenfacebook() {
   dataLayer.push({'event': 'callibri_onOpenfacebook'});
}
function callibri_onOpenvk() {
   dataLayer.push({'event': 'callibri_onOpenvk'});
}
function callibri_onOpenviber() {
   dataLayer.push({'event': 'callibri_onOpenviber'});
}
function callibri_onOpenok() {
   dataLayer.push({'event': 'callibri_onOpenok'});
}
function callibri_onOpenwhatsapp() {
   dataLayer.push({'event': 'callibri_onOpenwhatsapp'});
}
function callibri_onOpeninstagram() {
   dataLayer.push({'event': 'callibri_onOpeninstagram'});
}
function callibri_onOpenPublictelegram() {
   dataLayer.push({'event': 'callibri_onOpenPublictelegram'});
}
function callibri_onOpenPublicfacebook() {
   dataLayer.push({'event': 'callibri_onOpenPublicfacebook'});
}
function callibri_onOpenPublicvk() {
   dataLayer.push({'event': 'callibri_onOpenPublicvk'});
}
function callibri_onOpenPublicviber() {
   dataLayer.push({'event': 'callibri_onOpenPublicviber'});
}
function callibri_onOpenPublicok() {
   dataLayer.push({'event': 'callibri_onOpenPublicok'});
}
function callibri_onOpenPublicyoutube() {
   dataLayer.push({'event': 'callibri_onOpenPublicyoutube'});
}
function callibri_onOpenPublicinstagram() {
   dataLayer.push({'event': 'callibri_onOpenPublicinstagram'});
}
function callibri_onOpenPublicwhatsapp() {
   dataLayer.push({'event': 'callibri_onOpenPublicwhatsapp'});
}
function callibri_onQuizOpen(q) {
   dataLayer.push({
      'quiz_id': q,
      'event': 'callibri_onQuizOpen'
   });
}
function callibri_onQuizStep(q, s) {
   dataLayer.push({
      'quiz_id': q,
      'quiz_step': s,
      'event': 'callibri_onQuizStep'
   });
}
function callibri_onQuizFinish(q) {
   dataLayer.push({
      'quiz_id': q,
      'event': 'callibri_onQuizFinish'
   });
}
function callibri_onQuizOrder(q) {
   dataLayer.push({
      'quiz_id': q,
      'event': 'callibri_onQuizOrder'
   });
}
</script>

Теперь добавим этот код в GTM с помощью тега Пользовательский HTML.

Инструкция по добавлению тега:

В кабинете GTM выберите «Новый тег»:
43fbc668a5dfd616651d4d4cbf70b1cff86c3a07.png 182.1 KB
Кликните на «Конфигурацию тега» и в меню справа выберите раздел Специальные — Пользовательский HTML.
556ea15f46f5f7399bd12d5af17010f3eba25107.png 173.6 KB
Скопируйте код со списком колбэков, указанный выше, и вставьте его в поле «HTML»:
4e6a058204fc8bec4a53bb19808a34415e98b95d.png 88.42 KB
Кликните на «Триггеры активации» и выберите триггер All Pages (все страницы).
a33b8add58ac7aa7b8f96edea10f0a32ce9607ce.png 120.77 KB
Задайте имя тега, например, «Колбэки Callibri», и нажмите Сохранить.

Настройка триггеров и переменных

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

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

Пример настройки триггера открытия квиза

Перейдите в раздел Триггеры и кликните кнопку Создать:
Дизайн без названия - 2020-05-22T191739.978.png 185.23 KB
Кликните на «Настройка триггера» и в меню справа выберите раздел Другое — Пользовательское событие.
Дизайн без названия - 2020-05-22T192716.656.png 168.55 KB
Скопируйте название нужного события из списка колбэков выше, и вставьте его в поле «Имя события». В данном примере мы хотим отслеживать событие открытия квиза, поэтому вставляем значение callibri_onQuizOpen.
Дизайн без названия - 2020-05-22T193548.408.png 168.2 KB
Задайте имя триггера, например, «Открытие квиза Callibri», и нажмите Сохранить.

Пример настройки переменных

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

Перейдите в раздел Переменные и кликните кнопку Создать:
Дизайн без названия - 2020-05-22T194301.080.png 230.91 KB
Кликните на «Конфигурация переменной» и в меню справа выберите раздел Переменные страницы — Переменная уровня данных.
Дизайн без названия - 2020-05-22T195406.976.png 243.62 KB
Вставьте значение quiz_id в поле «Имя переменной уровня данных».
Дизайн без названия - 2020-05-22T195923.287.png 133.34 KB

Если вы будете создавать переменную с номером пройденного вопроса квиза, то вместо quiz_id подставьте quiz_step.
Задайте имя переменной, например, «ID квиза Callibri», и нажмите Сохранить.

Настройка тегов событий

Теперь, когда у нас есть триггер и переменная, мы можем настроить тег отправки события в любую внешнюю систему. Для примера настроим отправку события в Google Analytics.

На главном экране GTM выберите «Новый тег»:
43fbc668a5dfd616651d4d4cbf70b1cff86c3a07.png 182.1 KB
Кликните на «Конфигурацию тега» и в меню справа выберите раздел Google Аналитика — Universal Analytics.
Дизайн без названия - 2020-05-22T201807.523.png 297.96 KB
В поле «Тип отслеживания» выберите Событие. Заполните поля: укажите категорию quiz и действие open.
Дизайн без названия - 2020-05-22T202524.290.png 167.5 KB
Далее нажмите на кнопку справа от поля «Ярлык» и выберите ранее созданную переменную «ID квиза Callibri»
Дизайн без названия - 2020-05-22T203122.446.png 171.9 KB
Кликните на «Триггеры» и выберите триггер ранее созданный триггер Открытие квиза Callibri.
Дизайн без названия - 2020-05-22T203739.601.png 124.55 KB
Задайте имя тега и нажмите Сохранить.
По аналогии настройте теги для других событий и для других внешних систем.

Публикация изменений

После того, как вы настроите все теги, отправьте изменения на публикацию, кнопка находится в правом верхнем углу.
620824e2c81d7de3ee869a6a5965cd03f5028633.png 182.37 KB
Пропишите комментарий для описания изменений и нажмите кнопку Опубликовать.
56ab49cf68baaa6d5dd74c78d13bb80f61e48cbd.png 125.17 KB

Готово! Теперь настроенные события МультиЧата будут передаваться во внешние системы.

Установка скрипта Callibri