Перейти к содержанию

События учебного сайта в GA4

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

Рассмотрим установку на собственном учебном сайте читателя. В analytics-lab сохраняются документы markdown и xml, маршрут reading-demo и схема версии 1. Подключение настоящего ProfessorWeb, создание аккаунтов и получение реальной статистики не являются выполненными этапами нашего примера. Документация GA4 проверена на 10 октября 2026 года.

Ресурс и поток сайта

Для сайта в GA4 создаётся ресурс и веб-поток данных, после чего устанавливается Google tag выбранным способом. Владелец получает собственный идентификатор потока измерения. Он связан с назначением данных, поэтому примерный идентификатор из учебного текста не должен использоваться как готовая настройка рабочего сайта. Настройка Analytics для сайта.

Полный код установки берите из своей панели или официальной инструкции выбранного способа. Если сайт использует менеджер тегов, не добавляйте поверх него ещё одну независимую установку по привычке. Для нашего маленького проекта достаточно одного понятного пути. Общий шаблон должен включать его на обеих статьях и сохранять после пересборки.

При работе с собственным ресурсом запишите часовой пояс, адрес потока, включённые автоматические измерения и режим тестирования. Эти параметры понадобятся для объяснения расхождений. Статистика не приобретает одинаковый смысл только потому, что интерфейсы обеих платформ называют строки «событиями» или «пользователями».

Панель и права доступа со временем меняются. Урок задаёт сущности и ожидаемый результат настройки, а не выдуманный скриншот вашего аккаунта. Если нужное действие недоступно, сначала проверьте роль и актуальную справку своего ресурса. Не создавайте дубликат ресурса только ради появления знакомой кнопки из старого руководства.

Наше событие и просмотр страницы

GA4 может собирать page_view через установленный tag. Наше lesson_open имеет другое определение: это открытие подготовленного учебного документа с ID и параметрами маршрута. Одна загрузка способна вызвать оба события. Они не являются двумя независимыми просмотрами материала, и их сумма не используется в нашей таблице открытий.

Предположим, Markdown был открыт один раз. В диагностике появилось стандартное событие просмотра и пользовательское событие lesson_open. Ожидаемый смысл такого результата — два разных наблюдения одной загрузки. Если отчёт по всем событиям показывает сумму два, она не отвечает на вопрос о числе открытий учебной статьи. Для этого нужна выбранная строка и правильная метрика.

Автоматические события взаимодействия тоже требуют отдельного чтения определения. Наличие готового измерения прокрутки не доказывает понимание содержания. Для информационного сайта оно может помочь исследовать расположение блока, но не заменяет активацию следующего шага, скачивание исходника или обратную связь по задаче.

В нашем договоре три пользовательских события остаются раздельными. У перехода есть исходный и целевой ID, у активации исходника — ID текущей статьи. Разделение облегчает отчёт, однако не гарантирует наличие каждого параметра во всех стандартных представлениях панели. Для параметров, которые нужны в пользовательском анализе, изучите порядок настройки специальных определений своего ресурса.

Явный адаптер

Подготовим полный assets/ga4-sink.js. Как и адаптер Метрики, он принимает уже проверенное событие. Google tag должен быть установлен отдельно; функция не создаёт ресурс, не загружает библиотеку и не подставляет идентификатор чужого потока.

export function makeGa4Sink({debug = false} = {}) {
  return event => {
    if (typeof window.gtag !== "function") {
      throw new Error("Google tag bootstrap is unavailable");
    }
    const {event_name, ...parameters} = event;
    if (debug) parameters.debug_mode = true;
    window.gtag("event", event_name, parameters);
  };
}

Для отдельной практики импортируйте setAnalyticsSink из events.js, makeGa4Sink из этого файла и явно установите полученный приёмник. Флаг диагностики включается только для соответствующего сценария. Он не является способом автоматически исключить всякий тестовый трафик из обычной статистики: фильтры и условия ресурса изучаются отдельно.

Установите приёмник до выполнения article-events.js: начальный lesson_open создаётся при загрузке обработчиков. В единственном входном модуле сначала вызовите setAnalyticsSink(makeGa4Sink({debug: true})) для диагностического сценария, затем await import("./article-events.js"). Статический импорт обработчиков в начале файла выполнится раньше установки приёмника; первое сообщение тогда попадёт в первоначальный локальный журнал. При замене способа подключения удалите отдельный тег обработчиков из HTML. В рабочем режиме адаптер создаётся без диагностического флага.

Если вы исследуете обе платформы, вызовы должны быть организованы намеренно. Последовательные вызовы setAnalyticsSink заменяют приёмник, а не создают их список. Для одновременной передачи определите составной приёмник, который вызывает каждый выбранный адаптер один раз. При этом сравнивайте отчёты отдельно; один посетитель не превращается в двух людей из-за двух провайдеров.

Установленная функция gtag обычно использует очередь команд. Поэтому отсутствие немедленного сетевого запроса не равнозначно отсутствию вызова. Локальное событие pw:analytics, передача tag и обработанная строка платформы остаются разными наблюдениями. В следующем уроке мы построим контрольный сценарий для каждого уровня.

Ключевое действие

В актуальной терминологии GA4 ключевым называют событие, важное для результата проекта. Оно выбирается из событий, которые ресурс собирает. Рекламная конверсия имеет отдельное назначение, связанное с измерением рекламной деятельности; эти названия не следует механически смешивать. События, ключевые события и конверсии.

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

Сначала проверьте само событие и его определение. Только затем отмечайте выбранное действие как ключевое. Если повторная инициализация отправляет его дважды, новая метка не устранит повтор. Напротив, ошибка станет заметнее в отчётах, потому что будет влиять на показатель результата. Поэтому порядок «определение → проверка → использование» полезен и здесь.

Диагностический результат

DebugView предназначен для наблюдения событий в режиме диагностики. Для нашего примера ожидается lesson_next с article_id=markdown и target_article_id=xml. Это ожидаемая структура, а не снимок полученного отчёта ProfessorWeb. Наличие события в диагностике нужно сопоставить с режимом отправки и выбранным устройством. Наблюдение в DebugView.

Если событие видно, а параметра нет, сначала исследуйте сформированный объект, затем адаптер и поддерживаемое отображение панели. Если стандартный просмотр есть, а lesson_open отсутствует, установка tag может быть исправной, но ваш модуль не выполнился. Это разные неисправности, и повторная установка всего Analytics может добавить проблему вместо её устранения.

Для будущей проверки сохраните исходный HTML, способ установки и договор событий. После обновления общего шаблона сравнивайте подключение на старой и новой статье. Важен одинаковый смысл отправляемых действий, а не одинаковое число строк в разных интерфейсах. Теперь можно перейти к контролю доставки и увидеть, на каком именно уровне теряется ожидаемое наблюдение.