CODEWITHSUNDEEP
javascriptjquerygoogle-analytics
chopi321
chopi321

Reputation: 1411

jQuery pjax and google analytics

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?

Upvotes: 14

Views: 4507

Answers (6)

andrewtweber
andrewtweber

Reputation: 25589

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.

Upvotes: 41

Marcelo Boeira
Marcelo Boeira

Reputation: 880

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

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

Upvotes: 0

Carl
Carl

Reputation: 1816

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'])

Upvotes: 17

Koen.
Koen.

Reputation: 27029

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

Upvotes: 2

Yuji 'Tomita' Tomita
Yuji 'Tomita' Tomita

Reputation: 118538

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

Upvotes: 1

Cheery
Cheery

Reputation: 16214

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'.

Upvotes: 2

Related Questions