Настроить 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>

Разберем его структуру:

  1. type="googleanalytics": Указывает, что мы используем готовую конфигурацию для платформы от Google.
  2. vars.account: Здесь размещается ваш уникальный идентификатор ресурса (Tracking ID).
  3. 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`) вы задаете сами.

Корректное внедрение аналитики для ускоренных страниц — это не просто техническая формальность. Это основа для принятия взвешенных решений, понимания вашей мобильной аудитории и эффективной оптимизации контента. Потратив время на правильную конфигурацию, вы получите достоверные сведения, которые помогут уверенно развивать ваш проект и достигать поставленных бизнес-целей.