Thanks for previewing Google's new tag platform documentation! This site is in public beta. (Feedback)

Настройка тегов для AMP

Проект Accelerated Mobile Pages (AMP) – это платформа с открытым исходным кодом, которая помогает ускорить загрузку вашего контента. В AMP есть встроенная поддержка тегов Google.

Установка

Если вы установите глобальный тег, то сможете использовать на AMP-страницах Google Аналитику, Google Рекламу и другие связанные с ними сервисы. При реализации Менеджера тегов создается AMP-контейнер и у вас появляется возможность создавать расширенные конфигурации, а также развертывать сторонние теги из интерфейса Менеджера тегов. Это руководство посвящено тому, как настроить Google Аналитику для AMP-страниц.

Выберите платформу, которой хотите воспользоваться:

Глобальный тег

В теге gtag.js для AMP-страниц используется фреймворк amp-analytics, который позволяет работать с аналитикой. Установив тег gtag.js, вы сможете передавать данные с AMP-страниц в Google Рекламу, Платформу для маркетинга и Аналитику.

Установка

Чтобы настроить gtag.js на AMP-странице, прежде всего убедитесь, что в разделе <head> страницы содержится компонент amp-analytics:

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

Затем добавьте на AMP-страницу глобальный тег как компонент JSON, в раздел <body>. Замените <TARGET_ID> на свой идентификатор конверсии Google Рекламы, идентификатор рекламодателя Google Платформы для маркетинга или идентификатор отслеживания Google Аналитики:

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

Чтобы настроить дополнительные продукты в глобальном теге, не обязательно устанавливать их полные фрагменты кода­ – достаточно добавить нужный идентификатор в объект config. В примере ниже идентификатор конверсии Google Рекламы добавляется в существующую конфигурацию Google Аналитики. Вместо значений <AW-CONVERSION_ID> и <GA_MEASUREMENT_ID> используйте свои идентификаторы.

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

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

Триггеры событий

Чтобы передавать в продукты определенные данные, необходимо настроить триггеры на основе событий, таких как клики. Триггеры для gtag.js в AMP создаются по тем же шаблонам JSON, что и остальные триггеры amp-analytics.

В примере ниже показано, как отправить событие клика в Google Аналитику. Значение selector – это CSS-селектор, позволяющий указать, с каким элементом производится событие. Значение on указывает тип события, в данном случае – click (клик). В разделе vars укажите тип события в элементе event_name и при необходимости добавьте дополнительные параметры.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

Помимо рекомендуемых событий из этого списка вы также можете указать свои собственные.

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

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

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

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

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

Ниже приведен полный рабочий пример кода, который создает AMP-страницу, а затем при нажатии кнопки отправляет в Google Аналитику событие button-click. Вместо значения <GA_MEASUREMENT_ID> укажите действительный идентификатор товара.

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

Устранение неполадок

Проверить настройки тегов можно на странице amptagtest.appspot.com. Вы также можете сами посмотреть URL во всех доменах и убедиться, что в них используется одинаковое значение cid:

  • Удалите все файлы cookie или перейдите в режим инкогнито.
  • Если в файле cookie Google Аналитики отсутствует параметр cid, это будет показано на вкладке "Сеть" в Инструментах разработчика в веб-браузере. Поищите по запросу collect request. В результатах должно присутствовать значение cid.
  • Когда вы перейдете из CDN Google на свой сайт, в параметрах URL должны остаться прежние значения cid и gclid:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
    
  • У финальной целевой страницы должно быть такое же значение cid, как и у изначальной.

  • Будьте осторожны с переадресацией и сменой домена между канонической страницей и целевыми страницами без AMP.