Tracking Ajax Requests in Analytics

People often complain about tracking Ajax requests in web stats programs. If you are crunching server logs it is a non-issue since all of those requests are seen exactly the same as a ‘normal’ web request. It comes into play with JavaScript based tracking. Google Analytics has a solution:
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 Analytics’ urchinTracker 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. The example below shows one way of doing this:
… http_request.onreadystatechange = sendAlert; http_request.open(’GET’, url, true); http_request.send(null); } function sendAlert() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); urchinTracker(”/pagefilename1″ ); } else { alert(’Error.’); …
The urchinTracker variable (/pagefilename1 in the example above) can be any value, which will be displayed as a page filename in your Analytics reports. Important: if your pages include a call to urchinTracker(), utmLinker(), utmSetTrans(), or utmLinkPost(), your Analytics tracking code must be placed in your HTML code above any of these calls. In these cases the tracking code can be placed anywhere between the opening <body> tag and the JavaScript call.

Tracking Ajax Requests in Analytics

People often complain about tracking Ajax requests in web stats programs. If you are crunching server logs it is a non-issue since all of those requests are seen exactly the same as a ‘normal’ web request.

It comes into play with JavaScript based tracking.

Google Analytics has a solution:

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 Analytics’ urchinTracker 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. The
example below shows one way of doing this:

…

        http_request.onreadystatechange = sendAlert;
        http_request.open(’GET’, url, true);
        http_request.send(null);

}

    function sendAlert() {

        if (http_request.readyState == 4) {

            if (http_request.status == 200) {
                alert(http_request.responseText);

                urchinTracker(”/pagefilename1″ );
            } else {

                alert(’Error.’);

…

The urchinTracker variable (/pagefilename1 in the example above) can be any value, which will be displayed as a page filename in your Analytics reports.

Important: if your pages include a call to urchinTracker(), utmLinker(), utmSetTrans(), or utmLinkPost(), your Analytics tracking code must be placed in your HTML code above any of these calls. In these cases the tracking code can be placed anywhere between the opening <body> tag and the JavaScript call.


October 11th, 2006

Tagged View

Tags Similar

Posts Fresh +

Categories View