将 Google Analytics（分析）添加到 AMP 网页

AMP 是一种构建网页快速呈现的静态内容的方式。AMP 包括 amp-analytics 元素，可以让您跟踪用户与 AMP 网页的互动，且它已经内置了对 Google Analytics（分析）的支持。

要详细了解适用于 AMP 网页的 Google Analytics（分析），请参阅 amp-analytics 参考。有关 AMP 的一般性信息，请参阅什么是 AMP？（位于 Accelerated Mobile Pages (AMP) 项目网站）上。

对于 Google Analytics（分析）对于 AMP 网页内置支持的要求和能力，请参阅 Google Analytics（分析）帮助中心中的 Accelerated Mobile Pages (AMP)。

所支持的 Google Analytics（分析）用户互动

amp-analytics 是扩展组件，要加以使用，必须作为自定义元素显式地包含到文档中。要将 AMP 分析功能添加到您的网页，请在 <head> 部分中 AMP JS 库之前加入以下脚本：

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

将 amp-analytics 元素添加到网页的正文。然后，为了启用对 Google Analytics（分析）的内置支持，请将 amp-analytics 元素的 type 属性设置为 googleanalytics。建议加入 id 属性，以便轻松识别每个 amp-analytics 元素（如调试）。

<amp-analytics type="googleanalytics" id="analytics1">
  ...
</amp-analytics>

Google Analytics（分析）配置支持以下触发器 request 值：

用于网页跟踪的 pageview
用于事件跟踪的 event
用于社交跟踪的 social。

网页跟踪

您可以通过网页跟踪来衡量网站上特定网页获得的浏览次数。

将触发器 request 值设置为 pageview，即可发送网页浏览匹配。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

您可以在触发器的 vars 属性中为以下网页浏览字段设置键-值对。

值	类型	是否必需	说明
`title`	`string`	否	网页的标题（例如“首页”）。默认为 `title`。
`ampdocUrl`	`string`	否	要跟踪网页的网址（如 https://www.ampproject.org/）。默认为 `ampdocUrl`。

下面的示例替换了 title 和 ampdocUrl 的默认网页浏览值：

<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithAmpdocUrl": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My page",
        "ampdocUrl": "https://www.examplepetstore.com/pets.html"
      }
    }
  }
}
</script>
</amp-analytics>

事件跟踪

“事件”是指可以独立于网页或屏幕的加载而进行跟踪的用户与内容进行的互动。如果您不熟悉 Google Analytics（分析）中的事件，则应该首先阅读 Google Analytics（分析）帮助中心中的事件简介这篇文章。

将触发器 request 值设置为 event，并设置所需的事件类别和操作字段，即可发送事件匹配。

点击特定元素时，下例使用触发器的 selector 属性发送事件：

<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

您可以在触发器的 vars 属性中为下面的事件字段设置键-值对。

值	类型	是否必需	说明
`eventCategory`	`string`	是	通常是用户与之互动的对象（例如 'Video'）。
`eventAction`	`string`	是	互动类型（例如 'play'）。
`eventLabel`	`string`	否	用于对事件进行分类（例如 'Fall Campaign'）。
`eventValue`	`string`	否	与事件相关的数值（例如 42）。默认值为 0。

社交互动

社交互动分析允许您测量用户进行社交网络相关操作的次数。例如，您可以测量用户对 Twitter 的 “Tweet” 链接的点击。

如果您不熟悉 Google Analytics（分析）中的社交互动，或者对于要为社交网络、操作或目标使用什么值没有把握，您应该首先阅读 Google Analytics（分析）帮助中心中的社交插件和社交互动简介一文。

将触发器 request 值设置为 social，并设置必要的社交网络、操作和目标字段，即可发送社交互动匹配。

点击特定的社交按钮时，下面的示例使用触发器的 selector 属性发送事件：

<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnTwitterLink" : {
      "on": "click",
      "selector": "#tweet-link",
      "request": "social",
      "vars": {
          "socialNetwork": "twitter",
          "socialAction": "tweet",
          "socialTarget": "https://www.examplepetstore.com"
      }
    }
  }
}
</script>
</amp-analytics>

您可以在触发器的 vars 属性中为下面的事件字段设置键-值对。

值	类型	是否必需	说明
`socialNetwork`	`string`	是	发生操作的网络（例如 Facebook、Twitter）。
`socialAction`	`string`	是	发生的操作类型（例如“赞”、“发送”、Tweet）。
`socialTarget`	`string`	是	指定社交互动的目标。此值通常是网址，但也可以是任意文字（例如http://mycoolpage.com）。

扩展 `googleanalytics`

由于对 googleanalytics 配置的基础请求端点是 Measurement Protocol，所以可以随匹配发送更多的 Measurement Protocol 参数。这可用于发送预期会随匹配一起发送的自定义维度和自定义指标等参数的值。

例如，您可以以自定义维度参数（或您想要包含在匹配中的任何其他参数）扩展网页浏览 request，从而通过网页浏览发送自定义维度。可以在 requests 属性中提出这一变动，该属性指定用于将数据传输到分析平台的网址。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "requests": {
    "pageviewWithCd1Cd3": "${pageview}&cd1=${cd1}&cd3=${cd3}"
  },
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageviewWithCd1Cd3",
      "vars": {
        "title": "Classic Cars",
        "cd1": "registeredUser",
        "cd3": "automotive"
      }
    }
  }
}
</script>
</amp-analytics>

示例 AMP 网页

以下是带有 Google Analytics（分析）网页浏览和事件跟踪的示例 AMP 网页。

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMP Analytics</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>

    <script async custom-element="amp-analytics"
        src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>

  <amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
  </amp-analytics>

  <h1 id="header">AMP Page</h1>

  <span id="event-test" class="box">
    Click here to generate an event
  </span>

  </body>
</html>

调试

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

amp-analytics 扩展提供了警告和错误消息，以帮助对配置进行调试和问题排查。消息记录到浏览器的控制台。将 #log=1 添加到网页的网址，可启用记录功能。

自定义

amp-analytics 扩展中对 Google Analytics（分析）的内置支持为衡量用户与您 AMP 网页的互动提供了一种简单的方法。然而，对于更高级的使用情况，您可能希望创建自己的配置，以便发送 Measurement Protocol 中可用的更多字段和匹配类型。

以下资源将帮助您开始使用自定义的解决方案：

amp-analytics 扩展 - 概述了如何从 AMP 文档获取分析数据。
amp-analytics 变量 - amp-analytics 中支持的变量列表。
vendor.js - 此文包含提供给供应商的 request 模板，包括 googleanalytics 模板。可以将 googleanalytics 模板用作参考，以便创建自己的配置。
使用 Measurement Protocol 和参数参考 - 概述了如何使用 Measurement Protocol 和 Measurement Protocol 的所有参数的列表。