谷歌分析：如何跟踪单页面应用程序中的页面？

Question

目前在我的网站中，我使用了HTML5的pushState()和popState来提高链接速度。然而，这并没有真正改变URL，并且看起来会影响并搞乱Google Analytics的代码。(不显示URL更改) 是否有可能的解决方案？谢谢。

- Derek 朕會功夫

---

事件追踪 - Dagg Nabbit

没关系，我找到了这个。 - Derek 朕會功夫

它确实会改变真实URL。在支持历史记录API的浏览器中，pushState应该会更改地址栏和Location对象中的URL。它不会改变加载的资源，这取决于您自己，而这也是历史记录API的全部意义所在。 - G-Wiz

@gWiz - 我的意思是它不像正常情况下那样请求新页面，脚本也没有重新加载。 - Derek 朕會功夫

这篇文章有最好的解释 https://www.bounteous.com/insights/2018/03/30/single-page-applications-google-analytics/ - Biswadeep Sarkar

Answer 1

如果你正在使用更新的analytics.js API，Google的文档要求使用以下代码来触发事件：

ga('send', 'pageview', '/some-page');

如果你正在使用旧版的 ga.js API，David Walsh建议使用_gaq.push方法来处理 AJAX 网站：

_gaq.push(['_trackPageview', '/some-page']);

- Derek 朕會功夫

---

你可能仍然想了解事件跟踪，它对于“ajaxy”应用很有帮助。你可以追踪比页面浏览更多的内容。 - Dagg Nabbit

如果你只是使用pushState()更改URL，然后调用_gaq.push(['_trackPageview')，这在GA中不起作用吗？ - VinnyG

@VinnyG：一年多后，使用新的analytics.js sdk - 它将正常工作。更多细节请参见我的答案。 - ChaseMoskal

尽管我已经点赞了这个答案，但我认为它有点过时了，正确的答案是由@Nicolo编写的。目前的文档建议先使用“set”命令，然后再使用“send”，例如：ga('set', 'page', '/new-page.html'); ga('send', 'pageview');。 - Geradlus_RU

Answer 2

我知道这是一个老问题，但由于这个问题在谷歌中是关于跟踪pushState()在Google Analytics中的第一个结果，而且所有答案都是错误的，所以我决定回答它。

在其他答案中，他们提到直接使用 ga('send' ..... ) 但这是错误的方法。

首先，您必须“设置”参数，然后使用“发送”进行跟踪。

如果您只想更新网址，请使用以下代码

// set new url 
ga('set', 'page', '/new-page');

// send it for tracking
ga('send', 'pageview');

如果您想更新URL和标题，请将标题参数添加到其中。

// set new url and title
ga('set', {
  page: '/new-page',
  title: 'New Page'
});

// send it for tracking
ga('send', 'pageview');

来源 单页应用跟踪 - 网络跟踪（analytics.js）

- Nicolo

---

可能有点过于苛刻地说 ga('send', 'page', '/new-page'); 是“错误的”。该来源建议使用 'send'，但随后指出，如果您发送其他命中（例如事件或社交命中），则应使用 'set'。 - James

这必须是一个被接受的答案（请参见我的早期评论），直到当前答案不再更新。 - Geradlus_RU

Answer 3

2018年2月更新 - 全局站点标记（gtag.js）

Google Analytics有一个新的跟踪代码片段，因此其他答案可能对gtag无效。

这是默认的跟踪代码。尽管我们尝试在每个URL更改时运行它，但它只会运行一次。

gtag('config', 'GA_TRACKING_ID');

但是通过添加page_path参数，我们可以手动运行GA。

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

我们可以制作类似于这样的东西。

var origin = window.location.protocol + '//' + window.location.host;
var pathname = window.location.href.substr(origin.length);
gtag('config', 'GA_TRACKING_ID', {'page_path': pathname});

使用 gtag.js 跟踪单页面应用程序（Google 文档）

- ozgrozer

Answer 4

最近的答案（2017年）

现在您可以使用 Google的autotrack.js，这是一个增强analytics.js的脚本。

它包括一个插件，自动跟踪单页应用程序的URL更改。

您只需要在html中包含脚本和以下行：

ga('require', 'urlChangeTracker');

- GG.

---

我认为，在需要跟踪页面片段（又称哈希，即#后面的所有内容）的情况下，这种方法是行不通的。 - Dmitri Larionov

Answer 5

2020年更新

如果您正在使用 Google Analytics 4，且在数据流菜单的增强型测量功能中启用了页面浏览选项，则不再需要推送事件。

- vdegenne

---

在该屏幕中，转到设置 > 取消选中“基于浏览器历史事件的页面更改”，然后使用gtag('event', 'page_view', {page_location: '您的URL', page_title: '您的标题'})推送页面视图。 - horas_ro

Answer 6

截至2013年9月，
  Google Analytics有一个新的JavaScript API。

在包含了Google的新的"analytics.js"异步片段之后，使用发送页面视图命令来跟踪页面：

  ga('send','pageview');

在你的pushState混乱之后，使用这个发送页面视图命令来跟踪你的异步导航。根据Google关于使用Analytics.js进行页面跟踪的文档，发送页面视图命令将神奇地读取和跟踪pushState给出的新位置，因为在调用发送页面视图命令时，默认情况下会使用以下值（尽管您可以指定它们）：

var locationToTrack = window.location.protocol+'//'
  +window.location.hostname 
  +window.location.pathname 
  +window.location.search;

var titleToTrack = document.title;

var pathToTrack = location.pathname+location.search;

注意，Google的标准分析代码片段包括一个初始发送页面视图命令。

更新：

我已经按照上述方式在我的网站上实现了Google Analytics跟踪，但似乎没有成功跟踪任何pushState页面视图。

我将尝试在发送页面视图命令中明确指定位置、标题和页面名称，并查看GA是否正确跟踪。

除非我忘记了，否则我会发布结果。

- ChaseMoskal

---

没关系。我测试过了，在历史记录导航后 ga('send','pageview') 不会 发送更新后的URL。 - G-Wiz

@gWiz：我相信我从未使页面浏览跟踪工作，尽管我使用Google Analytics Debugger（一种浏览器扩展程序）确认我的实现正确地将页面浏览量发送到了Google，但这些信息仍然没有被接收到。我最终感到非常沮丧。于是，我退出并离开了Google Analytics。现在，我只是使用cPanel中的awstats :) - ChaseMoskal

Answer 7

使用ga('send', 'pageview')在GA上没有注册页面浏览量。

对我有效的方法是：

window.ga.getAll()[0].set('page', location);
window.ga.getAll()[0].send('pageview');

我可以使用history.pushState更改URL后进行操作。

- Sérgio Junior

Answer 8

我在使用 history.pushState 后，也遇到了 ga('send','pageview'); 的问题。

解决方法很简单，只需要将 URL 显式地指定即可。 ga('send','pageview','/my-url')

- Tiago

---

这似乎不是主要问题的答案，也许更适合作为对ChaseMoskal回答的评论。 - Daan Wilmer