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

SEO Inweb
05-05-2021
76
Как самостоятельно настроить события для онлайн-чата Битрикс24 через Google Tag Manager

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

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

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

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

Преимущества онлайн-чата Битрикс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. События онлайн-чата Битрикс24 из статьи.




















































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

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

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


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

      window.addEventListener('onBitrixLiveChat', function(event)

      {

      var widget = event.detail.widget;

      widget.subscribe({

      type: BX.LiveChatWidget.SubscriptionType.every,

      callback: function(event) {

      if (typeof(dataLayer) == 'undefined')

      {

      dataLayer = [];

      }

      if (event.type == (BX.LiveChatWidget.SubscriptionType.sessionStart || BX.LiveChatWidget.SubscriptionType.userForm || BX.LiveChatWidget.SubscriptionType.userFile || BX.LiveChatWidget.SubscriptionType.userVote)) {

      dataLayer.push({'event' : 'bx24chatonline', 'eventCategory':'bx24chat','eventAction': event.type});}

      }

      });

      });



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






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

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

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





  1. Тег для передачи событий чата Bitrix24 в Google Analytics.Создав переменные уровня данных, переходите к настройке автособытия онлайн-чата в GTM. Событие можно считать автоматическим из-за переменных в качестве параметров настройки тега.Тип тега — «Google Аналитика – Universal Analytics».Тип отслеживания — событие.Параметры отслеживания событий: категория — переменная {{eventCategory}}, действие — переменная {{eventCategory}}, ярлык — переменная {{Page URL}}.Параметр «Не взаимодействие» рекомендуем установить со значением True, чтобы эти события не повлияли на показатель отказов страниц.

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

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




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


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

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

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

Пример настройки целей для чата в Google Analytics

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

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

Выводы:

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


  1. Основа корректной работы отслеживания — внедрение скрипта обработки событий через GTM.

  2. Первый вариант скрипта (шаг 1.1) отслеживает абсолютно все виды обращений. Полезен для понимания взаимодействия пользователя с чатом.

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

Больше не нужно искать и обзванивать диджитал-агентства!
Создайте тендер и получите предложения по цене и срокам от лучших веб-студий Украины.
Это бесплатно и займет 2 минуты. В каталоге 1500+ диджитал-агенств, готовых помочь в реализации ваших задач. Выберите и сэкономьте до 30% времени и бюджета!
Создать тендер
Популярные статьи в разделе SEO
SEO
SEO
28-05-2021
10 мифов о QR-коде Inweb
QR-коды — новый этап информационной революции, об особенностях которого частенько забывают. Вы уз...
SEO
SEO
04-03-2021
Сколько стоит продвижение сайта? Centum-D
В предыдущих статьях мы говорили о раскрутке интернет-магазина и сайта: разбирались с алгоритмом ...
SEO
SEO
15-06-2021
Как сделать digital стратегию сайта SEOMARKET
Современные темпы развития технологий не дают расслабится ни на минуту. Реклама окружает нас везд...
Bug