Как отслеживать события онлайн-чата на вашем сайте
Используйте события онлайн-чата, чтобы обнаруживать и реагировать на действия пользователей с помощью 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);
});
Вы можете заменить блок 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
или