Google Analytics：如何在单页应用中跟踪网页？

Question

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

Answer 1

如果您使用较新的analytics.js API，则Google's documentation需要以下代码才能触发事件：

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

如果您使用较早的ga.js API，David Walsh suggests AJAX网站使用_gaq.push方法：

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

Answer 2

我知道这是一个老问题，但由于这个问题首先导致Google在Google Analytics中跟踪pushState（）并且所有答案都错了，我决定回答它。

在其他答案中，他们提到直接使用ga（'发送'.....），但这是错误的做法。

首先，您必须'设置'参数，然后使用'发送'来跟踪它。

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

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

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

如果您想更新网址和标题，请为其添加标题参数

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

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

来源Single Page Application Tracking - Web Tracking (analytics.js)

Answer 3

最近回答（2017）

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

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

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

ga('require', 'urlChangeTracker');

Answer 4

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});

Single page application tracking with gtag.js (Google documentation)

Answer 5

在撰写本文时，2013年9月，
Google Analytics有一个新的JavaScript API。

在您添加了Google的新“ analytics.js ”异步代码段之后，请使用 send pageview命令来跟踪网页：

ga('send','pageview');

在pushState疯狂之后，使用此发送pageview命令来跟踪异步导航。根据{{​​3}}， 发送pageview命令会在发送的那一刻神奇地读取并跟踪pushState给出的新位置 。调用pageview命令，默认情况下使用以下值（尽管您可以指定它们）：

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页面浏览量。

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

我会回复结果，除非我忘了。

Answer 6

2020更新

如果您使用的是Google Analytics 4，并且在增强的测量功能中启用了浏览量选项，则无需再推送事件strong>“数据流” 菜单。

Answer 7

使用 ga('send', 'pageview') 不是在 GA 上注册网页浏览。

对我有用的方法是：

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

我可以在用 history.pushState 更改 url 后使用它。

Answer 8

在使用history.pushState后，我也遇到了ga（＆＃39; send＆＃39;，＆＃39; pageview＆＃39;）;.

解决方法只是使URL明确。 GA（＆＃39;发送＆＃39;＆＃39;网页浏览＆＃39;，＆＃39; /我的URL＆＃39）