14

I am using PJAX https://github.com/defunkt/jquery-pjax and I was wondering since the whole page does not change what would be the best way to track analytics with google analytics?

6 Answers 6

41

The accepted answer is no longer valid because as Ruy Diaz commented, this was removed from PJAX in this commit.

Here is my solution. On the pjax:end event, set the GA location, and send a pageview.

The pjax:end event is used because it is triggered both "upon following a pjaxed link" (loading from server) and "on back/forward navigation" (loading from cache). See pjax events documentation

$(document).on('pjax:end', function() {
    ga('set', 'location', window.location.href);
    ga('send', 'pageview');
});

Or using the old version of GA

$(document).on('pjax:end', function() {
    if( window._gaq ) {
        _gaq.push(['_trackPageview', window.location.href]);
    }
});

I had to manually set the location variable because it wasn't picking up that it changed.

3
17

EDIT: Please note, this is no longer the case. See comment below.

Defunkts jquery-pjax will actually handle this for you by default (for google analytics at least). Essentially whenever a pjax page load gets invoked, it'll tell the gaq object to log the new page.

The code it uses to do so looks like this:

// Google Analytics support
if ( (options.replace || options.push) && window._gaq )
_gaq.push(['_trackPageview'])
1
  • 8
    This is no longer true as of this commit. Now you need to use events to handle the tracking yourself. An example on how to do this using YUI can be found here, and can serve as a guide as to how to implement it with jquery-pjax.
    – Ruy Diaz
    Apr 16, 2013 at 21:28
2

Read this http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html and http://code.google.com/apis/analytics/docs/tracking/asyncMigrationExamples.html

Google Analytics' _trackPageview is a function for use on ga.js tracked sites that allows you to track events on your site that do not generate a pageview. Using the _trackPageview JavaScript, you can assign a specific page filename to Flash events, JavaScript events, file downloads, outbound links, and more, like this _gaq.push(['_trackPageview', '/home/landingPage']);

On successful ajax request you need just to tell GA the 'URL' of the 'page'.

2
  • Thanks, I will have a look at that!
    – chopi321
    Mar 11, 2012 at 20:27
  • 1
    Just as a heads up, although the above code is correct the "jquery-pjax" script already includes code to keep Google analytics updated. Putting your own call in as well could end up with pages getting logged twice.
    – Carl
    Mar 19, 2012 at 13:34
2

The answer of @andrewtweber is almost correct, but pjax:complete is only triggered after page loads, not on restored pages (e.g. navigating using back button).

Thus the event that should be used is pjax:end:

$(document).on('pjax:end', function() {
    ga('send', 'pageview', window.location.href);
});

Or when using the legacy version of Google Analytics:

$(document).on('pjax:end', function() {
   _gaq.push(['_trackPageview', window.location.href]);
});
1

I use PJAX for more than entire page loads and each page load can actually generate several PJAX requests.

To work across the site safely, I submit an event only when the URL changes. This doesn't capture refreshes, but it's better than sending 3x+ hits per page load.

href = window.location.href;

if (window.LAST_GOOGLE_ANALYTICS_LOCATION !== href) {
  window.LAST_GOOGLE_ANALYTICS_LOCATION = href;
  ga('set', 'location', href);
  ga('send', 'pageview');
  console.log("Analytics: sending hit, this is a new url: " + href);
} else {
  console.log("Analytics: not sending hit; same url as before: " + href);
}
0

location.href didn't work for me, I'm using:

ga('send', 'pageview', location.pathname + location.search + location.hash);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.