Google Analytics:如何在单页应用中跟踪网页?

时间:2012-03-09 03:28:42

标签: javascript html5 web-applications google-analytics single-page-application

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

8 个答案:

答案 0 :(得分:42)

如果您使用较新的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']);

答案 1 :(得分:22)

我知道这是一个老问题,但由于这个问题首先导致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)

答案 2 :(得分:9)

最近回答(2017)

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

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

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

ga('require', 'urlChangeTracker');

答案 3 :(得分:5)

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)

答案 4 :(得分:1)

在撰写本文时,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是否正确跟踪。

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

答案 5 :(得分:1)

2020更新

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

Enhanced measurement

答案 6 :(得分:0)

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

对我有用的方法是:

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

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

答案 7 :(得分:-1)

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

解决方法只是使URL明确。 GA('发送''网页浏览',' /我的URL&#39)