Отслеживание событий виджета Битрикс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. И установил следующие условия.

Второй тригер Написали в чат Битрикс 24

Третий триггер Заявка на обратную связь Битрикс24

Дальше нужно добавить соответствующие теги для отслеживания событий. Приведу скринкасты моих тегов. Думаю все будет понятно.

Первый тег Заявка с чата Битрикс 24 (GA

Второй тег Заявка с чата Битрикс 24 (YM)

Третий тег Написали в чат Битрикс 24

На этом собственно все, события передаются в google аналитику и по ним можно строить отчеты по конверсии.

Если вам нужно отслеживать цели в яндекс метрике, то есть отличная статья на эту тему.

Добавить комментарий

Ваш адрес email не будет опубликован.