分析平台常常会通过内嵌 JavaScript 代码段和函数调用(可触发会被发回至分析系统的事件)集成到网站中。AMP 提供了灵活的 JSON 配置语法,以便为多个分析合作伙伴复制此过程。

以下是由 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','//www.google-analytics.com/analytics.js','ga');

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

此 JavaScript 代码段非常简单;它通过发送通知来跟踪网页浏览事件。

为了能够在 AMP 中复制此功能,我们必须先在文档的 <head>添加 amp-analytics 组件库:

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

然后,将 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 中创建了一个名为“default pageview”的触发器。此触发器将在网页可见时触发(由 "on": "visible" 引发);当它触发时,我们会使用已指定的 vars 向 Google Analytics(分析)发送 pageview 分析请求。

用于配置 amp-analytics 的 JSON 是一种非常灵活的格式,可用于描述要发送哪些分析数据以及何时发送这些数据。“amp-analytics”页面中的“指定配置数据”部分详尽地介绍了该格式。

在上述示例的基础上,我们可以再添加一个名为 "click on #header trigger" 的触发器:

<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 组件并指定要将跟踪数据发送到的个性化网址端点。有关详情,请参阅 amp-analytics 组件参考文档。