如何为您的 AMP 页面配置基本分析

分析平台通常通过内联 JavaScript 代码片段和函数调用集成到网站中，这些代码片段和函数调用会触发发送回分析系统的事件。AMP 提供了一种灵活的 JSON 配置语法，可以为多个分析合作伙伴复制此过程。

提示 – 如果您使用 Google Analytics 作为分析提供商，请了解 amp-analytics。

Google Analytics 4 和 AMP

有关如何使用 amp-analytics 设置 Google Analytics 4 的信息，请参阅 amp-analytics 开发指南和 AMP 的代码设置文档。

本文档的其余部分主要讨论 Universal Analytics，它已被 Google Analytics 4 取代.

上下文：非 AMP 页面上的分析

以下是传统的 JavaScript 驱动的 Google Analytics 跟踪示例。我们将将其重写为 amp-analytics JSON 格式，但首先，让我们看看传统方法

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//127.0.0.1/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

这个 JavaScript 非常简单；它发送一个通知来跟踪页面浏览事件。

步骤 1：包含 `amp-analytics` 脚本

为了在 AMP 中复制此功能，我们必须首先在文档的 <head> 中包含 amp-analytics 组件库

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

步骤 2：添加配置代码

然后，让我们将 amp-analytics 组件添加到文档 body 的末尾

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

正如本页顶部的 JavaScript 示例一样，此 amp-analytics 代码片段将向 Google Analytics 发送通知，表明页面已被查看。

为了指定这一点，我们将 type 设置为 googleanalytics，然后在 JSON 中创建了一个名为“默认页面浏览”的触发器。当页面可见时（由于 "on": "visible"），此触发器将触发，并且当它触发时，我们将使用我们指定的 vars 向 Google Analytics 发送一个 pageview 分析请求。

用于配置 amp-analytics 的 JSON 是一种非常灵活的格式，用于描述要发送的分析数据以及何时发送。 amp-analytics 包含有关该格式的完整详细信息。

步骤 3：添加更多触发器

在上面的示例的基础上，我们可以添加另一个名为 "点击#header 触发器" 的触发器

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

正如您从这个新触发器的名称中猜到的那样，当单击 ID 为 "header" 的元素时（由 "on": "click" 和 "selector": "#header" 指定），它将触发。当此触发器触发时，我们将向我们的分析提供商发送 event 请求，指定一些变量以包含在请求中。

如果您有要集成的自定义跟踪平台，您仍然可以使用 amp-analytics 并定义自己的个性化 URL 端点以将跟踪数据发送到该平台。请在 amp-analytics 组件参考文档中了解更多信息。

注意 – “UA-YYYY-Y” 是一个 Google Analytics 帐户示例；如果您在您的网站上使用此示例，则应将其替换为您自己的网站的 Google Analytics 跟踪代码。

提示 – 如果您对更简单的跟踪系统感兴趣，您可能需要查看 amp-pixel。如果您只需要跟踪页面浏览量，则 amp-pixel 是比 amp-analytics 更轻量级的解决方案，因为它只旨在解决传统像素跟踪的要求。请在分析：基础知识指南中了解更多信息。