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?

Jasper

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

The other answers are outdated (as of 2013)- Google's recommends using their new Universal Analytics

You can track page views asynchronously like this:

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

See: https://developers.google.com/analytics/devguides/collection/analyticsjs/pages#overriding

I use a system that involves requesting the html as plain text, parsing the html first to change all script tags into divs, detach those divs, append the page, then loop through the divs (that are actually scripts) and append their contents to script tags or create script tags with the src on that div. It is very similar to how the history.js framework example does it.

$.get(urlToLoad).promise().done(function(html) {
    var outHTML = html;
    outHTML = outHTML.replace(/<script/ig, "<div class='iscript'").replace(/<\/script/ig, '</script');
    outHTML = $(outHTML);
    var scripts = outHTML.filter('div.iscript').detach();
    $content.html(outHTML);
    scripts.each(function() {
      var $this = $(this), s = document.createElement("script");
      if ($this.attr('src') != "") {
        s.src = $this.attr('src');
      } else {
        s.nodeValue = $this.text();
      }
      $content[0].appendChild(s); // jquery's append removes script tags
    });
}).always(function() {
    $contentclone.replaceWith($content);
    $content.slideDown();
    $contentclone.remove();
});

using this method, you could add the script that does the tracking on each page. I personally prefer to do it on the global page in a way similar to how Jasper suggested.

来源：https://stackoverflow.com/questions/8539897/using-google-analytics-to-track-ajax-requests

标签

jquery

ajax

google-analytics

jquery-address