Отправка событий Google Analytics из сценариев чата

В этом руководстве показано, как интегрировать веб-чат с Google Analytics 4 (GA4), настроив виджет чата и сценарии для отправки ключевых данных о взаимодействии. Прежде чем продолжить, убедитесь, что вы выполнили следующее:

Настройка сценария и службы чата
Настроил виджет веб-чата на своем веб-сайте
Используете GA4 на веб-сайте, где настроен виджет чата
Знаете настраиваемые события в GA4
Сгенерирован секрет API для отправки событий протокола измерения

Порядок действий

Предположим, вы хотите отправлять в Google Analytics специальное событие всякий раз, когда один из ваших операторов отвечает на веб-чат одного из ваших клиентов. Для этого необходимо получить Google Analytics clientId и sessionId из посещения веб-сайта клиента, отправить их в сценарий чата, а затем использовать их в данных о пользовательских событиях, отправляемых в GA4.

Следующие шаги показывают, как:

Получите идентификатор сеанса GA4 и идентификатор клиента
Измените настройки виджета чата, чтобы отправлять clientId и sessionId данные в сценарий
Настройте сценарий чата для отправки специального события, используя clientId и sessionId

1. Получение идентификатора клиента и идентификатора сеанса с помощью gtag.js.

команда gtag ‘get’ позволяет получить текущий идентификатор клиента и идентификатор сеанса, когда клиент посещает страницу, измеренную с помощью GA4. Пример кода приведен ниже. Предполагается, что библиотека gtag.js уже загружена.

Замените G-XXXXXXXX на идентификатор измерения GA4 в предоставленном коде. фрагмент и добавьте его в HTML-код вашей веб-страницы. Фрагмент выполняет следующее:
- Запрашивает идентификатор клиента и идентификатор сеанса
- Добавляет идентификатор клиента и идентификатор сеанса в объект params
- Записывает полученные значения в консоль браузера

<script>
// Initialize a params variable to hold the session ID and client ID
var params = {};

// Get the session ID.
gtag(
  'get', // Specifies the 'get' command to retrieve a value.
  'G-XXXXXXXX', // The measurement ID of the Google Analytics property.
  'session_id', // The name of the metric to retrieve ('session_id' in this case).
  (id) => { // Callback function that receives the retrieved session ID.
    console.log("Session ID", id); // Logs the session ID to the console.
    params['session_id'] = id; // Adds the session ID to the 'params' object.
  }
);

// Get the client ID.
gtag('get', 'G-XXXXXXXX', 'client_id', (client_id) => { console.log("Client ID",client_id); params['client_id'] = client_id; });

// Log the 'params' object to console, so we can check that both IDs are present.
console.log("Params object populated with session and client id:",params)
</script>

Откройте страницу и посмотрите в журнале консоли браузера, были ли записаны идентификатор сеанса и идентификатор клиента и сохранены ли они оба в объекте params.

Идентификатор сеанса и идентификатор клиента должны быть зарегистрированы в консоли браузера

Если значения (идентификатор сеанса и идентификатор клиента) отсутствуют в журналах браузера, возможно, будет полезно проверить следующее:
- Правильно ли загружается библиотека gtag.js на вашей веб-странице
- Что вы используете правильный идентификатор измерения (формата «G-XXXXXXX») для своего веб-сайта
- Блокирует ли ваш браузер файлы cookie или JavaScript

2. Измените настройки виджета чата.

После того, как вы подтвердите, что можете получить идентификатор сеанса и идентификатор клиента для посетителей вашего веб-сайта, вы можете передать эти JavaScript для сценариев во время настройки виджета чата.

Включите приведенный выше фрагмент кода в настройки виджета чата. Обратите внимание на следующие части примера кода ниже:
- Объект params инициализируется с помощью {'session_id':0, 'client_id':0}
- Идентификатор клиента и идентификатор сеанса извлекаются из GA4 и сохраняются в объекте params
- Объект params передается в конфигурации чата со строкой parameters:params

<link type="text/css" rel="stylesheet" href="https://contact-center.example/clientweb/chat-client-v4/css/form.css">
<script type="text/javascript">

    // Initialize 'params' object
    var params = {'session_id':0, 'client_id':0};

    // Get Session ID and Client ID
    gtag('get', 'G-XXXXXXXX', 'session_id', (id) => {params['session_id'] = id;});
    gtag('get', 'G-XXXXXXXX', 'client_id', (client_id) => {params['client_id'] = client_id; });
    console.log("Params",params);
    
    // Configure the chat widget
    SERVICE_PATTERN_CHAT_CONFIG = {
        appId: '70a6624585ef2b0981fed84fcd12d4db',
        apiUrl: 'https://contact-center.example/clientweb/api/v1',
        tenantUrl: 'contact-center.example',
        chatPath: 'https://contact-center.example/clientweb/chat-client-v4/',
          
        // Send the Session ID and Client ID as custom parameters to the chat widget
        parameters: params
    };
</script>
<script src="https://contact-center.example/clientweb/chat-client-v4/js/init.js" defer></script>

Убедитесь, что appId, apiUrl, tenantUrl и chatPath настроены с правильными значениями для вашего виджета чата.
Убедитесь, что вы заменили G-XXXXXXXX на измерение GA4. Идентификатор.

3. Настройка сценария чата для отправки событий GA4.

Вспомните, что из предыдущего шага parameters в конфигурации веб-чата были заполнены объектом {'session_id':<Session ID>, 'client_id':<Client ID>}. В результате следующие переменные сценария будут заполнены идентификатором сеанса и идентификатором клиента:

$(item.externalChatData.session_id) будет содержать идентификатор сеанса
$(item.externalChatData.client_id) будет содержать идентификатор клиента

Обратитесь к соответствующему руководству Как передавать через JavaScript переменные Веб-HTML для более подробной информации. Следующие шаги показывают, как настроить простой сценарий для отправки событий GA4, связанных с идентификатором сеанса и идентификатором клиента клиента, инициировавшего веб-чат.

Откройте сценарий чата, связанный с вашим виджетом чата, и добавьте следующие блоки:
- Блок внутреннего сообщения для проверки правильности получения идентификатора сеанса и идентификатора клиента
- Извлеките блок URL-адреса, чтобы отправить одно или несколько событий GA4 через API Measurement Protocol
- Внутреннее сообщение для проверки результата блока Получить URL
- Блок «Найти оператора (чат)» с настройками по умолчанию для поиска оператора
- Блок «Подключить чат», чтобы подключить оператора к чату

Выберите первый блок Внутреннее сообщение и настройте указанные свойства, чтобы вы могли видеть, что переменные сценария $(item.externalChatData.session_id) и $(item.externalChatData.client_id) заполняются:
- Имя пользователя: имя пользователя оператора, которое вы будете использовать в Рабочее место оператора при тестировании этого сценария. В этом примере используется учетная запись с именем пользователя «Администратор».
- Сообщение: настройте сообщение, отображающее значения переменных сценария, заполняемых виджетом чата:
```
Session ID
$(item.externalChatData.session_id)
Client ID
$(item.externalChatData.client_id)
```

настройте первый блок *Внутреннее сообщение*

Выберите блок Извлечь URL и настройте его для отправки специального события GA4 через API Measurement Protocol:
- Текст заголовка: можно использовать любое имя, но описательное именование может быть особенно полезно для различия между несколькими блоками Fetch URL.
- Тип запроса: POST
- URL-адрес для получения: конечная точка Measurement Protocol: https://www.google-analytics.com/mp/collect
- Параметры URL. Добавьте два параметра со следующими именами и значениями:
  - api_secret: значение должно быть Секрет API протокола измерения для ресурса GA4, связанного с вашим сайтом.
  - measurement_id: идентификатор измерения ресурса GA4, связанного с вашим веб-сайт.
- Тип контента: application/json
- Тело: параметры запроса для конечной точки события Measurement Protocol. В следующем примере отправляется событие с именем «custom_scenario_event», которое использует переменные сценария $(item.externalChatData.session_id) и $(item.externalChatData.client_id):
```
{
   "client_id": "$(item.externalChatData.client_id)",
   "events": [
     {
        "name": "custom_scenario_event",
        "params": {
          "custom_scenario_param": "Some info about the customer",
         "session_id": "$(item.externalChatData.session_id)"
        }
     }
   ]
  }
```
- Содержимое тела ответа: JSON

Выберите второй блок Внутреннее сообщение. Предыдущий блок, Fetch URL, заполнит две переменные сценария: $(fetchURLResultCode) и $(fetchURLResultBody), который покажет, было ли создание события успешным. Если код результата — -1, это указывает на успех. В случае сбоя тело результата поможет определить ошибку. Настройте блок, как указано:
- Имя пользователя: имя пользователя оператора, которое вы будете использовать в Рабочее место оператора при тестировании этого сценария. В этом примере используется учетная запись с именем пользователя «Администратор».
- Сообщение: настройте сообщение, отображающее значения переменных сценария, заполняемых блоком Fetch URL:
```
Code: $(fetchURLResultCode)
Body: $(fetchURLResultBody)
```

Настройте блок *Внутреннее сообщение* с использованием отладочной информации из блока *Получить URL*

Параметры Найти оператора и Подключить чат можно оставить с настройками по умолчанию.
Сохранить сценарий.

4. Проверьте, что пользовательские события отправляются на GA4.

Выполните следующие действия, чтобы убедиться, что события поступают в вашу учетную запись Google Analytics.

Войдите на рабочий стол оператора, используя учетные данные пользователя, который настроен для получения внутренних сообщений, созданных на предыдущем шаге.
Начните сеанс веб-чата со своего веб-сайта, как это сделал бы клиент.
После начала чата вы должны увидеть внутренние сообщения на рабочем столе вашего оператора. Эти сообщения помогут вам понять, так ли это. В частности, ищите сообщения, указывающие:
- Прием идентификатора клиента и идентификатора сеанса: сообщение, подтверждающее успешное получение идентификатора клиента и идентификатора сеанса
- Успешное получение URL-адреса: сообщение с указанием результирующего кода -1. Это конкретно указывает на то, что блок Fetch URL выполнен успешно. Если вы видите другой код результата, устраните неполадки в конфигурации блока Fetch URL.

Внутренние сообщения, показывающие идентификатор сеанса, идентификатор клиента, код результата и пустое тело результата

На панели управления Google Analytics перейдите в раздел Отчеты > Обзор в реальном времени и найдите свое специальное событие в виджет «Подсчет событий по названию события».

Панель управления Google Analytics в реальном времени, показывающая пользовательское событие

Дополнительные замечания

Конфиденциальность данных. При отправке данных в Google Analytics соблюдайте правила конфиденциальности. Убедитесь, что вы соблюдаете такие правила, как GDPR и CCPA. Рассмотрите возможность анонимизации или хеширования конфиденциальных данных перед отправкой их в GA4.
Дополнительные события. Расширьте функциональность, чтобы отслеживать не только первоначальное соединение с чатом. Отправляйте события для ключевых моментов взаимодействия, таких как назначение оператора, продолжительность чата, рейтинг удовлетворенности клиентов и конкретные этапы разговора.
Специальные параметры и показатели. Узнайте, как использовать специальные параметры и показатели в GA4, чтобы обеспечить более детальный анализ ваших взаимодействий в чате. Они могут собирать информацию, соответствующую потребностям вашего бизнеса, например обсуждаемые категории продуктов или сегменты клиентов.
Тестирование и проверка. Тщательно протестируйте свою реализацию, чтобы обеспечить точный сбор данных. Используйте отчеты в реальном времени в GA4, чтобы убедиться, что события отправляются правильно во время тестирования. Постоянно отслеживайте качество данных, чтобы выявлять и устранять любые несоответствия.
|

Справочный портал