При использовании виджета чата Битрикс24 требуется отслеживать его использование в системе аналитики Google Analytics, что будет разобрано в инструкции ниже.
Подготовка счетчика Google Analytics к отслеживанию обращений в чат Битрикс24
Для того, чтобы отслеживать чат Битрикс24 на сайте и передавать в качестве цели или события. Ниже представлен пример установленного виджета.
![Пример виджета чата Битрикс24 на сайте](https://seopulses.ru/wp-content/uploads/2020/05/11-5-1024x700.png)
После этого потребуется добавить следующий скрипт через Google Tag Manager.
<script type=»text/javascript»>
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 = [];
}
dataLayer.push({‘event’ : ‘bx24chatonline’, ‘eventCategory’:’bx24chat’,’eventAction’: event.type});
}
});
});
</script>
Важно! Данный код передает события с категорией bx24chatonline, а в качестве действия передает действия, описанные ниже.
configLoaded | загрузка информации об Открытой линии |
operatorMessage | сообщение оператора |
widgetClose | закрытие виджета |
widgetOpen | открытие виджета |
sessionStart | Начало разговора |
sessionFinish | Окончание разговора |
sessionOperatorChange | смена оператора |
userFile | отправка файла пользователем |
userForm | заполнение формы контактов |
userMessage | сообщение пользователя |
userVote | голосование пользователем |
Важно! Чтобы передавать лишь часть событий можно будет воспользоваться кодом, описанным в конце статьи (вторая версия).
Для этого создается новый тег в интерфейсе GTM.
![Создание нового тега для фиксации целей с виджета чата Bitrix24 в Google Менеджер Тегов](https://seopulses.ru/wp-content/uploads/2020/05/2-18-1024x481.png)
Даем ему понятное название и переходим к выбору конфигурации.
![Выбор типа тега для фиксации целей для Google Analytics из чата Битрикс24 в Google Tag Manager](https://seopulses.ru/wp-content/uploads/2020/05/3-18-1024x596.png)
Кликаем на «Пользовательский HTML».
![Выбор типа тега для обработки событий с Битрикс24 в GTM](https://seopulses.ru/wp-content/uploads/2020/05/4-16-1024x677.png)
Копируем представленный выше код и переходим к выбору триггера.
![Ввод кода для отслеживания целей Google Analytics через dataLayer из чата Битрикс 24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/5-15-1024x826.png)
Выбираем All Pages.
![Выбор триггера All Pages из GTM для размещения кода для отслеживания конверсий Битрикс24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/19-1-1024x123.png)
Сохраняем созданный тег.
![Сохранение тегас кодом для отслеживания целей Google Analytics через dataLayer из чата Bitrix 24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/6-15-1024x679.png)
Публикуем новую версию.
![Публикация новой версии с кодом для отслеживания целей Google Analytics через dataLayer из чата Bitrix 24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/7-15-1024x468.png)
Готово, теперь система сможет передавать события в DataLayer.
Передача событий и конверсий в Google Analytics при взаимодействии с чатом Bitrix24
Переходим в интерфейс GTM во вкладку «Переменные» и в «Пользовательских» нажимаем на «Создать».
![Создание новой переменной в Google Менеджер Тегов](https://seopulses.ru/wp-content/uploads/2020/05/8-11-1024x827.png)
Даем название eventAction и выбираем конфигурацию переменной.
![Выбор типа переменной eventAction и eventCategory в Google Tag Manager для передачи целей из чата Битрикс24](https://seopulses.ru/wp-content/uploads/2020/05/9-7-1024x317.png)
В выпавшем списке выбираем «Переменная уровня данных».
![Выбор переменной уровня данных в Google Tag Manager](https://seopulses.ru/wp-content/uploads/2020/05/10-6-1024x660.png)
В имя переменной вводим «eventAction» и сохраняем ее.
![Сохранение переменной eventCategory в GTM для отслеживания виджета чата Битрикс24](https://seopulses.ru/wp-content/uploads/2020/05/11-4-1024x471.png)
Аналогичным методом создаем еще одну переменную «eventCategory».
![Создание переменной уровня данных eventCategory в Google Менеджер тегов для отслеживания виджета чата Битрикс24](https://seopulses.ru/wp-content/uploads/2020/05/12-4-1024x462.png)
Переходим к созданию нового тега.
![Создание нового тега в Google Менеджер Тегов (GTM)](https://seopulses.ru/wp-content/uploads/2020/05/13-3-1024x539.png)
Даем название и выбираем тип тега.
![Выбор типа тега в Google Tag Manager](https://seopulses.ru/wp-content/uploads/2020/05/14-3-1024x571.png)
Кликаем на «Google Аналитика – Universal Analytics».
![Выбор типа тега Google Analytics для отслеживания чата Битрикс24 в Google Менеджер Тегов](https://seopulses.ru/wp-content/uploads/2020/05/15-2-1024x634.png)
Открываем список и нажимам на «Событие».
![Создание тега и выбор передачи событий в GA для передачи событий чата Битрикс24](https://seopulses.ru/wp-content/uploads/2020/05/16-2-1024x709.png)
Далее заполняем:
- Категория: {{eventCategory}}
- Действие: {{eventAction}}
- Ярлык: {{Page URL}}
- Значение: пустое поле.
![Выбор ID счетчика Гугл Аналитикс для передачи конверсий с виджета чата Битрикс24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/17-2-1024x829.png)
В качестве настройки Google Analytics выбираем нужную переменную (созданную заранее или можно завести новую, отвечает за выбор нужного ID Google Analytics) и переходим к выбору триггера.
![Введеный ID счетчика Гугл Аналитикс для передачи конверсий с виджета чата Битрикс24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/18-2-1024x786.png)
Выбираем All Pages (Все страницы).
![Выбор триггера All Pages из GTM для размещения кода для отслеживания конверсий Битрикс24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/19-1-1024x123.png)
Публикуем новую версию.
![Публикация новой версии с кодом для отслеживания целей Google Analytics через dataLayer из чата Bitrix 24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/7-15-1024x468.png)
Все готово, можно переходить к проверке.
Тестирование и проверка результата
После этого необходимо дождаться выполнения события, соответственно написания в чат.
![Написали в чат виджета Битрикс24](https://seopulses.ru/wp-content/uploads/2020/05/22-2-1024x718.png)
Далее переходим в отчет в Google Analytics в Отчет в реальном времени»-«События», где можно увидеть:
- Категорию: bx24chat
- Действие: sessionStart
![Отчет в реальном времени и события из виджета чата Bitrix24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/23-2-1024x541.png)
Можно посмотреть «Лучшие события» или сделать сегмент в «Источниках трафика».
![Создание сегмента с целями из виджета чата Bitrix24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/25-2-1024x694.png)
Для этого кликаем на «Все пользователи» или «Добавить сегмент».
![Создание сегмента с целями из виджета чата Bitrix24 в Google Analytics](https://seopulses.ru/wp-content/uploads/2020/05/25-2-1024x694.png)
Создаем новый.
![Создание нового сегмента с целями из виджета чата Bitrix24 в Google Аналитики](https://seopulses.ru/wp-content/uploads/2020/05/26-1.png)
Выбираем «Условия» и в качестве Действия выбираем нужное нам действие.
![Создание нового на основе события из виджета чата Битрикс24 сегмента в Google Аналитики](https://seopulses.ru/wp-content/uploads/2020/05/27-1.png)
Аналогично можно будет создать цель для Google Analytics.
Доработка кода
Чтобы передавать лишь конкретные действия потребуется использовать код:
<script type=»text/javascript»>
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});}
}
});
});
</script>
В этом случае конструкция «if», позволяет отслеживать лишь часть событий.
Доработать код под собственные цели можно используя подсказки из события Метрики или же взяв исходник:
Подписывайтесь на наш канал в Яндекс.Дзен
Подписывайтесь на наш Telegram-канал
Подписывайтесь на наш Youtube-канал
Подписывайтесь на нашу группу ВКонтакте
Не дает опубликовать, выдает ошибку.
Добрый день, спасибо за обратную связь, да к сожалению из-за проблем верстки код работает некорректно, скачайте его в текстовом файле и он будет работать корректно
https://drive.google.com/drive/folders/17nnXwVw0B3UDt_woTE-wzC70S4e1iSav?usp=sharing
огромное вам спасибо! даже не надеялся на ответ!)
Спасибо Вам за обратную связь, если потребуется помощь обязательно пишите.
Здравствуйте!
Настроил код по вашей инструкции, изменил события которые нужно отслеживать и настроил подсчёт целей в яндекс.метрике.
Цели в метрике засчитываются, а в Аналитику события не поступают. После настройки в Аналитике появилась категория событий «undefined». В чём может быть дело?
Мой код:
window.addEventListener(‘onBitrixLiveChat’, function(event)
{
var widget = event.detail.widget;
console.log(«EVENT=», event);
console.log(«WIDGET=», widget);
widget.subscribe({
type: BX.LiveChatWidget.SubscriptionType.every,
callback: function(event) {
if (typeof(dataLayer) == ‘undefined’)
{
dataLayer = [];
}
if (event.type == BX.LiveChatWidget.SubscriptionType.userMessage) {
console.log(«EventTYPE=», event.type);
dataLayer.push({‘event’ : ‘bx24chatonline’, ‘eventCategory’:’bx24chat’,’eventAction’: event.type, ‘ecommerce’: {
‘purchase’: {
‘actionField’: {
‘id’ : ‘bitrix_chat’,
‘goal_id’ : ‘169584169’
},
‘products’: [ {} ]
}
}}); }
if (event.type == BX.LiveChatWidget.SubscriptionType.userForm){
dataLayer.push({‘event’ : ‘bx24chatonline’, ‘eventCategory’:’bx24chat’,’eventAction’: event.type, ‘ecommerce’: {
‘purchase’: {
‘actionField’: {
‘id’ : ‘bitrix_chat_form’,
‘goal_id’ : ‘170377597’
},
‘products’: [ {} ]
}
}
});
}
}});
});
В консоли видно, что в dataLayer данные записались. Проблема именно в передачи данных в Аналитику. Переменные уровня данных(eventAction,eventCategory) (в GTM) названы также как и в dataLayer.
Добрый день, спасибо за обратную связь, не могли бы подсказать данный код работает ли у Вас?
Добрый день, спасибо за обратную связь, не могли бы пожалуйста перепроверить все ли данные были введены и выполнены по инструкции?
на 26.04.2021 код актуален?
Добрый день, спасибо за обратную связь, если речь идет о Google Analytics 4, то нет, если речь идет о версии UA, то да код актуален.
Получилось так что считает в события каждую загрузку страницы. Категория и действие: undefined.
Добрый день, спасибо за обратную связь, не могли бы подсказать Вы использовали код из файла?
добрый день,
почему менеджер тегов обрабатывает событие, а в аналитику они не попадают?
Добрый день, спасибо за обратную связь, проверьте пожалуйста корректность настройки по инструкции.
Здравствуйте. Сделал все по инструкции, в итоге в аналитику приходили события «undefined». Заменил тригер во втором теге с All Pages на специальное событие уровня данных bx24chatonline, которое указано как значение параметра ‘event’ в скрипте. Теперь в аналитику приходят данные и категория событий и действия по событию, но почему-то в предварительном просмотре GTM тег на отправку событий находится в Tags Not Fired.
Добрый день, спасибо за обратную связь, не могли бы подсказать Вы проводите операцию в UA или GA4?
Я так понял не один я получил в результате в событиях «undefined», есть ли решения это проблемы, или в чём вообще ошибка?
Добрый день, спасибо за обратную связь, не могли бы подсказать Вы проводите операцию в UA или GA4?
У меня аналогично, события в аналитику передаются как undefined…
Добрый день, спасибо за обратную связь, не могли бы подсказать Вы используете инструкцию в UA или GA4?