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

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Всім привіт, мене звати Андрій, я — 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 чат

Screenshot звідси

Для відстеження взаємодії користувачів з чатом 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-коду в поле необхідно його обернути в тег <script></script>, оскільки тег приймає лише 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 чат

Screenshot звідси

Аналогічно попереднім налаштуванням, спочатку необхідно створити тег для прослуховування подій чату. Як і в попередньому прикладі, створюємо тег типу «Користувацький 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 чат

Screenshot звідси

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

<script>
$crisp.push(["on", "chat:opened", function(event){
  dataLayer.push({
	'event': 'CrispInteractions',
	'eventCategory': 'chatbox',
	'eventAction': 'chat_opened'
  });
}]);
$crisp.push(["on", "chat:initiated", function(event){
  dataLayer.push({
	'event': 'CrispInteractions',
	'eventCategory': 'chatbox',
	'eventAction': 'chat_initiated'
  });
}]);
$crisp.push(["on", "chat:closed", function(event){
  dataLayer.push({
	'event': 'CrispInteractions',
	'eventCategory': 'chatbox',
	'eventAction': 'chat_closed'
  });
}]);
$crisp.push(["on", "message:sent", function(event){
  dataLayer.push({
	'event': 'CrispInteractions',
	'eventCategory': 'chatbox',
	'eventAction': 'message_sent'
  });
}]);
$crisp.push(["on", "message:received", function(event){
  dataLayer.push({
	'event': 'CrispInteractions',
	'eventCategory': 'chatbox',
	'eventAction': 'message_received'
  });
}]);
$crisp.push(["on", "user:email:changed", function(event){
  dataLayer.push({
	'event': 'CrispInteractions',
	'eventCategory': 'chatbox',
	'eventAction': 'visitor_email_added'
  });
}]);
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

тригер — CrispChet Event.

Drift чат

Screenshot звідси

Так само як і в попередніх випадках, для відстеження подій з чату 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 чат

Screenshot звідси

Для цього чату, на сайті компанії-розробника є готове рішення для відстеження взаємодій у вигляді 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 чат

Screenshot звідси

Відстеження подій чату 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 чат

Screenshot звідси

Скористайтеся документацією для розробників на сайті 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 чат

Screenshot: звідси

Для складання 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 у налаштуваннях; після цього можна публікувати контейнер.

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

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