感谢您预览 Google 的新代码平台文档!此网站为公开 Beta 版。(反馈

适用于 AMP 的代码设置

Accelerated Mobile Pages (AMP) 项目是一个开源网页平台,有助于提升网页内容的展示效果。AMP 内置了对 Google 代码的支持。

安装

添加全局网站代码后,您便可以在 AMP 网页上安装 Google Analytics(分析)、Google Ads 以及相关产品。安装跟踪代码管理器会设置一个 AMP 容器,让您可以通过跟踪代码管理器界面创建高级配置和部署第三方跟踪代码。本指南介绍了如何为 AMP 网页设置 Google Analytics(分析)。

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

全局网站代码

采用 gtag.js 的 AMP 实现利用了 amp-analytics 框架,让您能够对自己的 AMP 网站进行分析。您可以将数据从 AMP 网页发送到采用相同 gtag.js 实现的 Google Ads、DoubleClick 和 Google Analytics(分析)。

安装

若要在 AMP 网页上配置 gtag.js,首先要确保您网页的 <head> 标记中已包含 amp-analytics 组件:

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

接着,添加全局网站代码。将全局网站代码作为 JSON 组件添加到 AMP 网页的 <body> 标记中。将 <TARGET_ID> 替换为相关的 Google Ads 转化 ID、DoubleClick 广告客户 ID 或 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>

若要在全局网站代码中配置其他产品,您无需添加相应产品的整个代码,只需将目标 ID 添加到 config 对象即可。在此示例中是将 Google Ads 转化 ID 添加到现有的 Google Analytics(分析)配置中。将 <AW-CONVERSION_ID><GA_MEASUREMENT_ID> 替换为您自己的产品值。

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

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

事件触发器

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

下面的示例演示了如何将点击事件发送到 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",
        {: "<strong> }}"linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

完整示例

下面的代码示例显示了 AMP 网页的完整操作演示,即创建单个 AMP 网页,并在用户点击按钮时将 button-click 事件发送到 Google Analytics(分析)。将 <GA_MEASUREMENT_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": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_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 传递到客户网站后,应通过网址调整的方式传递 cidgclid 值:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
    
  • 最终着陆页和初始着陆页中的 cid 值仍应相同。

  • 请注意规范网页和非 AMP 着陆页之间的重定向和网域更改。