使用 gtag.js 进行单页应用跟踪

本页面将介绍如何使用 gtag.js 跟踪网站上以动态方式加载内容(而不采用传统的整个网页加载方式)的网页。

概览

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

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

跟踪虚拟网页浏览

当应用动态加载内容并更新地址栏中的网址时,也应该更新通过 gtag.js 存储的页面网址。

要更新 page_path,请通过为 page_path 参数指定一个值来修改媒体资源的 config

gtag('config', 'GA_TRACKING_ID', {'page_path': '/new-page.html'});

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

处理同一资源的多个网址

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

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

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

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