Настройка событий для онлайн-чата Битрикс24 через Google Tag Manager

Использование онлайн-чата — отличный способ увеличить количество обращений клиентов на страницах сайта. Пользователь может просто написать сообщение с любой страницы товара/услуги и узнать все подробности у менеджера. Многим такой способ коммуникации подходит больше, чем звонки. Поэтому если у вас пока нет на сайте такой функции, можете подключить любой чат с онлайн-консультантом и оценить, насколько он будет вам полезен для привлечения лидов или увеличения продаж.

Сервисов онлайн-чатов много. Но какой бы вы ни выбрали, будет полезно отслеживать, как часто им пользуются посетители сайта. В данной статье мы расскажем, как настроить отслеживание обращений в онлайн-чат Битрикс24 без программистов.

Пример виджета с онлайн-чатом Битрикс24

Пример виджета с онлайн-чатом Битрикс24

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

Преимущества онлайн-чата Битрикс24. Взято с сайта bitrix24.ua.

Преимущества онлайн-чата Битрикс24. Взято с сайта bitrix24.ua.

Поэтому следуя данной инструкции, вы сможете самостоятельно настроить отправку событий онлайн-чата Битрикс24 и использовать их в качестве микроконверсий в Google Analytics. Нужен только доступ к установленному на сайте Google Tag Manager для совершения всех настроек и доступ к Google Analytics для установки целей.

За основу был взят скрипт обработки событий из статьи, который я адаптировала под цели для Google Analytics.

Настройка отслеживания событий чата

Для настройки в Google Tag Manager необходимо создать тег со скриптом, тег с автособытием для онлайн-чата, триггер с пользовательским событием для отправки автособытия, переменные категории и действия по событию.

Теперь по порядку создания настроек контейнера GTM.

  1. Тег со скриптом в Google Tag Manager

    Этот тег с кодом JS скрипта необходим, чтобы GTM мог мгновенно реагировать на действия пользователя в чате и генерировать соответствующее пользовательское событие на уровне данных (dataLayer). Есть 2 варианта скрипта: для всех взаимодействий и выборочных.

    1. Обработка всех событий чата

      Этот вариант скрипта для отслеживания абсолютно всех взаимодействий с онлайн-чатом. Создайте в GTM тег типа «Пользовательский GTM» с названием, например, «Скрипт для событий онлайн-чата Bitrix24», и вставьте следующий JavaScript-код:

      Установите для активации данного тега триггер «Просмотр страницы» (All Pages) и сохраните изменения.

      Настройки тега со скриптом для обработки всех событий событий

      Настройки тега со скриптом для обработки всех событий

      Краткое пояснение логики скрипта: когда происходит любое взаимодействие (BX.LiveChatWidget.SubscriptionType.every), тогда скрипт отправляет в dataLayer пользовательское событие ‘bx24chatonline’. Значение категории события будет всегда ‘bx24chat’, а действие события будет разным — в зависимости от типа взаимодействия с чатом.

      Список взаимодействий с чатом Битрикс24, доступных для отслеживания, и действия событий, которые будут переданы в dataLayer. Ниже в таблице я привел названия событий онлайн-чата и их типы. Материалы взяла из статьи.

      Название действия событияТип события
      configLoadedзагрузка информации об «Открытой линии»
      operatorMessageсообщение оператора
      widgetCloseзакрытие виджета
      widgetOpenоткрытие виджета
      sessionStartстарт сессии
      sessionFinishокончание сессии
      sessionOperatorChangeсмена оператора
      userFileотправка файла пользователем
      userFormзаполнение формы пользователем
      userMessageсообщение пользователя
      userVoteголосование пользователем

      При внедрении вышеуказанного скрипта в аналитику будут поступать абсолютно все события, в том числе и загрузка «Открытой линии». Каждое открытие и закрытие виджета будет учтено как новое отдельное событие.

      Если сайт большой и есть риск превышения лимита Google Analytics по хитам, то данный скрипт можно модифицировать, чтобы в аналитику поступали только события по важным взаимодействиям с чатом Битрикс24 (например, начало диалога, отправка формы, оставлена оценка диалогу).

    2. Обработка определенных событий чата

      Предположим, что решено отслеживать только следующие события: старт сессии (написание первого сообщения), отправка файла пользователем, отправка формы контактных данных в чате, оценка качества диалога с менеджером. Тогда необходимо изменить скрипт — добавить конструкцию if для сравнения нужного события с event.type.

      Готовый код скрипта для тега в GTM для выборочных событий:

      Его следует разместить точно так же, как и скрипт на шаге 1.1.

  2. Переменные категории и действия события

    После настройки тега скрипта приступайте к созданию переменных для передачи категории и действия из DataLayer в тег автособытия.

    1. Переменная eventCategory

      Необходимо создать переменную типа «Переменная уровня данных» и указать имя переменной уровня данных eventCategory из скрипта.

      Настройки переменной eventCategory

      Настройки переменной eventCategory

    2. Переменная eventAction

      Точно так же следует создать и сохранить ещё одну переменную dataLayer с именем eventAction.

      Настройки переменной eventAction

      Настройки переменной eventAction

  3. Тег для передачи событий чата Bitrix24 в Google Analytics

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

    Тип тега — «Google Аналитика – Universal Analytics».

    Тип отслеживания — событие.

    Параметры отслеживания событий: категория — переменная {{eventCategory}}, действие — переменная {{eventCategory}}, ярлык — переменная {{Page URL}}.

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

    В «Настройках Google Analytics» указывайте актуальную для вашего контейнера GTM переменную с идентификатором аналитики.

    Настройки тега автособытия чата Битрикс24

    Настройки тега автособытия чата Битрикс24

  4. Триггер для отправки события

    В качестве триггера следует создать пользовательское событие уровня данных bx24chatonline, которое указано как значение параметра ‘event’ в скрипте (шаг 1).

Настройка целей в Google Analytics

После внесения всех настроек обязательно проверяйте корректность срабатывания событий в режиме предварительного просмотра Google Tag Manager. Если в отладчике всё верно и события появляются в аналитике в режиме реального времени, можно публиковать все изменения в контейнере GTM и приступить к установке соответствующих целей в Google Analytics.

Для создания необходимо выбрать тип цели «событие», задать название, например, «Чат Битрикс24 — начат диалог». В качестве категории указать bx24chat (категория будет одинаковой для всех целей), а в качестве действия — название взаимодействия с чатом из таблицы на шаге 1.1, например, sessionStart.

Настройки пользовательского события bx24chatonline

Настройки пользовательского события bx24chatonline

По аналогии настраиваются и другие цели для онлайн-чата, отличия только в названии действия события.

Теперь вы сможете отслеживать в аналитике цели по обращениям пользователей в чат Битрикс24.

Выводы

В статье я поделилась мануалом по настройке событий бесплатного онлайн-чата Битрикс24. Теперь любой специалист может самостоятельно настроить отслеживание в Google Analytics обращений пользователей через виджет чата.

  1. Основа корректной работы отслеживания — внедрение скрипта обработки событий через GTM.
  2. Первый вариант скрипта (шаг 1.1) отслеживает абсолютно все виды обращений. Полезен для понимания взаимодействия пользователя с чатом.
  3. Второй вариант (шаг 1.2) — для выборочных событий, когда важно отслеживать количество обращений и не отправлять в Google Analytics лишнюю информацию.

Если вы нашли ошибку, выделите участок текста и нажмите Ctrl + Enter или , чтобы сообщить нам.


ASK Inweb: Задать вопрос специалисту