深入介绍 AMP Analytics（分析）

本指南深入介绍 amp-analytics，我们将一个 amp-analytics 配置示例拆分为以下这些关键组成要素逐个讲解：

本指南的其余部分会使用此配置示例来跟踪网页浏览量和用户点击链接的次数，并将分析数据发送给第三方提供商 Google Analytics（分析）：

<amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "extraUrlParams": {
    "cd1": "AMP"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackAnchorClicks": {
      "on": "click",
      "selector": "a",
      "request": "event",
      "vars": {
        "eventId": "42",
        "eventLabel": "clicked on a link"
      }
    }
  },
  'transport': {
    'beacon': false,
    'xhrpost': false,
    'image': true
  }
}
</script>
</amp-analytics>

上面的示例代码纯粹是为了帮助您学习，绝不是真实示例。如果您正在与分析服务提供商合作，上面的示例便很可能没什么意义；提供商的配置不会这么复杂。请查阅您的分析服务提供商的文档，了解其配置示例。

将分析数据发送到何处：type 属性

AMP 支持两种常见的数据收集模式：

对于内部分析系统，由发布商拥有的端点获取。
对于采用供应商解决方案（例如，Adobe Analytics、 Chartbeat 和 Google Analytics（分析））的网页，由供应商拥有的端点获取。

要将分析数据发送到分析服务提供商，请在 amp-analytics 标记中添加 type 属性，并将其值设为相应的供应商，如分析服务供应商列表中所定义。

例如：<amp-analytics type="googleanalytics"> 会将分析数据发送到第三方分析服务提供商 Google Analytics（分析）。要将数据发送到发布商拥有的端点，只需不添加 type 属性即可；如此一来，对于每项请求，系统都会将分析数据发送到请求中指定的端点。

借助分析服务供应商的配置，您可以快速开始使用 amp-analytics。您应查阅供应商的文档和帮助资源，以获取进一步的指导。如前所述，如果您想了解哪些供应商已与 AMP 集成并获取指向他们各自的文档的链接，请查看分析服务供应商列表。

如果您是分析服务供应商，请详细了解如何将您自己的分析配置集成到 AMP HTML 中。

加载远程配置：config 属性

您不必将所有的 amp-analytics 配置全都添加到 AMP 网页中。您可以改为针对所有配置或部分配置调用远程网址。

这样，您便能执行一些诸如根据具体请求改变配置之类的操作。如果身为发布商的您可以控制远程文件，您就能执行任何必要的服务器端处理来构建配置数据。

加载远程配置的第一步是向 amp-analytics 标记添加 config 属性：

<amp-analytics config="https://example.com/analytics.account.config.json">

下一步是创建位于远程网址上的 JSON 内容。在这个简单的示例中，JSON 对象中包含的配置仅仅是分析工具帐号的变量值。

https://example.com/analytics.account.config.json 中的内容示例：

{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  }
}

最后一步是确保将远程文件中的内容提取到 amp-analytics 配置中的相应位置。在此处的 pageview 和 event 请求中，account 变量值都自动设为远程网址中的帐号值 ("account": "UA-XXXXX-Y")：

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

重要提示：AMP 不会验证同一变量的多种用法。值的填充会遵循变量替换优先顺序，远程网址中的值在该顺序中列在首位（请参阅变量替换顺序）。

requests、triggers 和 transports

requests 属性定义“发送哪些数据”（例如 pageviews、events）以及将这些数据发送到何处（用于传输数据的网址）。

triggers 属性描述应在何时发送分析数据，例如，当用户浏览网页时或当用户点击链接时。

transport 属性指定如何发送请求，更具体地说，即指定协议。

请继续往下读，以详细了解这些配置。（您也可以在 amp-analytics 参考中了解这些配置。）

发送哪些数据：requests 属性

request-name 用于在触发器配置中指定应发送什么请求来响应特定的事件。request-value 是 https 网址。这些值可能会包含可引用其他请求或变量的占位符令牌。

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

某些分析服务提供商（包括 Google Analytics（分析））已提供可供您通过 type 属性使用的配置。如果您正与某个分析服务提供商合作，那么您可能无需添加 requests 信息。请参阅您的供应商文档，以查明是否需要配置 requests 以及如何配置。

附加请求网址：extraUrlParams

extraUrlParams 属性会通过常见的“&foo=baz”惯例指定要向请求网址的查询字符串附加的额外参数。

本指南所用的 amp-analytics 示例向请求添加了额外参数 cd1 并将参数值设为“AMP”：

  "extraUrlParams": {
    "cd1": "AMP"
  }

何时发送数据：triggers 属性

triggers 属性描述何时应发送分析请求。它包含一个由触发器名称和触发器配置构成的键值对。触发器名称可以是由字母数字字符 (a-zA-Z0-9) 组成的任何字符串。

例如，下面这个 amp-analytics 元素被配置为在首次加载文档时以及每次点击 a 标记时向 https://example.com/analytics 发送请求：

"triggers": {
  "trackPageview": {
    "on": "visible",
    "request": "pageview"
  },
  "trackAnchorClicks": {
    "on": "click",
    "selector": "a",
    "request": "event",
    "vars": {
      "eventId": "42",
      "eventLabel": "clicked on a link"
    }
  }
}

重要提示：我们建议仅对 AMP 网页（不对 AMPHTML 广告）采用上述方法。由于 analytics 的优先级低于网页内容的优先级，因此您最好使用浏览器重定向来跟踪点击次数，以免在统计点击次数的过程中发生遗漏。

AMP 支持以下触发器配置：

触发器配置	说明
`on`（必需）	要监听的事件。有效值包括 `click`、`scroll`、`timer` 和 `visible`。
`request`（必需）	要发送的请求的名称（如请求中所指定）。
`vars`	一个包含特定键值对（用于替换在顶层配置中定义的 `vars` 或指定此触发器独有的 `vars`）的对象（另请参阅变量替换顺序）。
`selector`（当 `on` 设为 `click` 时，必需）	一种 CSS 选择器，用于优化应跟踪哪些元素。使用值 `*` 可跟踪所有元素。此配置需与 `click` 触发器结合使用。了解如何使用选择器来跟踪网页点击和社交互动。
`scrollSpec`（当 `on` 设为 `scroll` 时，必需）	控制在哪些条件下滚动网页时会触发 `scroll` 事件。此对象可以包含 `verticalBoundaries` 和 `horizontalBoundaries`，而且必须至少包含其一才能触发 `scroll` 事件。这两个属性的值都应是包含边界的数字数组（据此才能生成滚动事件）。请参阅此跟踪滚动操作的示例。
`timerSpec`（当 `on` 设为 `timer` 时，必需）	控制何时触发 `timer` 事件。定时器会立即触发，之后会按照指定的时间间隔触发。此配置需与 `timer` 触发器结合使用。

重要提示：来自优先级较低的配置的触发器会被来自优先级较高的配置的同名触发器替换（请参阅变量替换顺序。

如何发送数据：transport 属性

transport 属性指定如何发送请求。系统会默认启用下面这三种方法：

传输方法	说明
`beacon`	表示 navigator.sendBeacon 可用于传输请求。此方法会发送 `POST` 请求以及凭据和空正文。
`xhrpost`	表示 `XMLHttpRequest` 可用于传输请求。此方法会发送 `POST` 请求以及凭据和空正文。
`image`	表示可通过生成 `Image` 标记来发送请求。此方法会发送 `GET` 请求。

系统仅会使用一种传输方法，即已启用、已获准、可用且优先级最高的方法。优先顺序为 beacon > xhrpost > image。如果客户端的用户代理不支持某种方法，则系统会使用已启用且优先级次高的方法。

只有希望限制传输选项时，才应在配置中包含 transport 属性，否则您可能会停止请求。

在下面的示例中，beacon 和 xhrpost 被设置为 false，因此即使它们的优先级比 image 高，也不会使用它们。如果客户端的用户代理支持 image 方法，将使用此方法，否则不会发送任何请求。

'transport': {
  'beacon': false,
  'xhrpost': false,
  'image': true
}

变量替换顺序

AMP 按照以下优先级顺序使用值填充变量：

远程配置（通过 config）。
嵌套在 triggers 中某个触发器内的 vars。
嵌套在 amp-analytics 中的顶层 vars。
平台提供的值。

在此示例中，有一个远程配置以及在顶层、触发器中和平台级别定义的变量：

<amp-analytics config="http://example.com/config.json">
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
  },
  "vars": {
    "account": "ABC123",
    "title": "Homepage"
  },
  "triggers": {
    "some-event": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My homepage",
        "clientId": "my user"
      }
  }
}
</script>
</amp-analytics>

在多个位置定义相同的 var 时，变量的优先级顺序会定义一次它的值。因此，如果在上述示例中远程配置将 account 定义为 UA-XXXXX-Y，则各个 var 的值将如下所示：

`var`	值	定义者
`canonicalUrl`	`http://example.com/path/to/the/page`	平台
`title`	My homepage	触发器
`account`	`UA-XXXXX-Y`	远程配置
`clientId`	my user	触发器