自定义事件如何使用 Google 标签管理器与 AMP 配合使用？

Question

我已经在我网站的所有 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>

但我需要使用上述方法触发自定义事件。

Answer 1

请完成这些步骤，希望它会有所帮助。 如果有帮助，请采纳答案。

要为 AMP 安装标签管理器：

1.) 在标签管理器中创建一个 AMP 容器。

2.) 将标签管理器代码段添加到您的 AMP 页面。

3.) 在您的标签管理器容器中配置标签并发布。

创建 AMP 容器 Tag Manager 具有 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 配置为使用标签管理器。 将此代码立即放置在开始元素之后。 将 GTM-CONTAINER_ID 替换为您的跟踪代码管理器的容器 ID，或从跟踪代码管理器用户界面复制并粘贴整个代码段。

配置您的容器并发布当您的页面正确安装了容器代码段后，它们将能够触发从跟踪代码管理器部署的代码。 下一步是创建标签配置并发布容器。

要创建新标签：

1.) 单击标签，然后单击新建。

2.) 单击标签配置并从支持的 AMP 标签列表中选择标签类型。

3.) 使用标签供应商提供的信息配置标签。

4.) 单击触发并添加一个或多个将导致代码触发的事件条件。

5.) 命名触发器并单击保存。

对任何其他标签配置重复这些步骤。 当您的容器配置准备就绪后，发布您的容器以使更改生效。

页面变量 Tag Manager 可以捕获 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.) 在放大器变量名称字段中，输入字段名称（例如“颜色”。）

5.) 为变量指定一个描述性名称（例如“AMP 变量 - 颜色”。）

6.) 单击保存。