Настройка событий для онлайн-чата Битрикс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.1. Обработка всех событий чата

Этот вариант скрипта для отслеживания абсолютно всех взаимодействий с онлайн-чатом. Создайте в GTM тег типа «Пользовательский HTML» с названием, например, «Скрипт для событий онлайн-чата 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 (например, начало диалога, отправка формы, оставлена оценка диалогу).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

Влад Наумов, 29.05.2020

Был рад помочь, спасибо за отзыв, очень приятно, что старания не были напрасны)

Murat Kudainetov, 29.05.2020

Ну я вот даже не поленюсь и отпишу. Огромное Вам спасибо, все заработало. Столько мучался с костылями и работой в консоли, а тут оказалось так просто. Такой подробный развернутый ответ, что я бы на вашем месте оформил это в полноценную статью, т.к. много кто гонит все через gtm. Лично я ничего для решения этой задачи в интернете не нашел (или я не туда смотрел, или и правда в документации от 1С ничего толком про это не написано).
Еще раз благодарю. Выручили.

Влад Наумов, 28.05.2020

Все действия с crm-формами Битрикс24 автоматически отправляются в уровень данных. Разберем на примере формы обратной связи с виджета.

События приходят при просмотре формы, начале заполнения формы, вводе конкретных данных, и непосредственно при отправке формы:

https://uploads.disquscdn.c...

https://uploads.disquscdn.c...

Для того чтобы настроить отслеживание отправки формы в GTM необходимо создать пользовательские переменные eventCategory и eventAction типа “Переменная уровня данных”:

https://uploads.disquscdn.c...

https://uploads.disquscdn.c...

Далее создаем триггер активации события, в условиях активации указав созданные переменные содержащие соответствующие параметры с уровня данных:

https://uploads.disquscdn.c...

После этого создаем тег события с созданным триггером.


Аналогично можно отследить отправку других форм Битрикс, указав название формы в eventCategory.
Примечание! Параметры событий смотрите в уровне данных через отладчик GTM, так как к примеру название может отличаться от title формы.

Murat Kudainetov, 28.05.2020

Здравствуйте.
А есть ли возможность в gtm отдавать события для формы битрикс24 виджета обратного звонка и формы заявки? А не только чата.

Влад Наумов, 21.05.2020

Чтобы отслеживать клики на соцсети с виджета от Битрикс24 необходимо самостоятельно настроить теги в GTM. Например, для отслеживания перехода в Messenger (клик по иконке Facebook) создайте тег с типом отслеживания - “Событие”, а в качестве триггера активации - “Клик — Только ссылки” с условием активации: Click Classes содержит icon-service-fb.
https://uploads.disquscdn.c... https://uploads.disquscdn.c...

Аналогично можно настроить теги отслеживания переходов в Telegram и Viber, указав соответственно условие активации триггеров: Click Classes содержит icon-service-telegram или icon-service-viber

Андрей Свистунов, 15.05.2020

Подскажите, а если пользователь кликает на fb или вайбер вот здесь http://prntscr.com/sh97fu то событие в аналиткс не передается?

Влад Наумов, 31.03.2020

В данном случае можно попробовать настроить активацию тега об успешной отправке формы после срабатывания тега, к примеру, при нажатии на открытие формы или на одно из полей ввода.

Pavlo, 29.03.2020

Здравствуйте. Попробовал Вашим варантом. При переходе в режим preview, GTM говорит об ошибке в 9 строке кода (там, как я понял, лишняя дужка). После ее удаления режим preview пропускает тег. Тег работает но не передает данные при срабатывании формы
Нашел другие скрипты для отслеживания ajax, но у всех одна проблема: они срабатывают только при загрузке страницы а уже при запуске virtual pageview (где собственно и происходит заполенение формы) -- уже нет. И тогда заполенную форму тег не ловит.
Подскажите, пожалуйста, встречались ли Вы с таким и что в таких случаях рекомендуете делат

Влад Наумов, 20.03.2020

CRM-формы это достаточно гибко настраиваемый инструмент, как и на Битрикс так и на других cms-системах. Некоторые взаимодействия с формами автоматически передают события в уровень данных. События и параметры которые передаются можно посмотреть в меню CRM-формы в группе Дополнительно > Показать цели и события, и настроить на них цели непосредственно в Google Analytics. В случае если нет автоматической отправки событий с формы, их можно настроить с помощью пользовательского HTML в Google Tag Manager.

Все AJAX’овые формы можно отслеживать с помощью GTM следующим образом: форма имеет JS код, который создает пользовательское событие, в уровне данных которого в переменной response отражается именно успешная отправка формы.

Необходимо создать HTML тег c триггером активации – Просмотр страницы, в теле которого указать этот скрипт:

Ask Inweb
Есть вопрос?
Спросите у специалиста!