深入了解 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，则各个变量的值将如下所示

`变量`	值	定义者
`canonicalUrl`	`http://example.com/path/to/the/page`	平台
`title`	我的主页	触发器
`account`	`UA-XXXXX-Y`	远程配置
`clientId`	我的用户	触发器