Отслеживание событий виджета Битрикс24 в Google Analitics 4

В 2021 году делать коммерческий сайт и не отслеживать цели и конверсии, все равно что носить воду решетом. Для всех своих сайтов я уже давно использую в качестве системы аналитики связку Google Tag Manager (GTM) + Google Analitics 4 (Именно GA4 а не Universal Google Analitycs) ну и яндекс метрику тоже, куда уж без нее. Настроить цели особых проблем не составляет если понимать основные принципы и читать документацию.

Итак для того, чтоб отслеживать цели событий чата виджета Битрикс24, нужно во первых установить такой виджет себе на сайт. Далее определиться какие события вы хотите отслеживать. Я для себя определил следующие полезные события:

Посетитель написал в чат
Посетитель заполнил форму в чате
Посетитель оставил заявку на обратную связь

Все эти действия я считаю полезными для отслеживания конверсии на сайте. Первым делом нужно добавить на сайт код прослушивания событий виджета. Через Google Tag Manager добавляем Тег «Пользовательский код» на сайт, триггер указываем All pages (на всех страницах).

Читаем официальную документацию. Нам нужно навесить обработчики прослушивания событий, я сделал это для 3-х типов событий, 1-ое BX.LiveChatWidget.SubscriptionType.userForm (пользователь оставил заявку в чате), 2-ое BX.LiveChatWidget.SubscriptionType.userMessage (пользователь написал сообщение в чат), 3-ье BX.LiveChatWidget.SubscriptionType.every (отслеживание всех событий, тут я буду при помощи тригера отлавливать событие с Event: crm_form, то есть, заявку на обратную связь). Код ниже.

<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.userForm)
      {
        dataLayer.push({'event' : 'bx24chat_form', 'eventCategory':'bx24chat_form','eventAction': event.type});
        ym(52138942,'reachGoal','callback_form');
      }
  else if (event.type == BX.LiveChatWidget.SubscriptionType.userMessage)
  {
    dataLayer.push({'event' : 'bx24chat_text', 'eventCategory':'bx24chat_text','eventAction': event.type});
    ym(52138942,'reachGoal','write_to_chat');
  }
 
}
 
});
 
});
 
</script>

Далее нужно создать 3 триггера под каждый тип событий. Нппример я создал триггер Оставили заявку в чате Битрикс 24. И установил следующие условия.