单页应用衡量

本指南介绍了如何使用 analytics.js 衡量网站上以动态方式加载内容(而不采用传统的整个网页加载方式)的网页活动。

概览

单页应用 (SPA) 指的是在首次加载网页时加载浏览整个网站所需所有资源的网络应用或网站。当用户点击链接并与网页互动时,系统将以动态方式加载后续内容。应用会经常更新地址栏中的网址来模仿传统的网页导航,但始终不会再发出整个网页加载请求。

在传统网站上运行默认的 Google Analytics(分析)代码没有任何问题,因为该代码段在用户每次加载新网页时都会运行。但是,对于单页应用,网站以动态方式加载新的网页内容,而不采用整个网页加载方式,因此 analytics.js 代码段仅运行一次。也就是说,当有新内容加载时,必须手动捕获后续的(虚拟)网页浏览。

跟踪虚拟网页浏览

当应用动态加载内容,并更新地址栏中的网址时,也应更新您的跟踪器上存储的数据。

要更新跟踪器,请使用 set 命令并提供新的 page 值:

ga('set', 'page', '/new-page.html');

在设置了新的 page 值后,发送的所有后续命中都将使用新值。要记录网页浏览,请在更新跟踪器后立即发送网页浏览命中。

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

尽管从技术角度来说,用于网页浏览命中的 send 命令可以采用可选的 page 字段作为第三个参数,但衡量单页应用时不建议采用这种方式传递 page 字段。这是因为并未在跟踪器上设置通过 send 命令传递的字段,这些字段仅适用于当前的命中。如果未更新跟踪器,则当您的应用发送任何非网页浏览命中(例如事件或社交互动)时,将会造成错误,因为这些命中将会与创建跟踪器时包含的任何 page 值关联。

处理同一资源的多个网址

当动态加载内容时,部分 SPA 仅更新网址的 # 部分。这种做法可能导致多个不同网页路径指向同一资源。在此类情况下,通常最好选择一个规范网址并始终只将 page 值发送给 Google Analytics(分析)。

例如,假设有个网站的“关于我们”页面可通过以下任一网址进行访问:

  • /about.html
  • /#about.html
  • /home.html#about.html

为避免报告中出现重复的内容,最好通过 /about.html 捕获所有相关的网页浏览。

重要注意事项

不更新文档引荐来源网址

当您使用 create 命令创建跟踪器对象时,document.referrer 的值存储在跟踪器的 referrer 字段上。对于不采用整个网页加载方式的单页应用,referrer 字段始终保持不变。

尽管如此,也无需在发送网页浏览命中之前,手动更新 referrer 字段。Google Analytics(分析)能自动确定正确的导航路径。

不更新文档位置

与对 referrer 字段使用 document.referrer 的方式相同,跟踪器也对 location 字段使用 document.location,该字段可能会以附加到网址末尾的查询参数的形式包含广告系列数据或其他元数据。

对 Google Analytics(分析)所要检查的任何广告系列字段或其他元数据进行更新,都可能导致现有会话结束并开始一个新会话。为避免此问题,在衡量单页应用中的虚拟网页浏览时,请不要更新 location 字段,应改用 page 字段。

不创建新跟踪器

不要试图通过在单页应用中创建新的跟踪器来模拟 JavaScript 跟踪代码段在传统网站中的处理方式。如上文所述,这样做可能会将不正确的引荐来源网址及不正确的广告系列数据发送出去。