Руководство по настройке AMP и Менеджера тегов

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

Чтобы установить Менеджер тегов для AMP:

Создайте контейнер AMP в Менеджере тегов.
Добавьте фрагмент кода из Менеджера тегов на свои AMP-страницы.
Настройте теги в контейнере Менеджера тегов и опубликуйте.

Как создать контейнер AMP

В Менеджере тегов есть контейнеры типа AMP. Создайте новый контейнер AMP для своего проекта:

В разделе Аккаунты нажмите на значок Ещё () рядом с нужным вам аккаунтом. Выберите Создать контейнер.
Дайте контейнеру понятное название, например "example.com - news - AMP".
В разделе Где будет использоваться контейнер выберите AMP.
Нажмите Создать.

Контейнер готов к использованию. Далее необходимо установить код Менеджера тегов на ваши AMP-страницы.

В Менеджере тегов вы найдете рекомендации по установке фрагмента кода. С подробными инструкциями по его установке можно ознакомиться ниже.

Как добавить фрагмент кода из Менеджера тегов

После создания контейнера AMP вы увидите экран Установить Google Менеджер тегов. Вам будет предложено два фрагмента кода. Просто скопируйте их для последующего добавления на ваши AMP-страницы.

Примечание. Чтобы вернуться к фрагменту кода, нажмите на идентификатор контейнера в верхней части главного экрана рабочей области, либо нажмите Администрировать, а затем – Установить Google Менеджер тегов.

Первый фрагмент кода, который добавляет на вашу AMP-страницу компонент amp-analytics, размещается в конце раздела <head>. На странице должен быть только один такой фрагмент кода.

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

Важно! Перед добавлением этого фрагмента на страницу убедитесь, что он не был добавлен на нее прежде.

Второй фрагмент кода, включающий в себя настройки компонента amp-analytics для использования в Менеджере тегов, необходимо вставить сразу после открывающего элемента <body>. Замените GTM-CONTAINER_ID на идентификатор контейнера в Менеджере тегов. Также вы можете скопировать весь фрагмент кода из Менеджера тегов.

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

Как настроить и опубликовать контейнер

Если вы правильно установили фрагменты кода, контейнер сможет активировать теги, полученные из Менеджера тегов. Далее необходимо создать конфигурации тегов и опубликовать контейнер.

Чтобы создать новый тег, выполните следующие действия:

Выберите Теги Создать.
Нажмите Конфигурация тега и выберите тип тега из списка поддерживаемых AMP-тегов.
Настройте тег в соответствии с инструкциями от поставщика тега.
Нажмите Триггеры и выберите одно или несколько условий, которые приведут к активации тега.
Введите название для триггера и нажмите Сохранить.

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

Переменные страницы

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

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "type": "shoes",
              "color": "red"
          }
      }
  </script>
<AMP-ANALYTICS>

Чтобы создать пользовательскую переменную в Менеджере тегов, которая будет захватывать переменную color из примера выше, потребуется выполнить следующие действия:

Откройте страницу Переменные.
В разделе Пользовательские переменные нажмите Создать.
Нажмите Конфигурация переменной и выберите вариант Переменная AMP.
В поле Название переменной AMP введите название поля (например, color).
Дайте переменной понятное название (например, "AMP Variable - color".)
Нажмите Сохранить.

Дополнительная информация об интеграции AMP-тегов с Google Менеджером тегов

Эта информация оказалась полезной?

Как можно улучшить эту статью?