Добавьте Google Аналитику на AMP-страницы

AMP (Accelerated Mobile Pages) – платформа, с помощью которой можно создавать веб-страницы для статического контента с ускоренной загрузкой. Действия пользователей на AMP-страницах отслеживаются при помощи элемента <amp-analytics>, у которого есть встроенная поддержка Google Аналитики.

Как настроить отслеживание просмотров страниц

Чтобы добавить стандартный тег Google Аналитики на свою AMP-страницу, скопируйте фрагмент кода ниже и замените <GA_TRACKING_ID> на идентификатор нужного ресурса. О том, как найти свой идентификатор Google Аналитики, читайте в этой статье.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Принцип работы

Элемент <amp-analytics> – это дополнительный компонент AMP, его можно использовать только как custom-element в коде тега.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Блок элементов <amp-analytics> настроен так, чтобы поддерживать решения Google для отслеживания. Задайте для атрибута type в <amp-analytics> значение "gtag", чтобы обеспечить работу gtag.js, а для атрибута data-credentials – значение "include", чтобы включить файлы cookie.

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP не поддерживает JavaScript, за исключением собственных одобренных библиотек. Поэтому конфигурация выполняется с помощью JSON. Свойство gtag_id с действительным <GA_TRACKING_ID> добавляется в блок vars, а затем идет ресурс config со значением <GA_TRACKING_ID>: {}.

Отслеживание событий

Чтобы отслеживать события на страницах AMP, задайте нужные значения в разделе triggers. В конфигурации триггера используются следующие свойства:

  • selector – CSS-селектор, позволяющий задать целевой элемент;
  • on – тип события;
  • vars – раздел для определения типа события event_name, куда можно также добавить дополнительные параметры.

В примере ниже показано, как настроить простое событие Google Аналитики. Создайте триггер с названием "button", который будет активироваться при нажатии элемента с идентификатором "the-button". Этот триггер будет отправлять в Google Аналитику значение event_name, то есть "login", и значение method, то есть "Google".

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_TRACKING_ID>",
        "config": {
         "<GA_TRACKING_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

События Google Аналитики используются только в этом сервисе и часто применяются при создании отчетов о кампаниях. Значения для них можно задать в разделе "vars" с помощью параметров event_category, event_label и value.

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_TRACKING_ID>",
        "config": {
          "<GA_TRACKING_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": &#123;
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Дополнительную информацию о настройке триггеров вы можете найти в документации по amp-analytics.

Изменение параметров

Чтобы переопределить параметры Google Аналитики по умолчанию или дополнить код новыми параметрами, добавьте нужные значения в раздел parameter блока config. Следующий пример кода переопределяет значения по умолчанию для page_title и page_location.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

Вы можете связать несколько сайтов в разных доменах и отслеживать их как один домен. Задать домены для связывания можно с помощью команды "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Возможность установления связи с вашим каноническим доменом из кеша AMP включена по умолчанию, если на AMP-страницах настроена поддержка Google Аналитики. Чтобы отключить ее, добавьте "linker": "false" в параметры конфигурации:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Трафик на страницах AMP и обычных веб-страницах

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

Используя отдельный ресурс для AMP, вы сможете получать более точные данные о трафике на этих страницах. Если вы работаете с одним ресурсом, обозначьте тип страниц параметром ds или иным специальным параметром.

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

Отладка конфигурации

Узнать, соответствует ли веб-страница спецификации AMP HTML, поможет инструмент AMP Validator. Чтобы включить его, добавьте в URL страницы компонент #development=1.

Провести отладку конфигурации и устранить неполадки поможет расширение amp-analytics, которое выводит предупреждения и сообщения об ошибках. Чтобы включить расширение и просмотреть информацию на панели браузера, добавьте в URL страницы компонент #log=1.

Полный пример

Это пример целой AMP-страницы с одной кнопкой. Конфигурация будет отправлять в Google Аналитику стандартные данные о просмотре страницы и событиях "button-click".

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_TRACKING_ID>",
            "config": {
              "<GA_TRACKING_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>