AMP 全局网站代码

采用 gtag.js 的 AMP 实现利用 amp-analytics 框架,使您能够对自己的 AMP 网站进行分析。您可以将数据从 AMP 网页发送到采用相同 gtag.js 实现的 Google Ads、Google Marketing Platform 和 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、Google Marketing Platform 广告客户 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_TRACKING_ID> 替换为您自己的产品值。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_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"
    }
  }
}

除了 gtag.js 的推荐事件列表之外,您还可以指定自己的自定义事件。

借助网域链接器,您能够将多个独立网域上的两个或多个相关网站作为一个整体进行衡量。要指定应链接的网域,请使用 "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"] }
      }
    }
  }
}
</script>
</amp-analytics>

从 AMP 缓存链接到规范网域的功能默认处于启用状态。要停用链接网域流量的功能,请在 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(分析)。请务必将 <GA_TRACKING_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_TRACKING_ID>",
            "config": {
              "<GA_TRACKING_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>