将 Google Analytics(分析)添加到 AMP 网页

Accelerated Mobile Pages (AMP) 是一个用于构建可快速呈现静态内容的网页的平台。AMP 包含可衡量用户互动的 <amp-analytics> 元素,且内置了对 Google Analytics(分析)的支持。

基本的网页浏览量衡量设置

要在 AMP 网页上进行基本的 Google Analytics(分析)安装设置,请复制以下代码段并将 <GA_MEASUREMENT_ID> 替换为要使用的媒体资源 ID。(找到您的 Google Analytics(分析)ID。)

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

工作原理

<amp-analytics> 元素是 AMP 扩展组件,已在脚本代码中显式地启用为 custom-element

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

<amp-analytics> 元素块已配置为支持 Google 衡量产品。将 <amp-analytics>type 属性设置为“gtag”(以启用 gtag.js 支持),并将 data-credentials 属性设置为“include”(以启用 Cookie)。

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

除了已批准的自有库之外,AMP 不允许使用任何其他 JavaScript,因此要改用 JSON 执行配置。vars 块中添加了 <GA_MEASUREMENT_ID> 有效的 gtag_id 媒体资源,其下还以值的形式添加了具有 <GA_MEASUREMENT_ID>: {} 的 config 属性。

衡量事件

要衡量 AMP 网页中的事件,请使用包含各种指定值的 triggers。触发器配置中使用的属性如下:

  • selector:用于指定目标元素的 CSS 选择器。
  • on:指定事件的类型。
  • vars:指定 event_name 中的事件类型,并根据需要添加其他参数。

下例演示了如何设置基本的 Google Analytics(分析)事件。该示例会创建一个名为“button”且将在点击 ID 值为“the-button”的元素时触发的触发器。此触发器会将 event_name 值“login”和 method 值“Google”发送到 Google Analytics(分析):

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Google Analytics(分析)事件是 Google Analytics(分析)所特有的事件类别,通常用于生成有关广告系列的报告。可以使用 event_categoryevent_labelvalue 参数在 vars 块中指定这些值:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

要详细了解触发器配置,请参阅 amp-analytics 文档

修改参数

要替换默认的 Google Analytics(分析)参数或添加新的参数,请将所需的值添加到 config 块的 parameter 部分。下面的示例替换了 page_titlepage_location 的默认网页浏览值和事件值:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

借助网域链接器,您能够将多个独立网域上的两个或多个相关网站作为一个整体进行衡量。下面的代码介绍了如何指定应与 "linker": { "domains": [...] } 媒体资源链接的网域:

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

在配置了 Google Analytics(分析)的 AMP 网页中,系统会默认启用从 AMP 缓存链接到规范网域的功能。要停用 Google Analytics(分析)链接网域流量的功能,请在 config 参数中添加 "linker": "false"

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

网站速度

Google Analytics(分析)配置为针对网站流量的一小部分自动收集网站速度数据。您可以更改采样率以收集更多或更少的数据。要将采样率设置为 100%,请将突出显示的代码添加到您的配置中:

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

要停止收集网站速度数据,请使用突出显示的代码:

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

AMP 与非 AMP 流量

默认情况下,AMP 流量使用的客户端 ID 与网站流量的不同。与对应的标准网页相比,AMP 网页的加载速度更快,显示的流量模式也不同,这通常意味着您在 AMP 流量和非 AMP 流量上获得的指标也将有所不同。

使用单独的媒体资源来衡量 AMP 流量,可更好地分析指标,更准确地揭示您的流量信息。如果您确实需要使用一个媒体资源同时测量 AMP 流量和非 AMP 流量,请使用数据源维度或自定义维度加以区分。

默认情况下,Google Analytics(分析)会通过数据源维度发送值“AMP”。请使用此值对一个数据视图中的 AMP 内容与非 AMP 内容进行细分、过滤或分析。

调试配置

您可以使用 AMP 验证工具确定相关网页是否符合 AMP HTML 规范。将 #development=1 添加到网页的网址即可打开该验证工具。

amp-analytics 扩展组件可提供警告和错误消息,帮助对配置进行调试和问题排查。请将 #log=1 添加到网页的网址,以查看网络浏览器的控制台中记录的错误消息。

完整示例

此示例演示了页面上只包含一个按钮的完整 AMP 网页。此配置会将标准网页浏览量数据和“button-click”事件发送到 Google Analytics(分析):

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <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>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>