适用于 AMP 的代码设置

Accelerated Mobile Pages (AMP) 项目是一个开源网页平台，有助于提升网页内容的展示效果。AMP 内置了对 Google 代码和 Google 跟踪代码管理器的支持。本指南介绍了如何为 AMP 网页设置 Google Analytics（分析）。

安装

借助 Google 代码，您可以在 AMP 网页上安装 Google Analytics（分析）、Google Ads 及其他 Google 产品。Google 跟踪代码管理器会设置一个 AMP 容器，让您可以通过跟踪代码管理器界面创建高级配置和部署第三方跟踪代码。

请使用以下按钮选择您的平台偏好设置：

Google 代码

采用 gtag.js 的 AMP 实现使用了 amp-analytics 框架，让您能够对自己的 AMP 网站进行分析。您可以将数据从 AMP 网页发送到采用相同 gtag.js 实现的 Google Ads、Google Analytics（分析）及其他 Google 产品。

安装

若要在 AMP 网页上配置 Google 代码 (gtag.js)，首先要确保网页上的 <head> 标记中已包含 amp-analytics 组件：

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

接下来，将 Google 代码作为 JSON 组件添加到网页上的 <body> 标记中。将 <TARGET_ID> 替换为您要将数据发往的产品（例如 Google Ads、Google Analytics [分析]）的代码 ID：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

若要在 Google 代码中配置多个产品，您无需添加相应产品的整个代码，只需将目标账号 ID 添加到单独的 config 命令即可。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

如需了解详情，请参阅 amp-analytics 文档。

事件触发器

若要将特定数据发送到您的产品，请根据点击等事件配置触发器。AMP 网页中 gtag.js 的触发器遵循与其他 amp-analytics 触发器配置相同的 JSON 格式。

下面的示例演示了如何将 click 事件发送到 Google Analytics（分析）。selector 值表示 CSS 选择器，可用于指定目标元素。on 值用于指定事件类型，在本例中是 click 事件。在 vars 部分，指定 event_name 中的事件类型，并根据需要添加其他参数。

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

除了推荐事件之外，您还可以指定自己的自定义事件。

链接网域

借助网域链接器，您能够将多个独立网域上的两个或多个相关网站作为一个整体进行衡量。若要指定应链接的网域，请使用 "linker": { "domains": [...] }：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

从 AMP Cache 链接到规范网域的功能默认处于启用状态。若要停用链接网域流量的功能，请在 config 参数中添加 "linker": "false"：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

完整示例

下面的代码示例显示了 AMP 网页的完整操作演示，即创建单个 AMP 网页，并在用户点击按钮时将 button-click 事件发送到 Google Analytics（分析）。将 <TAG_ID> 替换为有效的代码 ID：

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

问题排查

您可以使用 amptagtest.appspot.com 验证代码植入设置，也可以通过执行以下操作来手动确保 cid 值在各个网域之间保持一致：

请务必清除 Cookie 或使用无痕模式。
如果在 Google Analytics（分析）Cookie 中找不到 cid，还可以在网络浏览器的“Network”标签页中进行查看。搜索 collect request，载荷应包含 cid 值。

从 Google CDN 传递到客户网站后，应通过网址调整的方式传递 cid 和 gclid 值：

**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

最终着陆页和初始着陆页中的 cid 值仍应相同。
请注意规范网页和非 AMP 着陆页之间的重定向和网域更改。