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

Currently in my website, I used HTML5's pushState() and popState in links to increase the speed. However, this doesn't really change the real URL and it looks like it will affect and mess up the Google Analytics's code. (doesn't show a url change) Is there a possible solution for this? Thanks,

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

6 个解决方案

#1

If you are using the newer analytics.js API, Google's documentation requires the following code to trigger the event:

如果您使用的是较新的analytics.js API,Google的文档需要使用以下代码来触发事件:

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

If you are using the older ga.js API, David Walsh suggests AJAX websites to use the _gaq.push method:

如果您使用旧的ga.js API,David Walsh建议AJAX网站使用_gaq.push方法:

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

#2

I know it's old question but since this question is first result in Google about tracking pushState() in Google Analytics and all answers are wrong I decided to answer it.

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

In other answers they mentioned to use directly ga('send' ..... ) but this is wrong way to do it.

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

First you have to 'set' parameters and then use 'send' to track it.

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

If you want to update only url, use following code

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

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

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

If you want to update url and title, add title parameter to it

如果要更新网址和标题,请为其添加title参数

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

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

Source Single Page Application Tracking - Web Tracking (analytics.js)

源单页应用程序跟踪 - Web跟踪(analytics.js)

#3

Recent answer (2017)

You can now use Google's autotrack.js, a script that enhances analytics.js.

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

It includes a plugin that automatically tracks URL changes for single page applications.

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

You just need to include the script and the following line in your html:

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

ga('require', 'urlChangeTracker');

#4

At the time of writing, here in September 2013,
  Google Analytics has a new JavaScript API.

在撰写本文时,2013年9月,Google Analytics提供了一个新的JavaScript API。

After you've included Google's new "analytics.js" asynchronous snippet, use the send pageview command to track pages:

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

  ga('send','pageview');

After your pushState madness, use this send pageview command to track your asynchronous navigation. According to Google's Documentation on Page Tracking with Analytics.js, the send pageview command will magically read and track the new location given by pushState, as it will, in the moment the send pageview command is called, use the following values by default (though you can specify them):

在pushState疯狂之后,使用此send pageview命令来跟踪异步导航。根据谷歌有关使用Analytics.js进行页面跟踪的文档,send pageview命令将神奇地读取并跟踪pushState给出的新位置,因为在调用send 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;

Note, Google's standard analytics snippet includes an initial send pageview command.

请注意,Google的标准分析代码段包含初始发送pageview命令。

Update:

I've implemented Google Analytics tracking on my website in the way above that I described -- however, it does not seem to be successfully tracking any of the pushState page views.

我已经按照上述方式在我的网站上实施了Google Analytics跟踪 - 但是,它似乎无法成功跟踪任何pushState页面浏览量。

I'm going to try specifying the location, title, and page name explicitly on the send pageview command, and see if GA tracks properly.

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

I'll post back with the results, unless I forget.

除非我忘记,否则我会回复结果。

#5

February 2018 Update - Global Site Tag (gtag.js)

Google Analytics has a new tracking code snippet, so the other answers might not work for gtag.

Google Analytics有一个新的跟踪代码段,因此其他答案可能不适用于gtag。

This is the default tracking code. It only runs once even though we try to run it each URL changes.

这是默认的跟踪代码。它只运行一次,即使我们尝试运行它每个URL更改。

gtag('config', 'GA_TRACKING_ID');

But with a page_path parameter we can make GA run manually.

但是使用page_path参数,我们可以手动运行GA。

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

And we can make something like this.

我们可以做这样的事情。

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)

使用gtag.js进行单页面应用程序跟踪(Google文档)

#6

I also had problems with ga('send','pageview');, after using history.pushState.

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

The workaround was simply make the URL explicit. ga('send','pageview','/my-url')

解决方法只是使URL明确。 GA( '发送', '浏览量', '/我的URL')