8.跟踪amp分析

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

以下是传统JavaScript驱动的Google Analytics(分析)跟踪的示例,我们将以amp分析的JSON格式重写。首先是传统的JavaScript方法:

<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>

以上是很简单的,它会发送一个通知来查看浏览事件的跟踪。

要在amp-analytics组件中复制上述所有内容,我们首先将组件库包含在我们文档的<head>中:

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

然后我们按如下来包括组件:

<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>

它可能看起来更复杂,但它实际上是描述几种不同类型事件的非常灵活的格式。此外,JSON格式不包括传统示例中的JavaScript代码块(如果意外更改可能会导致错误)。

在JSON格式中,触发键包括一组代表我们将要跟踪的所有事件触发的键,这些触发的键是事件的描述,例如上面的“默认页面浏览”。标题(title)键值与正在查看的页面的名称有关。

扩展上面的例子我们可以添加另一个触发器“点击#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>

这个触发器正如它的字面意义一样,通过使用DOM选择器“#header”,我们可以查询id为“header”的标签,并且在它被“点击”或在设备上敲击的情况下,我们向分析平台发送一个事件动作“clicked-header”,其类别标签为“examples”。

如果您拥有你希望集成的自定义跟踪平台,您仍然可以使用amp分析功能,并为跟踪信息定义自己的个性化URL端点。了解更多关于amp-analytics的信息!here

注意:在所有这些分析示例中,“UA-YYYY-Y”应替换为您自己的网站的Google Analytics(分析)跟踪代码。

注意:如果您对更简单的跟踪系统感兴趣,您可能需要查看amp-pixel。如果您只需要跟踪页面浏览量,那么它比amp-analytics更轻便,因为它只是为了解决传统像素跟踪的要求。在这里阅读更多!

重要提示:分析组件仍在进行中。随着amp分析组件的发展,将有更多的分析平台和更多类型的事件跟踪。有关最新信息,请参阅参考文件

Last updated