Настроить Google AMP с отслеживанием в Google Analytics
Настроить Google AMP с отслеживанием в Google Analytics — это ключевая задача для любого веб-мастера, который использует технологию ускоренных мобильных страниц. Без корректной интеграции вы рискуете получать искаженную информацию о поведении посетителей, что приведет к неверным выводам и ошибкам в стратегии продвижения. Эта статья подробно рассматривает процесс подключения и объясняет, как избежать распространенных проблем, чтобы ваши метрики были точными и полными.
Зачем нужна интеграция AMP и сервиса аналитики?
Технология Accelerated Mobile Pages создана для молниеносной загрузки контента на мобильных устройствах. Страницы, созданные с помощью этого фреймворка, часто доставляются читателю не с вашего сервера, а из специального кэша Google (AMP Cache). Это создает техническую сложность: посетитель, переходящий с AMP-версии на основной сайт, может быть воспринят системой аналитики как два разных человека. Это происходит из-за того, что файлы cookie, хранящие идентификатор клиента (Client ID), не могут передаваться между доменом `google.com` (где находится кэш) и вашим собственным доменом из-за стандартных ограничений безопасности браузеров.
Последствия такой ситуации для ваших метрик весьма серьезны:
- Завышенный показатель отказов: Если читатель просмотрел одну AMP-страницу и ушел, это засчитается как сессия с отказом, даже если он провел на ней много времени, читая статью.
- Искаженное число сессий и пользователей: Один и тот же человек будет засчитан дважды, что раздувает статистику и мешает оценить реальный размер аудитории и ее лояльность.
- Некорректное отслеживание пути клиента: Вы не сможете увидеть полный путь посетителя от первого касания на ускоренной странице до совершения конверсии на основном ресурсе. Маркетинговые воронки будут сломаны.
- Потеря атрибуции источников трафика: Переход с AMP-страницы на сайт может быть расценен как новый визит с источником `google.com / referral`, что скроет первоначальный источник, например, органический поиск.
Правильная конфигурация решает эти проблемы, объединяя сессии в единую цепочку и предоставляя целостную картину взаимодействия аудитории с вашим проектом.
Ключевая цель интеграции — обеспечить сквозную идентификацию пользователя на всех версиях вашего сайта: как на ускоренных страницах из кэша, так и на основном домене. Это достигается с помощью механизма AMP Linker, который "пробрасывает" уникальный идентификатор между доменами.
Как правильно настроить Google AMP с отслеживанием в Google Analytics
Процесс интеграции сводится к добавлению специального компонента `amp-analytics` на ваши ускоренные страницы и его правильной конфигурации. Этот компонент отвечает за отправку сведений в различные системы сбора статистики, включая GA. Рассмотрим шаги, которые необходимо предпринять для корректного внедрения.
Базовый компонент `amp-analytics`
Для начала убедитесь, что в секции `<head>` вашей AMP-страницы подключен скрипт компонента. Без него ничего не заработает. Выглядит он следующим образом:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
После этого в тело документа (`<body>`) добавляется основной код для отправки информации. В самом простом виде он фиксирует просмотр страницы. Конфигурация задается в формате JSON.
Конфигурация для отправки просмотров
Минимальный код для фиксации просмотров (pageview) выглядит так. Вам нужно лишь заменить `UA-XXXXX-Y` на ваш идентификатор отслеживания из сервиса аналитики.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Разберем его структуру:
- type="googleanalytics": Указывает, что мы используем готовую конфигурацию для платформы от Google.
- vars.account: Здесь размещается ваш уникальный идентификатор ресурса (Tracking ID).
- triggers: Определяет, при каком условии нужно отправлять сведения. В данном случае `on: "visible"` означает, что запрос будет отправлен, как только страница станет видимой пользователю. `request: "pageview"` — тип отправляемого запроса.
Этот код уже будет работать и собирать информацию о просмотрах. Однако он не решает главную проблему — разрозненные сессии. Для этого нужен следующий шаг.
Решение проблемы с помощью AMP Linker
AMP Linker — это специальная функция в `amp-analytics`, которая декорирует все исходящие ссылки с вашей ускоренной страницы, добавляя к ним параметр с Client ID. Когда посетитель переходит по такой ссылке на ваш основной сайт, скрипт GA считывает этот параметр и использует его для идентификации, вместо того чтобы генерировать новый. Таким образом, сессия продолжается.
Чтобы его активировать, нужно добавить в JSON-конфигурацию блок `linkers`:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
},
"linkers": {
"ampLinker": {
"enabled": true,
"ids": {
"_ga": "${clientId}"
}
}
}
}
</script>
</amp-analytics>
Теперь все ссылки, ведущие с AMP-страницы на ваш домен, будут автоматически получать дополнительный параметр, например: `https://example.com/page?_ga=1.123...` Именно он и обеспечивает "бесшовный" переход для системы мониторинга.
Особенности для Google Analytics 4 (GA4)
Если вы используете новую версию GA4, конфигурация будет немного отличаться. Вместо `account` используется `measurementId`. Код будет выглядеть следующим образом, где `G-XXXXXXXXXX` — ваш идентификатор потока данных:
<amp-analytics>
<script type="application/json">
{
"transport": {
"beacon": true,
"xhrpost": true
},
"requests": {
"pageview": "https://www.google-analytics.com/mp/collect?v=2&tid=G-XXXXXXXXXX&cid=${clientId}&en=page_view&dl=${sourceUrl}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
},
"linkers": {
"ampLinker": {
"enabled": true,
"ids": {
"_gl": "${clientId}"
}
}
}
}
</script>
</amp-analytics>
Обратите внимание, что для GA4 используется другой параметр в ссылке (`_gl` вместо `_ga`) и структура запроса `requests` задается вручную. Это более сложная, но и более гибкая конфигурация.
Проверка корректности работы
После внесения изменений необходимо убедиться, что все функционирует как надо. Существует несколько способов проверить правильность внедрения.
Анализ отчетов в реальном времени
Самый простой метод — зайти в Google Analytics в раздел "Отчеты в реальном времени" -> "Источники трафика". Посетите свою AMP-страницу с мобильного устройства или через эмулятор в браузере. Вы должны увидеть себя в отчете. Затем перейдите по любой ссылке на основной ресурс. Если все настроено верно, ваша сессия не прервется, и вы останетесь в отчетах как тот же самый посетитель.
Проверка URL-адресов
Откройте AMP-версию страницы. Наведите курсор на любую ссылку, которая ведет на ваш сайт. Вы должны увидеть, что к ее адресу браузер готовится добавить параметр `_ga` или `_gl` с длинным значением. Это и есть работа AMP Linker. При переходе по ней, этот параметр должен сохраниться в адресной строке.
Распространенные ошибки и их решение
Даже при следовании инструкции могут возникнуть проблемы. Вот несколько частых ошибок:
- Неправильный идентификатор отслеживания: Банальная опечатка в `UA-` или `G-` коде. Всегда копируйте его прямо из интерфейса сервиса аналитики.
- Забыли включить `allowLinker` на основном сайте: Если AMP-страница добавляет параметр к ссылке, а основной сайт его не "ловит", сессия все равно разорвется.
- Конфликт с другими скриптами: Иногда плагины для CMS (например, для WordPress) могут вмешиваться в процесс и некорректно модифицировать ссылки или код аналитики. Попробуйте временно отключать их для диагностики.
- Блокировщики рекламы и трекеров: Некоторые посетители используют расширения, которые блокируют отправку данных в GA. В этом случае вы просто не увидите их визиты, и это нормально.
Расширенные возможности мониторинга
Кроме просмотров, `amp-analytics` позволяет фиксировать и другие взаимодействия: клики по кнопкам, глубину прокрутки, просмотры видео и многое другое. Это делается путем добавления новых триггеров в конфигурацию.
Отслеживание кликов по кнопке
Предположим, у вас есть кнопка с `id="my-button"`. Чтобы отслеживать клики по ней, нужно добавить новый триггер:
"triggers": {
"trackPageview": { ... },
"trackButtonClick": {
"on": "click",
"selector": "#my-button",
"request": "event",
"vars": {
"eventCategory": "AMP Clicks",
"eventAction": "click",
"eventLabel": "My Button"
}
}
}
Здесь `on: "click"` и `selector: "#my-button"` указывают, что триггер должен сработать при клике на элемент с указанным ID. Запрос `request: "event"` отправляет событие, параметры которого (`eventCategory`, `eventAction`, `eventLabel`) вы задаете сами.
Корректное внедрение аналитики для ускоренных страниц — это не просто техническая формальность. Это основа для принятия взвешенных решений, понимания вашей мобильной аудитории и эффективной оптимизации контента. Потратив время на правильную конфигурацию, вы получите достоверные сведения, которые помогут уверенно развивать ваш проект и достигать поставленных бизнес-целей.