Интеграция аналитики GA4 AMP основана на теге <amp-analytics>, настроенном с типом googleanalytics. Вы определяете измерения просмотров страниц и триггеры пользовательских событий непосредственно внутри блока конфигурации JSON, встроенного в ваш шаблон AMP HTML. Эта архитектура позволяет страницам AMP отправлять данные напрямую на конечные точки Google Analytics 4, строго соблюдая правила валидации AMP и сохраняя высокую скорость загрузки на мобильных устройствах.
Почему отслеживание пользовательских событий на страницах AMP отличается от стандартных веб-сайтов?
Стандартные веб-страницы обычно выполняют Google Tag Manager или стандартную библиотеку gtag.js для обработки отслеживания. Эти скрипты выполняют пользовательский JavaScript для прослушивания событий DOM, создания полезных нагрузок и отправки запросов. Однако фреймворк AMP запрещает произвольный пользовательский JavaScript, чтобы сохранить строгие бюджеты рендеринга и минимизировать нагрузку на процессор на мобильных устройствах.
Вместо выполнения пользовательских скриптов AMP использует декларативный фреймворк. Вы указываете правила отслеживания внутри структурированного объекта JSON в элементе <amp-analytics>. Базовая среда выполнения AMP интерпретирует эту разметку JSON, прикрепляет прослушиватели событий к целевым элементам DOM и форматирует сетевые запросы к конечным точкам GA4. Захват пользовательского события, такого как клик по призыву к действию или порог прокрутки, требует написания валидной конфигурации JSON вместо добавления встроенных обработчиков JavaScript.
- Скрипты среды выполнения AMP: Тег <script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script> должен находиться в заголовке HTML страницы.
- Идентификатор измерения: В объекте конфигурации vars требуется валидный идентификатор измерения GA4, начинающийся с G-.
- JSON-схема: Полезная нагрузка конфигурации должна следовать строгой синтаксису JSON без неэкранированных кавычек или висячих запятых.
- Селекторы триггеров: Идентификаторы элементов или CSS-классы, на которые ссылаются триггеры кликов, должны существовать в разметке тела.
- Варианты транспорта: Использование маяка или транспорта изображений гарантирует, что запросы аналитики завершатся даже во время быстрой навигации.
Как настроить базовое измерение GA4 внутри тега amp-analytics?
Чтобы начать отслеживание, поместите компонент amp-analytics в тело вашего документа AMP. Укажите type=”googleanalytics” в качестве атрибута в теге компонента. Внутри дочернего тега <script type=”application/json”> объявите свою конфигурацию. Вы должны определить словарь vars, который содержит ваш целевой ga_measurement_id. Автоматическое отслеживание просмотров страниц срабатывает немедленно, когда среда выполнения AMP инициализирует компонент при загрузке пользователем.
Базовая конфигурация обрабатывает общие метрики трафика, такие как местоположение страницы, детали реферера и разрешение экрана. Поскольку страницы AMP работают в ограниченных песочницах или внутри кэшей AMP, идентификаторы клиентов автоматически управляются средой выполнения. Это гарантирует, что непрерывность сеанса остается неизменной, когда пользователи переходят с URL-адресов кэша на исходные домены.
Google одинаково относится к адаптивным веб-страницам и страницам AMP при индексации и оценке поиска.
Google Search Central
Как активировать пользовательские события при кликах по кнопкам AMP и отправке форм?
Отслеживание пользовательских событий в AMP требует добавления объектов в блок triggers вашей настройки JSON. Каждая запись триггера содержит имя триггера, свойство on, указывающее тип взаимодействия, селектор, нацеленный на конкретный элемент, и тип запроса. Например, чтобы отслеживать клик по кнопке формы лида, установите on в значение click, а selector в #submit-btn.
Затем сопоставьте триггер с запросом события. Внутри объекта vars этого конкретного триггера укажите event_name вместе с любыми именами пользовательских параметров, которые вы хотите передать в GA4. Когда пользователь нажимает на целевой элемент, среда выполнения AMP создает HTTP-запрос, соответствующий структуре протокола измерения GA4, и отправляет его в фоновом режиме, не прерывая навигацию пользователя.
- Идентификация целевых элементов: Найдите конкретные имена CSS-классов или идентификаторы элементов для отслеживаемых кнопок, форм или ссылок.
- Определение имен событий: Выберите стандартные или пользовательские имена событий, такие как generate_lead или select_content, которые соответствуют вашей структуре отчетности.
- Создание триггеров JSON: Добавьте выделенную запись внутри блока triggers, используя выбранный селектор элемента.
- Передача параметров события: Включите пользовательские атрибуты, такие как button_location или form_id, в блок переменных триггера.
- Тестирование срабатывания события: Проверьте сетевые запросы в инструментах разработчика браузера, чтобы убедиться, что события правильно отправляют данные полезной нагрузки.
Какие общие параметры пользовательских событий используются при отслеживании AMP?
При отправке событий в GA4 передача контекстных метаданных помогает детализировать взаимодействия пользователей во время отчетности. Стандартные параметры включают заголовок страницы, путь к странице и категории разделов. В конфигурациях JSON AMP вы можете извлекать динамические значения, используя встроенное расширение переменных AMP, такие как ${title}, ${canonicalPath} или ${documentReferrer}.
Для пользовательских событий вы можете передавать пользовательские параметры в объекте vars внутри каждого определения триггера. Например, отслеживание кнопки воспроизведения видео может передавать video_title и video_provider в качестве пользовательских ключей. GA4 регистрирует эти ключи при сопоставлении их как пользовательских измерений в интерфейсе Google Analytics, предоставляя вашей команде богатую информацию о мобильной вовлеченности без выполнения пользовательского JavaScript.
Как Alien Road применяет GA4 Analytics в AMP
В Alien Road наша команда интегрирует пользовательское отслеживание аналитики в шаблоны AMP с помощью систематического рабочего процесса развертывания для клиентских проектов. В типичном взаимодействии мы начинаем с аудита существующих конфигураций тегов для настольных компьютеров, чтобы сопоставить требуемые измерения событий непосредственно со схемами JSON AMP. Это гарантирует, что ключевые метрики совпадают на стандартных адаптивных страницах и мобильных вариантах AMP, не создавая расхождений в отчетности.
На этапе реализации мы создаем пользовательские шаблоны JSON, которые фиксируют критические этапы конверсии, включая отправку контактных форм, нажатия на телефонные ссылки и исходящие клики. Мы внедряем параметры маяка транспорта, чтобы предотвратить потерю данных во время высокоскоростных пользовательских путешествий. После публикации наша техническая команда проводит проверку в живых мобильных браузерах и URL-адресах кэша AMP, чтобы убедиться, что события срабатывают предсказуемо в различных сетевых условиях.
Наконец, мы настраиваем панели мониторинга в реальном времени внутри GA4, чтобы подтвердить, что входящие пользовательские события правильно заполняют стандартные отчеты об исследовании. Поддерживая строгие процедуры проверки схем, мы предотвращаем регрессии отслеживания, когда инженерные команды клиентов обновляют шаблоны сайтов или внедряют новые маркетинговые кампании с течением времени.
Google Search индексирует страницы AMP так же, как и другие веб-страницы, и применяет один и тот же стандарт ко всем страницам, независимо от технологии, используемой для создания страницы.
Google Search Central
Как проверить и отладить пользовательские события GA4 в инструментах проверки AMP?
Проверка вашей конфигурации аналитики является критическим шагом перед развертыванием страниц AMP в производство. Невалидный синтаксис JSON внутри блока <amp-analytics> ломает компонент и полностью предотвращает срабатывание запросов отслеживания. Кроме того, синтаксические ошибки приводят к тому, что страница не проходит проверку AMP, что может удалить страницу из распределения Google AMP Cache.
Для отладки проблем добавьте #development=1 к URL-адресу вашей локальной страницы AMP и откройте инструменты разработчика браузера. Консоль браузера отображает подробные записи журнала из среды выполнения AMP, показывая, загрузилось ли расширение amp-analytics, и перечисляя каждый оцененный триггер. Вы также можете проверить вкладку Сеть, чтобы отслеживать исходящие сетевые вызовы, направленные на google-analytics.com/g/collect, и просматривать параметры, такие как en для имени события и ep.* для параметров события.
С чего начать на этой неделе с вашим мобильным измерением
Начните свою работу по оптимизации с аудита ваших самых эффективных мобильных страниц AMP с помощью инструментов разработчика браузера. Убедитесь, что зависимость <script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script> правильно включена в заголовок документа и что ваше текущее значение ga_measurement_id соответствует вашему активному свойству GA4.
Затем выберите одно ключевое действие пользователя на вашем сайте, например, основную кнопку конверсии, и добавьте простой триггер клика в вашу конфигурацию JSON. Разверните изменение в тестовой среде, активируйте действие вручную и проверьте GA4 DebugView, чтобы подтвердить доставку события. После проверки расширьте разметку JSON, чтобы охватить оставшиеся бизнес-цели во всей вашей библиотеке шаблонов.