深入了解 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 页面上完全包含amp-analytics的所有配置。相反，您可以调用远程 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`（必需）	要发送的请求的名称（如请求中所指定）。
`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 的值将如下所示：

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