使用 gtag.js 衡量单页应用

本页介绍了如何使用 gtag.js 衡量与网站上以动态方式加载内容(而不采用传统的整个网页加载方式)的网页之间的互动情况。

概览

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

Google 代码可以在传统网站上正常运转,因为该代码段在用户每次加载新网页时都会运行。但是,对于单页应用,网站以动态方式加载新的网页内容,而不是加载整个网页,因此 gtag.js 代码段仅运行一次。也就是说,当有新内容加载时,必须通过人工方式衡量后续的(虚拟)网页浏览。

衡量虚拟网页浏览

当应用动态加载内容并更新地址栏中的网址时,也应该更新通过 gtag.js 存储的页面网址。您还可以将网站地址的变化作为网页浏览进行衡量。

要设置路径 gtag.js 报告,请使用 set 命令为 page_path 参数指定一个值:

gtag('set', 'page_path', page_path);
gtag('event', 'page_view');

例如:

gtag('set', 'page_path', '/new-page.html');
gtag('event', 'page_view');

page_path 添加新值后,发送到该媒体资源的所有后续事件都将使用这一新值。

处理同一资源的多个网址

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

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

  • /about
  • /#/about
  • /home/#/about

为避免报告中出现重复的内容,最好通过为 page_path 添加 /about 来记录所有这些页面。