How Do I Ensure Server Request Is Complete Before Page Redirect?

EDIT: Just to clarify, my main question boils down to this: if you issue an AJAX request to some server (in this case Google's), but then the client leaves the page before the serv

Solution 1:

If you redirect before the request completes, it will be cancelled on the client side. meaning, the server may have gotten the post and acted on it, but you will not get the results. if these items are added dynamically you cannot use any onload type of functions. i would imagine the google files your adding will have some type of callback you can use that will redirect you.

edit: if you want to load the script in a way that you will know exactly when it is done loading so you can redirect to another page i would use jquery's $.getScript function. it allows for a callback once the file has loaded then you can redirect instantly api.jquery.com/jQuery.getScript

Solution 2:

For the tracking that depends on __utm.gif, the request shouldn't need to complete for the metrics to work. Once the browser sends the request (with all the params), GA has what it needs. So you just need to make sure that the image request fires.

If this is an interstitial page with no real content, you may be able to do something like check the length of the document's images collection; when length > 0, then you know GA has created the IMG and set its src (thereby triggering the request). Not sure about the details of that collection, but I know stuff like that used to exist; maybe it still does. In that case, a simple setInterval to perform the test and kick off the redirect should suffice.

Edit: Since the GA stuff adds scripts to the document, you can check the DOM structure to see if scripts with the proper src value exist. That may get you closer to chaining the redirect from the right kind of event.

Solution 3:

For the current state of ga.js you can check tracking completing using this code:

(function (global) {

    var listeners = []
        , ImageReworked
        , ImageNative = Image
    ;

    functionstringMatch(haystack, needle) {
        if (typeof needle.valueOf() === 'string' && haystack.indexOf(needle) !== -1) {
            returntrue;
        } elseif (needle instanceofRegExp && haystack.match(needle)) {
            returntrue;
        }
    }

    global.addImageListener = function (url, handler) {
        if (!listeners.length) {
            Image = ImageReworked;
        }
        listeners.push([url, handler]);
    };

    global.removeImageListener = function (url, handler) {
        var newListeners = [];
        listeners.forEach(function (el) {
            if (url.constructor !== el[0].constructor//this will not work for object in different windows
                || el[0].toString() !== url.toString()
                || (handler && handler !== el[1])) {
                newListeners.push(el);
            }
        });
        listeners = newListeners;
        if (!listeners.length) {
            Image = ImageNative;
        }
    };

    ImageReworked = function(w, h) {
        var i = newImageNative(w, h)
        ;

        functionhandler() {
            listeners.forEach(function (el) {
                var url = el[0]
                    , handler = el[1]
                ;

                if (stringMatch(i.src, url)) {
                    handler(i.src);
                }
            });
        }

        if (i.addEventListener) {
            i.addEventListener('load', handler, false);
        } elseif (i.attachEvent) {
            i.attachEvent('onload', handler);
        }

        return i;
    };
})(window);

Usage example:

addImageListener(/__utm/, function (src) {
    var parameters = {};

    window.removeImageListener(newRegExp('__utm'));//see, regexp can be created by new RegExp!

    (foundParameters = src.match(/(\?|&)(.*?\=[^?&]*)/g)) && foundParameters.forEach(function (parameter) {
        var pair = parameter.replace(/^(\?|&)/, '').split('=');
        parameters[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    });
    console.log(parameters);
});

_gaq.push(['_setAccount', gaid], ['_trackPageview']);

But you should always keep in mind that if GA changes their tracking logic, this code will be broken.

You also should add timeout (what if load-event will never occure).

And don't use i.onload, because GA-script override this attribute.