Отслеживание событий в Google Tag Manager

Вы можете отслеживать действия посетителей сайта в МультиЧате и передавать их в виде событий в системы веб-аналитики и рекламные пиксели с помощью 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. После того, как вы настроите все теги, отправьте изменения на публикацию, кнопка находится в правом верхнем углу.
    620824e2c81d7de3ee869a6a5965cd03f5028633.png
    620824e2c81d7de3ee869a6a5965cd03f5028633.png 182.37 KB
  2. Пропишите комментарий для описания изменений и нажмите кнопку Опубликовать.
    56ab49cf68baaa6d5dd74c78d13bb80f61e48cbd.png
    56ab49cf68baaa6d5dd74c78d13bb80f61e48cbd.png 125.17 KB
Готово! Теперь настроенные события МультиЧата будут передаваться во внешние системы.
Не нашли решение проблемы? Обратитесь в техподдержку, мы поможем
Apteka