Посібник із налаштування Менеджера тегів для сторінок AMP

Проект Accelerated Mobile Pages (AMP) – це веб-платформа з відкритим кодом, створена для покращення ефективності веб-вмісту. У AMP передбачено підтримку Менеджера тегів Google. У цьому документі описується рекомендований спосіб налаштування Менеджера тегів Google на сторінках AMP.

Щоб установити Менеджер тегів для AMP:

  1. Створіть контейнер AMP в Менеджері тегів.
  2. Додайте фрагмент менеджера тегів на сторінки AMP.
  3. Налаштуйте теги в контейнері Менеджера тегів і опублікуйте його.

Створіть контейнер AMP

Менеджер тегів містить тип контейнера AMP. Створіть новий контейнер AMP для свого проекту.

  1. На екрані Облікові записи натисніть Інші дії (Більше) для потрібного облікового запису. Виберіть Створити контейнер.
  2. Назвіть контейнер. Використовуйте описові назви, наприклад, "example.com – новини – AMP".
  3. У розділі Де слід використовувати контейнер виберіть опцію AMP.
  4. Натисніть Створити.

Тепер контейнер можна використовувати. На наступному етапі необхідно додати код Менеджера тегів на сторінки AMP.

Менеджер тегів надасть інформацію про те, як найкраще встановити фрагмент коду. Подальші інструкції також можна отримати в наступному розділі.

Додайте фрагмент Менеджера тегів

Коли ви створите контейнер AMP, з’явиться екран Установити Менеджер тегів Google. Менеджер тегів надасть два фрагменти коду. Скопіюйте ці фрагменти коду й вставте їх на сторінки AMP.

Примітка. Щоб знайти фрагмент коду згодом, натисніть номер ідентифікатора контейнера вгорі сторінки огляду робочої області або виберіть Адміністратор, а потім – Установити Менеджер тегів Google.

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

<!-- Тег Analytics для AMP --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Важливо. Цей код слід додати на сторінку, якщо його ще немає, і він має відображатися на сторінці лише раз.

Другий фрагмент налаштовує компонент "amp-analytics" для використання Менеджера тегів. Розмістіть цей код одразу після початкового елемента <body>. Замініть елемент GTM-CONTAINER_ID ідентифікатором контейнера Менеджера тегів або скопіюйте та вставте весь фрагмент з інтерфейсу Менеджера тегів.

<!-- Менеджер тегів Google -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

Налаштуйте контейнер і опублікуйте його

Якщо на ваших сторінках правильно встановлено фрагмент контейнера, вони можуть запускати теги з Менеджера тегів. Далі потрібно створити конфігурації тегів та опублікувати контейнер.

Щоб створити новий тег:

  1. Натисніть Теги а потім Створити.
  2. Натисніть Конфігурація тегів і виберіть тип тегу зі списку підтримуваних тегів AMP.
  3. Налаштуйте тег згідно з інформацією, наданою постачальником тегів.
  4. Натисніть Активація та додайте одну чи кілька умов події, які запускатимуть теги.
  5. Введіть назву активатора та натисніть Зберегти.

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

Змінні сторінки

Менеджер тегів може реєструвати змінні 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>

Щоб у Менеджері тегів створити користувацьку змінну, яка реєструє змінну кольору з указаного вище коду:

  1. Виберіть Змінні.
  2. У розділі Користувацькі змінні натисніть Створити.
  3. Натисніть Конфігурація змінної та виберіть Змінна AMP.
  4. У полі Назва змінної AMP введіть назву поля (наприклад, "колір".)
  5. Введіть описову назву змінної (наприклад, "Змінна AMP – колір".)
  6. Натисніть Зберегти.

Теги AMP з підтримкою Менеджера тегів

Чи корисна ця інформація?
Як можна її покращити?