Unable to get google analytics to work on my page which uses AJAX to load its pages.

Question

So after a huge headache, I got my site to load its pages all via ajax. The reason being the client wanted it to flow exactly like their old flash site.. duh.

Anyway, everything was dandy, but then I added the google analytics trackers, and it wont load anymore!

So heres how I am doing the ajax:

$("li.home a").click (function() {       
    ajax_load("index.php",this);
    return false;
});
$("li.location a").click (function() {
    ajax_load("location.php",this);
    return false;
});

etc...

function ajax_load(page,element) {

    // deals with making an element active in left nav
    $('#mainnav').find('li.active').removeClass('active');
    $(element).parent().addClass('active');

    // empty the wrapper, then add new content with a fade effect
    $("#wrapper").empty();
    $("#wrapper").css({'display' : 'none'})
    $.ajax({
        type: "POST",
        url: page,
        success: function(msg){            
            $("#wrapper").append(msg);
            $("#wrapper").fadeIn();
        }
    });

    // set the page hash, so we can add these pages to favorites if wanted
    var strLen = page.length;
    page = page.slice(0,strLen-4);
    window.location.hash = page;
}

All the individual pages are php files.. and when they get loaded there is a check at the start of the file to see if its an ajax request. If it is.. it skips the header and navigation to just the content and then skips the footer. this allows it to work when javascript is disabled.

So, to get google analytics to work on ajax page loads I thought I could simply just stick the google tracking code within the area that gets loaded when it is an ajax request...

Well that doesnt work! Right now, the only page with the google anayltics tracking code is the floorplans page so you can see what is happening. Any pointers would be greatly appreciated!

heres the google tracking code im using:

    <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11737385-5");
pageTracker._trackPageview();
} catch(err) {}</script>

// UPDATE //

I believe this should do it, thank you Pekka!

    $.ajax({
    type: "POST",
    url: page,
    success: function(msg){            
        $("#wrapper").append(msg);
        $("#wrapper").fadeIn();
        pageTracker._trackPageview(page);
    }

Answer 1

There is a function you can use, _trackPageview. See the Google Analytics manual:

How do I track AJAX applications?

With a typical HTML page, you can use the URL to differentiate between multiple pageviews. But in an AJAX application, a request to the server is made without changing the URL of the page, making it difficult to track.

By calling the _trackPageview function, however, you can assign a page filename to any AJAX event. Typically, this is done as part of the onreadystatechange function, after the data has been returned and all updates to the page have been made.