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 server completes the request, is it possible (or likely) that the server would abort the request as well, or would the server try to complete the request (in spite of having no one to respond to any more)?
Feel free to read the rest for all the specifics, if you want.
I am using Google Analytics on a page that is meant to immediately redirect. Since the Google javascript file ga.js is loaded asynchronously, I need to make sure that all the script tags that are added dynamically by the javascript are tracked and that the page redirect only happens after those scripts complete. I already handled that part.
The file ga.js seems to make a request to a __utm.gif file with parameters, which is what performs the actual tracking. That request obviously isn’t being made from a file I can control, so here are my questions:
First of all, is the request asynchronous (I suspect it is)? Secondly, how can I make sure that that request has time to complete before I redirect the page (I’d prefer not to simply redirect after “enough time” has passed)? Would the request still complete if the originating page redirected before the request was finished (after all, I don’t need any data back from Google)?
EDIT: Here’s my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Redirecting...</title>
<script type="text/javascript">
/* <![CDATA[ */
// Holds a value for each script. When all the values contained in this array are true, all loading has completed.
var scripts = [];
function scriptDetectLoaded(script)
{
scripts.push({ loaded: false, element: script });
var index = scripts.length - 1;
// Will set this script as loaded
var callback = function ()
{
//console.log("Script with index " + index + " finished loading");
scripts[index].loaded = true;
};
// For most browsers
script.onload = callback;
// For IE
script.onreadystatechange = function ()
{
if (this.readyState == "complete")
callback();
};
return index;
}
/* ]]> */
</script>
<!-- Google analytics code -->
<script type="text/javascript">
/* <![CDATA[ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-MY_ID-1']);
_gaq.push(['_trackPageview']);
(function ()
{
//debugger;
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
scriptDetectLoaded(ga); var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/* ]]> */
</script>
</head>
<body>
<noscript>
<p>Please enable JavaScript and refresh this page. Our site won't work correctly without it.</p>
<p><a href="http://www.google.com/search?q=how+to+enable+javascript" target="_blank">How do I enable JavaScript?</a></p>
</noscript>
<!-- Google Code for New Account Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
//debugger;
var google_conversion_id = SOME_ID;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "SOME_LABEL";
var google_conversion_value = 0;
(function () {
var gad = document.createElement('script'); gad.type = 'text/javascript'; gad.async = true;
gad.src = document.location.protocol + "//www.googleadservices.com/pagead/conversion.js";
scriptDetectLoaded(gad); var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gad, s);
})();
/* ]]> */
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/1056222251/?label=keCSCNO9qAIQq9jS9wM&guid=ON&script=0"/>
</div>
</noscript>
<!-- Redirect Page -->
<script type="text/javascript">
/* <![CDATA[ */
//debugger;
var url = '/console';
var interval = 100 /*milliseconds*/;
var timeout = 5000 /*milliseconds*/;
var count = 0;
// Set a repeating function that checks to ensure all the scripts have loaded.
// Once all the scripts have loaded, redirect the page.
var id = setInterval(function ()
{
count += interval;
// Check for timeout
if (count > timeout)
{
//console.log("Timed out.");
redirect();
}
// Check to make sure all scripts have loaded
for (var i = 0, len = scripts.length; i < len; i++)
{
if (!scripts[i].loaded)
return;
}
// If we make it here, redirect
redirect();
}, interval);
function redirect()
{
location.replace(url);
// Run this in case the page doesn't redirect properly.
clearInterval(id);
var a = document.createElement("a");
a.href = url;
a.innerHTML = "Please click here to proceed";
var p = document.getElementById("message");
p.innerHTML = "";
p.appendChild(a);
}
/* ]]> */
</script>
<p id="message">Please wait as we redirect the page.</p>
</body>
</html>
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