Як налаштувати відстеження подій в онлайн-чатах. Покрокова інструкція

Всім привіт, мене звати Андрій, я — Junior Web Analyst, от вже 6 місяців працюю в агенції digital-маркетингу Inweb. Написати такий своєрідний гайд мене надихнув той факт, що ще кілька місяців тому мені самому дуже зарадило б таке джерело інформації.

Почну з того, що онлайн-чати — дуже корисний інструмент. Вони полегшують роботу співробітників компанії з клієнтами: дозволяють розширювати канали зв’язку з тими, хто вже є на сайті та консультувати їх у реальному часі. Такі чати легко встановлювати, багато з них — безкоштовні. Як правило, вони підходять практично для всіх ресурсів: від великих інтернет-магазинів до сайтів-візитівок.

Але мало встановити онлайн-чат, потрібно якісно відстежувати взаємодію користувача з ним, тобто збирати аналітику. Для цього знадобиться Google Tag Manager (далі — GTM), в якому має бути створений GTM-контейнер. Але оскільки такий чат підключається на сайт як сторонній фрейм, стандартного підходу у налаштуванні відстеження недостатньо.

Для відслідковування кліків та інших дій користувачів, ми в команді рекомендуємо використовувати API конкретного чату, який дозволяє створювати власні події та передавати їх у dataLayer. У даному матеріалі я спробую покроково пояснити, як можна за допомогою Google Tag Manager налаштувати передачу подій чатів до ресурсів Google Analytics.

У цій статті будуть розглянуті налаштування відстеження для популярних онлайн-чатів, а також спосіб, шляхом імпорту готових налаштувань:

• Tawk.to чат
• HelpCrunch чат
• Crisp чат
• Drift чат
• HubSpot чат
• ZoonInfo чат
• Intercom чат
• LiveChat чат
• Імпорт готових налаштувань для Google Tag Manager

Tawk.to чат

Для відстеження взаємодії користувачів з чатом Tawk.to потрібно:

1. Створити тег прослуховування подій чату.
2. Налаштувати тригер, який спрацьовуватиме при взаємодії з чатом.
3. Створити теги надсилання подій до ресурсу Google Analytics.
4. Налаштувати цілі та конверсії.

Тепер про все по черзі.

Для створення прослуховувача подій необхідно створити тег типу «Користувацький HTML» і вставити в нього JavaScript-код, який наведений нижче:

<script>
Tawk_API = Tawk_API || {};
var dlpush = function(event){
  dataLayer.push({
	'event': 'tawkto',
	'chatInteraction': event
  });
}
Tawk_API.onChatStarted = function(){
  dlpush("chatStarted");
}; 
Tawk_API.onChatEnded = function(){
  dlpush("chatEndedByUser");
};
Tawk_API.onPrechatSubmit = function(data){
  dlpush("prechatFormSubmitted");
};
Tawk_API.onOfflineSubmit = function(data){
  dlpush("offlineFormSubmitted");
};
script>

Переходимо до «Теги» (1), натискаємо «Створити» (2). У вікні, що відкривається, клікаємо на поле «Конфігурація тегу» (3) і в списку вибираємо «Користувацький HTML».

Далі перед нами відкривається поле для введення HTML-коду, куди необхідно вставити наведений JavaScript-код.

❗️ Зверніть увагу: при введенні JavaScript-коду в поле необхідно його обернути в тег , оскільки тег приймає лише HTML-код.

Далі вибираємо тригер. Клікаємо на поле «Тригер», у списку вибираємо тригер «Всі сторінки» (1). Вводимо назву нашого тега (2), натискаємо «Зберегти» (3).

UA: pics.inweb.ua/...​66600810303_kiss_48kb.png

Тепер якщо ми запустимо режим попереднього перегляду в Google Tag Manager, то в налагоджувачі Tag Assistant ми побачимо наступну картину при взаємодії з чатом:

Де подія tawkto сигналізуватиме про взаємодію з чатом, а тип взаємодії передаватиметься за допомогою змінної рівня даних «chatInteraction».

Тепер переходимо безпосередньо до налаштування передачі події в Google Analytics.

Створюємо тригер — переходимо на вкладку «Тригери», натискаємо «Створити».

Клікаємо на поле «Налаштування тригера», у списку вибираємо тип тригера — «Спеціальна подія» (1). У назву події прописуємо «tawkto» (2), вводимо назву тригера (3) і тиснемо «Зберегти» (4).

Для передачі типу взаємодії користувача з чатом нам необхідно створити змінну. Для цього переходимо на вкладку «Змінні» (1), натискаємо «Створити» (2):

Клацаємо на поле «Конфігурація змінної» та вибираємо тип змінної — Змінна рівня даних (1). Ім’я змінної рівня даних — chatInteraction (2), версія рівня даних — Версія 2 (3). Далі даємо назву нашої змінної (4) та зберігаємо її (5).

Значення змінної chatinteraction залежно від типу взаємодії може приймати такі значення:

Тепер нам потрібно створити тег, який передаватиме подію до ресурсів Google Analytics:

Для Universal Analytics: створюємо тег типу Google Аналітика: Universal Analytics (1). Тип відстеження — Подія (2). Категорія — tawkto (3). Дія — змінна чата Interaction (4). Налаштування Google Аналітики — вибираємо змінну із налаштуваннями Universal Analytics. Далі вибираємо тригер Tawkto Event (5) і зберігаємо тег.

Далі перевіряємо налаштування у режимі попереднього перегляду. У Universal Analytics повинні приходити події:

Якщо все коректно відпрацьовує, створюємо цілі на події та публікуємо контейнер Google Tag Manager.

Для Google Analytics 4: створюємо тег типу Google Analytics: подія Google Analytics 4 (1). Тег конфігурації — вибираємо тег конфігурації Google Analytics 4 (2). Назва події — вводимо «Tawkto_» і далі вставляємо змінну chatInteraction (натиснувши на іконку конструктора праворуч від рядка введення, відкриється список зі змінними). Вибираємо тригер «Tawkto Events» (4) та зберігаємо тег.

Після налаштувань тега у режимі попереднього перегляду перевіряємо передачу подій. На вкладці інструменти відкриваємо DebugView, в якому ми побачимо наступне:

Після успішної перевірки публікуємо контейнер GTM.

HelpCrunch чат

Аналогічно попереднім налаштуванням, спочатку необхідно створити тег для прослуховування подій чату. Як і в попередньому прикладі, створюємо тег типу «Користувацький HTML» з кодом для відстеження подій чату HelpCrunch, який наведений нижче:

<script>
var callback = function(){
  dataLayer.push({'event': 'HelpCrunch',
  'eventAction': 'onChatOpen'
  })
};
HelpCrunch('onChatOpen', callback);
HelpCrunch('onCustomerMessage', function(event){
  dataLayer.push({
	'event': 'sendChatMessage'
  });
});
HelpCrunch('onChatOpen', function(){
  dataLayer.push({
	'event': 'opensChat'
  });
});
HelpCrunch('onChatClose', function(){
  dataLayer.push({
	'event': 'closesChat'
  });
});
HelpCrunch('onNewUnreadMessages', function(){
  dataLayer.push({
	'event': 'getsNewMessage'
  });
});
HelpCrunch('onPreChatFormSubmit', function(){
  dataLayer.push({
	'event': 'submitsPreChatForm'
  });
});
script>

Копіюємо код у полі введення HTML-коду. Тригер — «Всі сторінки» називаємо наш тег і тиснемо «Зберегти».

Створюємо тригер, після спрацювання якого в Google Analytics буде передаватися подія: Тип тригера — Спеціальна подія (1), в назву події прописуємо наступне — sendChatMessage|opensChat|closesChat|getsNewMessage|submitsPreChatForm (2), і потрібно поставити галочку (3), щоб один тригер спрацьовував за будь-якої з перерахованих подій:

Розшифрування назв подій:

Далі налаштовуємо теги для передачі подій до ресурсів Google Analytics.

Налаштування для Universal Analytics:

тип відстеження — Подія,

категорія — HelpCrunch,

дія — змінна Event.

Тригер — раніше створений «HelpCrunch Events»:

Приклад налаштування тега для Google Analytics 4: назва події — HelpCrunch_{{Event}} (тут подвійні фігурні дужки означають, що в назву події, що передається, буде підтягуватися значення попередньо встановленої змінної Event).

Тригер — HelpCrunch Events.

Crisp чат

Для відстеження взаємодій користувачів з чатом CrispChat, нам також знадобиться створити тег типу «Користувацький HTML», у полі якого потрібно буде скопіювати наступний код:

Повинно вийти так:

Як тригер вибираємо «Всі сторінки». Наступний крок — створюємо тригер для подій чату:

тип тригера — Спеціальна подія,

назва події — CrispInteractions.

Тепер створимо змінну, яка буде передавати тип взаємодії разом з подією в Google Analytics:

тип — змінна рівня даних,

ім’я змінної — eventAction,

версія рівня даних — Версія 2.

Розшифрування параметра:

Далі можна розпочати створення тегів для передачі подій у Google Analytics.

Приклад налаштувань тега для Universal Analytics:

тип відстеження — Подія,

категорія події — chatbox,

дія — змінна eventAction. Тригер — CrispChet Event.

Приклад налаштувань тегу для Google Analytics 4:

назва події — CrispChat_{{eventAction}}.

тригер — CrispChet Event.

Drift чат

Так само як і в попередніх випадках, для відстеження подій з чату Drift, скористаємося документацією для розробників на офіційному сайті Drift. JavaScript-код для прослуховування подій буде наступним:

<script>
window.drift.on('ready',function(api){
  window.drift.on('startConversation',function (event){
	{
  	dataLayer.push({
    	'event':'driftAction',
    	'eventCategory':'Drift',
    	'eventAction':'Conversation_started',
    	'eventLabel': 'Conversation_started'
  	});
	}
  })
  window.drift.on('campaign:dismiss',function(event){
	{
  	dataLayer.push({
    	'event': 'driftAction',
    	'eventCategory': 'Drift',
    	'eventAction': 'Box_Dismissed',
    	'eventLabel': event.campaignId+ '_Dismissed'
  	});
	}
  })
  window.drift.on('sidebarOpen',function(e){
	{
  	dataLayer.push({
    	'event':'driftAction',
    	'eventCategory':'Drift',
    	'eventAction':'Sidebar_opened',
    	'eventLabel': 'Sidebar_opened'
  	});
	}
  })
  window.drift.on('sidebarClose',function(e){
	{
  	dataLayer.push({
    	'event':'driftAction',
    	'eventCategory':'Drift',
    	'eventAction':'Sidebar_closed',
    	'eventLabel': 'Sidebar_closed'
  	});
	}
  })
  window.drift.on('welcomeMessage:open',function(event){
	{
  	dataLayer.push({
    	'event':'driftAction',
    	'eventCategory':'Drift',
        'eventAction':'Customer_was_welcomed',
    	'eventLabel': event.conversationId
  	});
	}
  })
  window.drift.on('welcomeMessage:close',function(event){
	{
  	dataLayer.push({
    	'event':'driftAction',
    	'eventCategory':'Drift',
        'eventAction':'Welcome_message_closed',
    	'eventLabel': event.conversationId
  	});
	}
  })
  window.drift.on('message:sent',function(data){
	{
  	dataLayer.push({
    	'event':'driftAction',
    	'eventCategory':'Drift',
    	'eventAction':'User_replies',
    	'eventLabel': data.conversationId
  	});
	}
  })
  window.drift.on('emailCapture',function(e){
	{
  	dataLayer.push({
    	'event':'driftAction',
    	'eventCategory':'Drift',
    	'eventAction':'User_Introduced_email',
    	'email': e.data.email
  	});
	}
  })   
})
script>

На першому етапі створюємо тег типу «Користувацький HTML» і вставляємо в нього код, зазначений вище. Як тригер обираємо «Всі сторінки».

Далі нам потрібний тригер, який спрацьовуватиме з подіями чату, його налаштування: Тип тригера — Спеціальна подія, Назва події — driftAction.

Для передачі виду взаємодії нам знадобиться змінна — «eventAction»; її налаштування:

тип змінної — змінна рівня даних,

ім’я змінної — eventAction,

версія рівня даних — Версія 2.

Нижче наведено можливі значення змінної eventAction з їх розшифровкою:

Тепер можна розпочати налаштування тегів для Google Analytics.

Приклад налаштувань для Universal Analytics:

тип відстеження — Подія,

категорія події — Drift,

дія — змінна eventAction. Тригер — DriftChat Event.

Установки тега для Google Analytics 4:

Назва події — Drift_{{eventAction}}. Тригер — DriftChat Event. Вказуємо тег конфігурації, даємо назву та зберігаємо тег.

HubSpot чат

Для цього чату, на сайті компанії-розробника є готове рішення для відстеження взаємодій у вигляді JavaScript-коду:

<script>
window.addEventListener('message', function(event){
  if (event.origin !== 'https://app.hubspot.com')
  return false;
  var eventData = JSON.parse(event.data);
  var eventAction = false;
  switch(eventData.type){
	case 'closed-welcome-message':
  	eventAction = 'Closed_Welcome_Message';
	break;
	case 'open-change':
  	eventAction = (eventData.data.isOpen)? 'Opened_Window': 'Closed_Window';
	break;
	case 'external-api-event':
  	if (eventData.data.eventType = 'conversationStarted')
      eventAction = 'Conversation_Started';
	break;
	default:
  	eventAction = false;
	break;
  }
  if(eventAction){
	dataLayer.push({
  	'event': 'Send Event',
  	'event_category': 'Live Chat',
  	'event_action': eventAction,
  	'event_label': eventData.uuid,
  	'event_value': 10
	});
  }
});
script>

Створимо тег для прослуховування взаємодій. Тип тега — «Користувацький HTML», тригер — «Всі сторінки»:

Наступний крок — це створення тригера для подій чату:

тип тригера — Спеціальна подія,

назва події — Send Event.

Для визначення типу взаємодії створюємо змінну з такими налаштуваннями:

тип змінної — змінна рівня даних,

ім’я змінної — event_action,

версія рівня даних — Версія 2.

Створена змінна може набувати різних значень залежно від взаємодії користувача з віджетом чату. Розшифровка можливих значень змінної event_action:

Тепер можна починати створювати теги для передачі подій до ресурсів Google Analytics:

Приклад налаштування тега для Universal Analytics:

тип відстеження — Подія,

категорія події — Live Chat,

дія — змінна event_action,

тригер — HubSpot-Chat Event.

Повинно вийти так:

Аналогічно попереднім прикладам налаштовуємо тег для передачі подій у ресурс Google Analytics 4. Приклад налаштувань:

назва події — HubSpot_{{event_action}},

тригер — HubSpot-Chat Event.

ZoonInfo чат

Відстеження подій чату ZoomInfo також будем налаштовувати за допомогою тега типу «Користувацький HTML». Код для прослуховування подій можна знайти на сайті розробника.

Сам код має вигляд:

<script>
if(!window.insent) window.insent={};
window.insent.startConversation = function(event) {
  dataLayer.push({
	'event': 'Insent',
	'eventCategory': 'Insent Chat',
	'eventAction': 'CONVERSATION_STARTED',
	'eventLabel': window.location.href
  });
}  
window.insent.emailCapture = function(event) {
  dataLayer.push({
	'event': 'Insent',               	
	'eventCategory': 'Insent Chat',
	'eventAction': 'EMAIL_CAPTURED',
	'eventLabel': window.location.href
  });
}            	
window.insent.phoneNumberCapture = function(event) {
  dataLayer.push({
	'event': 'Insent',               	
	'eventCategory': 'Insent Chat',
	'eventAction': 'PHONE_NUMBER_CAPTURED',
	'eventLabel': window.location.href
  });
}
window.insent.buttonClicked = function(event) {
  dataLayer.push({
	'event': 'Insent',                	
	'eventCategory': 'Insent Chat',
	'eventAction': 'BUTTON_CLICKED',
	'eventLabel': window.location.href
  });
}
window.insent.greetingMessageClosed = function(event) {
  dataLayer.push({
	'event': 'Insent',                	
	'eventCategory': 'Insent Chat',
	'eventAction': 'GREETING_MESSAGE_CLOSED',
	'eventLabel': window.location.href
  });
}
script>

Копіюємо цей код і вставляємо в поле тега типу «Користувацький HTML», тригер — «Всі сторінки»:

Для відпрацювання майбутніх тегів для Google Analytics необхідно створити тригер з такими параметрами:

тип тригера — Спеціальна подія,

назва події — Insent.

Разом з цим нам потрібно буде з подією передавати тип взаємодії користувачів з віджетом.

Зробити це можна за допомогою змінної, параметри якої такі:

тип змінної — Змінна рівня даних,

ім’я змінної — eventAction,

версія рівня даних — Версія 2.

Нижче в таблиці наведено можливі значення змінної eventAction та їх розшифровка.

Завершальним кроком буде створення тегів для передачі подій у Google Analytics.

Приклад налаштування тега для Universal Analytics:

тип відстеження — Подія,

категорія події — Insent Chat,

дія — змінна eventAction,

тригер — ZoomInfo Chat Events.

Налаштування тега для Google Analytics 4:

назва події — ZoomInfo_{{eventAction}},

тригер — ZoomInfo Chat Events.

Intercom чат

Скористайтеся документацією для розробників на сайті Intercom для написання прослуховувача подій.

Готовий код для відстеження має вигляд:

<script>
Intercom('onShow', function() {
    dataLayer.push({
    'event':'Intercom_IW',
    'event_action':'onShow'
  });
});
Intercom('onHide', function() {
    dataLayer.push({
    'event':'Intercom_IW',
    'event_action':'onHide'
  });
});
Intercom('onUserEmailSupplied', function() {
    dataLayer.push({
    'event':'Intercom_IW',
    'event_action':'onUserEmailSupplied'
  });
});
script>

Копіюємо цей код і вставляємо в поле тега типу «Користувацький HTML», тригер — «Всі сторінки»:

Далі необхідно створити тригер типу «Спеціальна подія», у полі «Назва події» прописуємо Intercom_IW.

Характер взаємодії міститиме змінна рівня даних event_action:

тип змінної — Змінна рівня даних,

ім’я змінної — event_action,

версія рівня даних — Версія 2.

Розшифровуємо значення змінної event_action.

Тепер можна розпочати створення тегів для передачі подій у Google Analytics.

Приклад налаштування тега для Universal Analytics:

тип відстеження — Подія,

категорія події — Intercom Chat,

дія — змінна event_action,

тригер — Intercom Chat Events.

Налаштування тега для Google Analytics 4:

тип тега — Подія GA4,

назва події — Intercom_{{event_action}},

тригер — Intercom Chat Events.

LiveChat чат

Для складання JavaScript коду прослуховувача подій можна скористатися документацією API на офіційному сайті LiveChat.

Код матиме такий вигляд:

<script>
  LiveChatWidget.on('customer_status_changed', function() {
    dataLayer.push({
    'event':'LiveChat',
    'event_action':'customer_status_changed'
  });
});
LiveChatWidget.on('form_submitted', function() {
    dataLayer.push({
    'event':'LiveChat',
    'event_action':'form_submitted'
  });
});
LiveChatWidget.on('rating_submitted', function() {
    dataLayer.push({
    'event':'LiveChat',
    'event_action':'rating_submitted'
  });
});
LiveChatWidget.on('greeting_displayed', function() {
    dataLayer.push({
    'event':'LiveChat',
    'event_action':'greeting_displayed'
  });
});
LiveChatWidget.on('greeting_hidden', function() {
    dataLayer.push({
    'event':'LiveChat',
    'event_action':'greeting_hidden'
  });
});
script>

Вставляємо цей код у поле тега «Користувацький HTML»:

Наступний крок — створення тригера типу «Спеціальна подія», де в назву події пишемо «LiveChat».

Тип взаємодії передаватиме змінна рівня даних event_action:

Розшифровує значення змінної event_action.

Приклад налаштування тега для Universal Analytics:

тип відстеження — Подія,

категорія події — LiveChat,

дія — змінна event_action,

тригер — LiveChat Events.

Імпорт готових налаштувань для Google Tag Manager

Для полегшення налаштувань відстеження подій у перерахованих вище онлайн-чатах ви можете скористатися файлами з готовими налаштуваннями. Для цього доведеться імпортувати JSON-файл з налаштуваннями в контейнер GTM.

Зробити це нескладно, для початку в Google Tag Manager перейдіть на вкладку «Адміністрування» (1) та виберіть пункт «Імпортувати контейнер» (2):

Перед вами з’явиться вікно імпорту. Спочатку потрібно визначити робочу область, у яку ви хочете імпортувати налаштування. Якщо вам нема потреби створювати нову робочу область, то вибираєте наявну:

Далі вибираєте пункт «Об’єднати» та «Перейменувати конфліктуючі теги, тригери та змінні». Це дозволить імпортувати налаштування, не зіпсувавши вже існуючі у вашому GTM-контейнері.

Наступним кроком є завантаження налаштувань. Залежно від чату, для якого потрібно налаштувати відстеження, клацніть посилання на JSON-файл зі списку:

Тепер, завантаживши потрібний JSON-файл, у вікні імпорту вибираємо файл, для цього натискаємо кнопку «Вибрати файл контейнера» і відкриваємо потрібний файл.

Повинні підтягнутися всі теги, тригери та змінні (1), після чого натискаємо «Підтвердити» (2):

Тепер усі необхідні налаштування імпортовані до Вашого GTM-контейнера. Останнє, що потрібно зробити, це змінити ID ресурсів Google Analytics у налаштуваннях; після цього можна публікувати контейнер.

Отже, у статті я розглянув найпопулярніші види онлайн-чатів та пояснив, як саме налаштувати відслідковування поведінки користувачів. Як бачите, все досить просто.

Сподіваюсь, ви не опинитесь у такій ситуації, як я колись, і вся інформація тепер у вас буде під рукою.