Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Google Analytics to track AJAX requests

I'm changing a big section of a website to use jQuery Address' deep linking AJAX features. I'm using URIs like mysite.com/#!/page1/subpage/ and so on.

I've read a good bit about tracking traffic with the _gaq.push() function, but I was wondering if it was possible to do it in a bit more traditional fashion...

Each AJAX request calls a PHP function that builds a page and returns it in an <HTML> wrapper, which lets me easily define custom page titles and so on.

If I put the analytics code on that page, will jQuery calling that page trigger it to track the visit?

like image 718
jdp Avatar asked Dec 16 '11 20:12

jdp


People also ask

How do I know if AJAX request is successful?

You can check when exactly it returns "success" : // If successful, handle type chaining if ( status >= 200 && status < 300 || status === 304 ) { ... // If not modified if ( status === 304 ) { statusText = "notmodified"; ... // If we have data } else { try { ...

Is AJAX request GET or POST?

GET vs POST in AJAX callsUnless you are sending sensitive data to the server or calling scripts which are processing data on the server it is more common to use GET for AJAX calls. This is because when using XMLHttpRequest browsers implement POST as a two-step process (sending the headers first and then the data).


1 Answers

Well you can use jQuery's AJAX Events to globally listen for AJAX requests and then push an index onto the _gaq array (this seems like the most maintainable approach):

$(document).on('ajaxComplete', function (event, request, settings) {
    _gaq.push(['_trackPageview', settings.url]);
});

Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.

Also note that I have not tested the contents of the arguments passed for global AJAX events.

UPDATE

You can also use $.globalEval() to parse scripts loaded in an AJAX response body: http://api.jquery.com/jquery.globalEval/

success: function(data) {

    var dom = $(data);

    dom.filter('script').each(function(){
        $.globalEval(this.text || this.textContent || this.innerHTML || '');
    });

    $('#mydiv').html(dom.find('#something').html());

}

Source: jQuery - script tags in the HTML are parsed out by jQuery and not executed

like image 144
Jasper Avatar answered Oct 19 '22 22:10

Jasper