Отправка пользовательских событий в Google Tag Manager и Analytics

[Discourse]

Продолжение обсуждения из Интеграция Google Tag Manager с Google Analytics:

Отправка пользовательских событий в Google Tag Manager и Google Analytics

В этом руководстве объясняется, как настроить ваш сайт Discourse для отправки пользовательских событий в Google Tag Manager (GTM) и Google Analytics, что позволит отслеживать конкретные взаимодействия пользователей.

Требуемый уровень доступа пользователя: Администратор

Предварительные требования

Перед реализацией пользовательских событий убедитесь, что у вас есть:

1. Настроенный Google Tag Manager на вашем сайте Discourse, следуя руководству Настройка Google Tag Manager для аналитики
2. Добавленный ID контейнера GTM в настройку gtm container id вашего сайта
3. Обновленная настройка content security policy script src вашего сайта для разрешения скриптов Google

Добавление пользовательских событий

Создание компонента темы

1. Перейдите в Администрирование > Настройка > Компоненты
2. Нажмите «Создать» и выберите «Создать новый компонент»
3. Дайте вашему компоненту имя
4. Выберите вкладку JS и добавьте свой код. Например, код ниже перехватывает триггеры appEvent и отправляет следующие события в dataLayer:

• post:liked
• post:created
• topic:created

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  window.dataLayer = window.dataLayer || [];

  // Отслеживание лайков постов
  api.onAppEvent("page:like-toggled", (post, likeAction) => {
    let topic = post.topic;
    if (post && topic && likeAction && likeAction.acted) {
      window.dataLayer.push({
        'event': 'postLiked',
        'postId': post.id
      });
    }
  });

  // Отслеживание новых постов
  api.onAppEvent("post:created", post => {
    if (post) {
      window.dataLayer.push({
        'event': 'postCreated',
        'postId': post.id
      });
    }
  });

  // Отслеживание новых тем
  api.onAppEvent("topic:created", (post, composerModel) => {
    if (post) {
      window.dataLayer.push({
        'event': 'topicCreated',
        'topicCategory': composerModel.get("category.name"),
        'topicId': post.topic_id
      });
    }
  });
});

5. Сохраните компонент
6. Добавьте компонент во все активные темы вашего сайта

Доступные события

Все доступные триггерные события перечислены здесь: Справочник триггеров AppEvents

Настройка GTM

Создание триггера

1. Перейдите на https://tagmanager.google.com/
2. В боковом меню выберите «Триггеры»
3. Нажмите «Создать»
4. Дайте имя вашему триггеру
5. Выберите тип триггера «Пользовательское событие»
6. Введите имя события (например, postCreated)
7. Настройте триггер на срабатывание при «Все пользовательские события»

Создание переменной Data Layer

1. В боковом меню GTM выберите «Переменные»
2. В разделе «Пользовательские переменные» нажмите «Создать»
3. Дайте имя вашей переменной
4. Выберите тип переменной «Переменная Data Layer»
5. Введите имя переменной Data Layer (например, postCreated)
6. Установите версию Data Layer на «Версия 2»

Создание тега Google для отслеживания событий

По состоянию на 2024 год рекомендуемый подход — использовать новый шаблон «Google Tag» вместо устаревшего типа тега «Google Analytics: GA4 Event». Тег Google обеспечивает лучшую интеграцию с GA4 и включает встроенную поддержку режима согласия v2.

1. В боковом меню GTM выберите «Теги»
2. Нажмите «Создать»
3. Дайте имя вашему тегу (например, «GT - Создан пост»)
4. В разделе «Конфигурация тега»:
   • Выберите «Google Tag»
   • Выберите вашу конфигурацию GA4 (или создайте новую, если это ваш первый тег)
   • В поле «Имя события» введите описательное имя, соответствующее правилам именования GA4 (например, post_created)
   • В разделе «Настройки конфигурации» нажмите «Добавить строку», чтобы включить переменные data layer:
     • Параметр конфигурации: (например, postId)
     • Значение: Ваша переменная data layer (например, {{postCreated}})
5. В разделе «Триггеры»:
   • Выберите ранее созданный триггер пользовательского события

Если вы в настоящее время используете теги «Google Analytics: GA4 Event», они продолжат работать, но для новых реализаций следует использовать шаблон «Google Tag» для лучшей совместимости и функциональности в будущем.

Требования к именам событий

У GA есть специфические требования к именам событий:

• Используйте snake_case (строчные буквы с подчеркиваниями)
• Максимальная длина 40 символов
• Могут содержать только буквенно-цифровые символы и подчеркивания

Тестирование вашего тега Google

1. Нажмите кнопку «Предпросмотр» в GTM
2. Перейдите на ваш сайт Discourse
3. Выполните действие, которое хотите отслеживать (например, создайте пост)
4. В режиме предпросмотра GTM:
   • Убедитесь, что ваше пользовательское событие отображается в левой панели
   • Проверьте, что ваш тег Google сработал корректно
   • Подтвердите, что все параметры передаются как ожидается
5. В Google Analytics:
   • Перейдите в Конфигурация > События
   • Ваше пользовательское событие должно появиться в списке после срабатывания
   • Примечание: появление новых событий в отчетах GA4 может занять до 24 часов

Вы можете использовать GA4 DebugView для просмотра данных событий в реальном времени во время тестирования.

Устранение неполадок

Если вы не видите события в GTM:

1. Проверьте, что ID контейнера GTM правильно указан в настройках Discourse
2. Убедитесь, что компонент темы добавлен во все активные темы
3. Добавьте инструкции console.log для проверки срабатывания событий:

api.onAppEvent("post:created", post => {
  console.log("post:created event triggered");
  if (post) {
    window.dataLayer.push({
      'event': 'postCreated',
      'postId': post.id
    });
  }
});

4. Используйте расширение Chrome Simple Data Layer Viewer для мониторинга data layer
5. Если вы видите ошибки политики безопасности контента (CSP), обратитесь к вышеуказанным предварительным требованиям и ознакомьтесь с Mitigate XSS Attacks with Content Security Policy для дальнейших шагов.

Если у вас настроена настройка сайта ga universal tracking code, очистите её, так как GTM будет обрабатывать скрипт отслеживания.

[MarkDoerr]

Мы обновили эту тему, чтобы отразить изменения, которые претерпели GTM и GA с момента её первоначальной публикации. Мы также удалили комментарии, так как многие из них ссылались на устаревшую информацию.