Как пользовательские события работают с AMP с помощью Google Tag Manager? - PullRequest
0 голосов
/ 24 февраля 2020

Я уже использую это на всех страницах AMP моего сайта.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

Но мне нужно запускать пользовательские события, используя вышеуказанный метод.

1 Ответ

1 голос
/ 24 февраля 2020

Пожалуйста, go через эти шаги, надеюсь, это поможет. Пожалуйста, примите ответ, если это поможет.

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

1.) Создайте контейнер AMP в диспетчере тегов.

2.) Добавьте тег Фрагмент диспетчера для ваших страниц AMP.

3.) Настройте теги в контейнере диспетчера тегов и опубликуйте sh.

Создание контейнера AMP Диспетчер тегов имеет тип контейнера AMP. Создайте новый контейнер AMP для своего проекта:

1.) На экране «Учетные записи» нажмите «Дополнительные действия (дополнительные)» для учетной записи, которую вы хотите использовать. Выберите Создать контейнер.

2.) Назовите контейнер. Используйте описательное имя, например, «example.com - news - AMP».

3.) В разделе «Где использовать контейнер» выберите AMP.

4.) Нажмите «Создать».

Ваш контейнер готов. Следующим шагом является установка кода диспетчера тегов на ваших страницах AMP.

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

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

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

Второй фрагмент настраивает amp-analytics для использования Tag Manager. Разместите этот код сразу после открывающего элемента. Замените GTM-CONTAINER_ID идентификатором контейнера диспетчера тегов или скопируйте и вставьте весь фрагмент из пользовательского интерфейса диспетчера тегов.

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

Чтобы создать новый тег:

1.) Нажмите Теги, а затем Создать.

2 .) Нажмите «Конфигурация тега» и выберите тип тега из списка поддерживаемых тегов AMP.

3.) Настройте тег с информацией, предоставленной поставщиком тегов.

4.) Нажмите «Запуск» и добавьте одно или несколько условий события, которые вызовут срабатывание тега.

5.) Назовите триггер и нажмите Сохранить.

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

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

 <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>

Чтобы создать пользовательскую переменную в Tag Manager, которая захватывает переменную цвета из приведенного выше кода:

1.) Нажмите Переменные.

2.) В разделе «Пользовательские переменные» нажмите «Создать».

3.) Нажмите «Конфигурация переменной» и выберите «Переменная AMP».

4.) В переменной «Усилитель» Имя поля, введите имя поля (например, «color».)

5.) Дайте переменной описательное имя (например, «AMP Variable - color».)

6.) Нажмите кнопку Сохранить .

...