深入了解 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）。
vars 嵌套在 triggers 中的触发器内。
顶层 vars 嵌套在 amp-analytics 中。
平台提供的值。

在此示例中，存在远程配置，在顶层、触发器和平台级别定义了变量

<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`	我的用户	触发器