CODEWITHSUNDEEP
javascripthtmlweb-applicationsgoogle-analyticssingle-page-application
Derek 朕會功夫
Derek 朕會功夫

Reputation: 94309

Google Analytics: How to track pages in a single page application?

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,

Upvotes: 34

Views: 19716

Answers (8)

Sérgio Junior
Sérgio Junior

Reputation: 309

Using ga('send', 'pageview') was not registering a pageview on GA.

The way that worked for me is:

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

I can use it after changing the url with history.pushState.

Upvotes: 0

vdegenne
vdegenne

Reputation: 13270

2020 Update

If you are using Google Analytics 4 you don't need to push the event anymore IF you enabled the Page views option in the Enhanced measurement feature in Data Streams menu.

Enhanced measurement

Upvotes: 8

ozgrozer
ozgrozer

Reputation: 2042

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.

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

gtag('config', 'GA_TRACKING_ID');

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

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)

Upvotes: 11

GG.
GG.

Reputation: 21834

Recent answer (2017)

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

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

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

ga('require', 'urlChangeTracker');

Upvotes: 9

Nicolo
Nicolo

Reputation: 1650

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.

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

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

// 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)

Upvotes: 25

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94309

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

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:

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

Upvotes: 46

Tiago
Tiago

Reputation: 1

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

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

Upvotes: -1

ChaseMoskal
ChaseMoskal

Reputation: 7651

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

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

  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):

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.

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.

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

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

Upvotes: 0

Related Questions