Accelerated Mobile Pages (AMP) 项目是一个开放源代码网络平台,有助于提升网络内容的展示效果。AMP 内置了对 Google 跟踪代码管理器的支持。本文介绍了有关在 AMP 网页上设置 Google 跟踪代码管理器的推荐方法。
要安装适用于 AMP 的跟踪代码管理器,请执行以下操作:
创建 AMP 容器
跟踪代码管理器提供了 AMP 容器类型。请按照以下步骤为您的项目创建新的 AMP 容器:
- 在帐号屏幕上,点击要使用的帐号所对应的更多操作 ()。选择创建容器。
- 为容器命名。使用描述性名称,例如“example.com - news - AMP”。
- 在容器使用位置下,选择 AMP。
- 点击创建。
您的容器现已准备就绪。下一步是在 AMP 网页上添加跟踪代码管理器代码。
跟踪代码管理器会提供有关如何以最佳方式添加代码段的信息,您也可以参阅下一部分以获取进一步指导。
添加跟踪代码管理器代码段
创建新的 AMP 容器后,系统随即会显示安装 Google 跟踪代码管理器屏幕。跟踪代码管理器会提供两个代码段。将这两个代码段复制到 AMP 网页上。
第一个代码段用于将 amp-analytics 组件添加到 AMP 网页中。此代码位于网页 <head>
部分的末尾,且只应在网页上出现一次。
第二个代码段用于配置 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>
配置容器并发布
在正确添加了容器代码段后,网页将能够触发从跟踪代码管理器部署的代码。下一步是创建代码配置并发布容器。
要创建新代码,请执行以下操作:
- 依次点击代码 新建。
- 点击代码配置,然后从支持的 AMP 代码列表中选择代码类型。
- 利用代码供应商提供的信息配置代码。
- 点击触发条件,然后添加可触发代码的一个或多个事件条件。
- 为触发器命名,然后点击保存。
对任何其他代码配置重复上述步骤。在容器配置准备就绪后,发布容器以使更改生效。
网页变量
跟踪代码管理器可以捕获 AMP 变量并将其用于代码和触发器配置。例如,销售鞋子的网页可能具有描述某款鞋子特性的变量。这些值可用于创建以下跟踪代码管理器变量:
<script type="application/json ">
{
"vars" : {
"type": "shoes",
"color": "red"
}
}
</script>
</amp-analytics>
要在跟踪代码管理器中创建用户定义的变量,以便从上述代码中捕获颜色变量,请执行以下操作:
- 点击变量。
- 在用户定义的变量下,点击新建。
- 点击变量配置,然后选择 AMP 变量。
- 在 AMP 变量名称字段中,输入字段名称(例如“color”)。
- 为变量指定一个描述性名称,例如“AMP Variable - color”。
- 点击保存。