Як відстежувати події онлайн-чату на вашому вебсайті
Використовуйте події онлайн-чату, щоб виявляти та реагувати на дії користувачів за допомогою JavaScript на вашому вебсайті.
Наприклад, ви можете відстежувати, коли відвідувач відкриває віджет онлайн-чату, надсилає повідомлення або натискає кнопку. Потім ви можете передавати цю інформацію в аналітичні інструменти, CRM-рішення або зовнішні системи.
Давайте розглянемо, як відстежувати події онлайн-чату та надсилати їх до зовнішніх систем за допомогою JavaScript.
Список подій
Чат для сайту надсилає події до браузера щоразу, коли підписник або бот виконують певні дії, наприклад, відкривають чат, надсилають повідомлення або натискають кнопку.
Кожна подія має унікальну назву та передає певний набір даних. Усі вони містять стандартні поля, наведені нижче, а деякі — додаткову інформацію про дії користувача або бота.
| Подія | Коли спрацьовує | Поля |
spLiveChatLoaded |
Підписник успішно відкрив чат у своєму браузері. | timestamp, visitorId, phone. |
spLiveChatOpened |
Користувач відкрив чат вручну. Подія не спрацює в разі автоматичного відкриття чату на сайті. | timestamp, visitorId, phone, chatId, subscriberId. |
spLiveChatClosed |
Підписник закрив чат для сайту. | timestamp, visitorId, phone, chatId, subscriberId. |
spGreetingButtonClicked |
Підписник натиснув кнопку у привітанні бота або меню. | Обʼєкт button, який містить дані про кнопку: text, type, id, payload. |
spChatInitiated |
Підписник відправив перше повідомлення. | Поле message — текст першого повідомлення |
spMessageSent |
Підписник відправив повідомлення. | Обʼєкти: { message, type: 'text' } — для текстових повідомлень;або { fileName, fileType, type: 'file' } — для медіа-повідомлень. |
spMessageReceived |
Отримано повідомлення від чату в межах сценарію ланцюжка або відповідь менеджера через чат. | Поля: message, type, quick_replies, url тощо. |
Кожна подія містить такі поля:
timestamp |
Час події у форматі ISO — 2025-11-10T14:32:05Z. |
visitorId, phone |
Ідентифікатори підписника. Дані можуть бути недоступні, якщо відвідувач не взаємодіяв з чатом та не вводив свої дані. |
chatId |
Ідентифікатор активного проєкту, який передається після запуску віджета підписника. |
subscriberId |
Ідентифікатор підписника після реєстрації. Дані можуть бути недоступні, якщо відвідувач сайту не підписався на бот, наприклад, при відкритті чату. |
Передача подій
Щоб переконатися, що події віджета працюють коректно, ви можете швидко протестувати їх у браузері. Для цього додайте скрипт на сторінку, де вже підключено чат:
<script>
document.addEventListener('spMessageSent', (event) => {
console.log('[LiveChat] visitor message sent', event.detail);
});
document.addEventListener('spMessageReceived', (event) => {
console.log('[LiveChat] operator message received', event.detail);
});
</script>Ви можете замінити блок console.log на власну логіку аналітики або інтеграції. Після цього всі події, які надсилає віджет, з’являться у консолі вашого браузера.
Відстеження подій у Google Analytics 4 через GTM
Віджет надсилає події онлайн-чату до window.dataLayer. Ви можете додати користувацькі події Google Tag Manager і передавати їх до Google Analytics 4.
У GTM створіть тригер користувацької події для події онлайн-чату, яку ви хочете відстежувати, наприклад spMessageSent або spLiveChatOpened.
Перейдіть до Triggers і натисніть New. Потім натисніть Choose a trigger type to begin setup. У розділі Other виберіть Custom Event.
У полі Event name введіть spMessageSent і натисніть Save. Введіть таку саму назву для вашого тригера і знову натисніть Save.
Назви користувацьких подій GTM чутливі до регістру. Використовуйте точні назви подій зі списку подій.
Створіть тег події Google Analytics 4, який спрацьовує за цим тригером.
Перейдіть до Tags і натисніть New. Натисніть Choose a tag type to begin setup. У розділі Featured виберіть Google Analytics.
Натисніть Google Analytics: GA4 Event. У полі Measurement ID введіть ваш ID Google Analytics 4, наприклад G-ABC12D3E4F. У полі Event name введіть chat_message_sent.
Прокрутіть до Triggering і натисніть Choose a trigger to make this tag fire. Виберіть тригер, який ви створили для spMessageSent, і натисніть Save. Введіть назву тега і знову натисніть Save.
Щоб застосувати новий тригер і тег, натисніть Submit. У спливному вікні натисніть Publish. За потреби введіть назву та опис контейнера. Натисніть Continue.
Щоб перевірити налаштування, відкрийте ваш вебсайт. Надішліть повідомлення в онлайн-чаті та виконайте window.dataLayer у консолі браузера. Ви повинні побачити записи, де event дорівнює spMessageSent, а також інші налаштовані події онлайн-чату.
Щоб підтвердити налаштування, перейдіть до Google Analytics. Відкрийте звіти Realtime і переконайтеся, що Google Analytics 4 отримує подію chat_message_sent.
Оновлено: 17.11.2025
або