将 Google Analytics（分析）添加到 AMP 网页 | 适用于 AMP 网页的 Google Analytics（分析）

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">
  ...
</amp-analytics>

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

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

网页跟踪

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

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

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

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

值	类型	是否必须提供	说明
`title`	`string`	否	网页的标题（例如“首页”）。默认为 `title`。
`documentLocation`	`string`	否	正在跟踪的网页网址（例如 https://www.ampproject.org/）。默认为 `sourceUrl`。

以下示例将替换 title 和 documentLocation 的默认网页浏览值：

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

事件跟踪

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

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

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

<amp-analytics type="googleanalytics">
<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`	`integer`	否	与事件相关的数值（例如 42）。默认值为 0。

非互动事件

在某些情况下，您可能需要将某个事件作为非互动事件发送。要发送此类事件，请在 extraUrlParams 部分将 ni 参数设置为 "1"：

"extraUrlParams": {
   "ni": "1"
}

有关完整的示例，请参阅扩展 googleanalytics。

社交互动

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

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

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

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

<amp-analytics type="googleanalytics">
<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 参数。这可用于发送预期会随匹配一起发送的自定义维度和自定义指标等参数的值。

例如，您可以通过在 extraUrlParams 部分中加入自定义维度参数（或您希望随匹配加入的任何其他参数）来发送带有网页浏览的自定义维度。可以在单个请求的触发器级别加入此部分，也可以在全局级别加入此部分以随所有请求发送数据。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "extraUrlParams": {
    "cd3": "AMP"
  },
  "triggers": {
    "trackPageviewWithCustomData": {
      "on": "visible",
      "request": "pageview"
    },
    "trackEvent" : {
      "on": "visible",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      },
      "extraUrlParams": {
        "ni": "1"
      }
    }
  }
}
</script>
</amp-analytics>

抽样

使用 AMP 分析，可以像对非 AMP 网页一样向 AMP 网页添加抽样。要对 AMP 网页发送的一个或多个请求执行抽样，您可以使用以下配置以 1% 的比例进行抽样。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageview",
      "sampleSpec": {
        "sampleOn": "${clientId}",
        "threshold": 1
      }
    }
  }
}
</script>
</amp-analytics>

出站链接跟踪

您可以通过注释链接并配置对链接点击次数执行操作的触发器，将出站链接跟踪添加到 AMP 网页上的各个链接。这可以通过两个步骤完成：

添加触发器来跟踪链接点击次数：

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "outboundLinks": {
        "on": "click",
        "selector": "a",
        "request": "event",
        "vars": {
          "eventCategory": "outbound",
          "eventAction": "click",
          "eventLabel": "${outboundLink}"
        }
      }
  }
}
</script>
</amp-analytics>

使用适当数据注释链接：

<a href="http://example.com/page" data-vars-outbound-link="http://example.com/page">Some link</a>

AMP 与非 AMP 流量

由于各种技术限制，默认情况下，AMP 流量使用与网站流量不同的客户端 ID。此外，AMP 网页加载更快，并显示不同的流量模式，从而出现不同的指标。通过单独的媒体资源来衡量 AMP 流量可更好地分析指标并更准确地呈现您的流量信息。如果您使用一个媒体资源同时测量 AMP 和非 AMP 流量，请使用数据源维度或自定义维度来区分它们。默认情况下，Google Analytics（分析）将在数据源维度中发送值“AMP”，该值可以用于在一个数据视图中细分/过滤或分析 AMP 与非 AMP 内容。要配置自定义维度，请参阅扩展 googleanalytics。此外，您还可以借助 AMP 客户端 ID 集成使用适用于跨 AMP 和非 AMP 流量的用户的单个客户端 ID。

示例 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 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">
  <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 的所有参数的列表。