通知

G Suite 现已更名为 Google Workspace:提供各种强大工具,助力您的企业取得成功。

AMP 和跟踪代码管理器设置指南

Accelerated Mobile Pages (AMP) 项目是一个开放源代码网络平台,有助于提升网络内容的展示效果。AMP 内置了对 Google 跟踪代码管理器的支持。本文介绍了有关在 AMP 网页上设置 Google 跟踪代码管理器的推荐方法。

要安装适用于 AMP 的跟踪代码管理器,请执行以下操作:

  1. 在跟踪代码管理器中创建 AMP 容器。
  2. 将跟踪代码管理器代码段添加到 AMP 网页。
  3. 在跟踪代码管理器容器中配置代码并发布。

创建 AMP 容器

跟踪代码管理器提供了 AMP 容器类型。请按照以下步骤为您的项目创建新的 AMP 容器:

  1. 帐号屏幕上,点击要使用的帐号所对应的更多操作 (展开)。选择创建容器
  2. 为容器命名。使用描述性名称,例如“example.com - news - AMP”。
  3. 容器使用位置下,选择 AMP
  4. 点击创建

您的容器现已准备就绪。下一步是在 AMP 网页上添加跟踪代码管理器代码。

跟踪代码管理器会提供有关如何以最佳方式添加代码段的信息,您也可以参阅下一部分以获取进一步指导。

添加跟踪代码管理器代码段

创建新的 AMP 容器后,系统随即会显示安装 Google 跟踪代码管理器屏幕。跟踪代码管理器会提供两个代码段。将这两个代码段复制到 AMP 网页上。

注意:如果稍后需要访问相应代码段,请点击“工作区概览”页面顶部的容器 ID 编号,或者依次点击管理安装 Google 跟踪代码管理器

第一个代码段用于将 amp-analytics 组件添加到 AMP 网页中。此代码位于网页 <head> 部分的末尾,且只应在网页上出现一次。

<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
重要提示:仅在网页上没有此代码时进行添加,并确保它在每个网页上仅出现一次。

第二个代码段用于配置 amp-analytics 以使用跟踪代码管理器。请将此代码放在起始 <body> 元素的紧后面。将 GTM-CONTAINER_ID 替换为跟踪代码管理器的容器 ID,或者从跟踪代码管理器界面复制并粘贴整个代码段。

<!-- Google Tag Manager -->
<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 变量名称字段中,输入字段名称(例如“color”)。
  5. 为变量指定一个描述性名称,例如“AMP Variable - color”。
  6. 点击保存

跟踪代码管理器支持的 AMP 代码

该内容对您有帮助吗?

您有什么改进建议?
搜索
清除搜索内容
关闭搜索框
主菜单
11362560912831566312
true
搜索支持中心
true
true
true
true
true
102259
false
false