Отслеживание событий в 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
  • Кликните на «Конфигурацию тега» и в меню справа выберите раздел СпециальныеПользовательский HTML.
  • 556ea15f46f5f7399bd12d5af17010f3eba25107.png
  • Скопируйте код со списком колбэков, указанный выше, и вставьте его в поле «HTML»:
  • 4e6a058204fc8bec4a53bb19808a34415e98b95d.png
  • Кликните на «Триггеры активации» и выберите триггер All Pages (все страницы).
  • a33b8add58ac7aa7b8f96edea10f0a32ce9607ce.png
  • Задайте имя тега, например, «Колбэки Callibri», и нажмите Сохранить.
  • Настройка триггеров и переменных

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

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

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

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

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

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

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

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

    Связанные страницы

    Не нашли решение проблемы? Обратитесь в техподдержку, мы поможем

    Создать обращение
    Callibri