深入了解 AMP 分析

本指南深入介绍 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 页面中。相反，您可以调用远程 URL 来获取全部或部分配置。

这允许您执行诸如根据特定请求改变配置之类的操作。如果您作为发布者拥有远程文件的控制权，您可以执行任何必要的服务器端处理来构建配置数据。

加载远程配置的第一步是在 amp-analytics 标记中包含 config 属性

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

下一步是创建驻留在远程 URL 中的 JSON 内容。在此简单示例中，JSON 对象中包含的配置只是分析帐户的可变值。

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

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

最后一步是确保远程文件中的内容被提取到 amp-analytics 配置的适当位置。在 pageview 和 event 请求中，account 可变值会自动设置为远程 URL 中的帐户值（"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 不会针对同一可变值的多次使用进行验证。值会按照可变替换优先级顺序填充，并且远程 URL 中的值位于该顺序的顶部（请参阅可变替换顺序）。

请求、触发器和传输

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

triggers 属性描述何时应发送分析数据，例如，当用户查看页面时，当用户点击链接时。

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

继续阅读以了解有关这些配置的更多信息。（您还可以在 amp-analytics 参考中阅读有关这些配置的信息

发送哪些数据：requests 属性

request-name 用于触发器配置中，以指定应响应特定事件发送哪个请求。request-value 是一个 https URL。这些值可能包含可以引用其他请求或可变值的占位符标记。

"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 以及如何配置。

附加请求 URL：其他 URL 参数

extraUrlParams 属性指定要通过通常的“&foo=baz”约定附加到请求 URL 的查询字符串的其他参数。

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 广告。由于分析优先级低于页面上的内容，因此建议使用浏览器重定向来跟踪点击次数，以避免点击丢失。

AMP 支持以下触发器配置

触发器配置	说明
`on`（必需）	要侦听的事件。有效值为 `click`、`scroll`、`timer` 和 `visible`。
`request`（必需）	要发送的请求的名称（如 requests 中指定）。
`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，则各种 vars 的值将如下所示

`var`	值	定义方式
`规范网址`	`http://example.com/path/to/the/page`	平台
`标题`	我的主页	触发器
`帐户`	`UA-XXXXX-Y`	远程配置
`客户端 ID`	我的用户	触发器