HTML and CSS Reference
In-Depth Information
} else {
//For IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function() {
if (xhr.readyState==4 && xhr.status==200) {
console.log("Online")
} else {
console.log("Offline")
}
}
xhr.open("GET",fileToPing,true);
xhr.send();
}
testConnection(" http://www.yourdomain.org/1x1.gif " );
</script>
Listing 10-2 creates a method called testConnection , which takes an argument of fileToPing , which is a string
value of the URI you want to ping to check the connection. The function creates an XMLHttpRequest and checks whether
the status is 200 from the server's headers. If so, you know your request to that asset has resolved correctly, and therefore
the user is connected. If you didn't get your 200 response from the server, you'll confidently know the user is offline.
You must allow Access-Control-Allow-Origin on your server for the domain you want to request. for example,
use Access-Control-Allow-Origin: http://yourdomain.com or * , which will allow any origin to access the asset.
Note
The best situation is to use both techniques to get the most information about the user's connection. Also, be sure
to ask whether offline is a mandatory requirement from the publisher and/or advertiser. Whether you use HTML5
or specific “hooks” from API calls to the application's SDK, just be sure to understand the full scope of work up front.
This is crucial information so designers and developers can factor in the added time (if any) that there will be to
develop and design the ad in this manner.
Sometimes files get cached to a browser/device, and you do not want them to be. This could be if you are firing
off third- or fourth-party tracking calls in order to validate metrics. In the event you don't want to allow the caching
of your files, you can use the “cache-bust” method when making those specific HTTP requests to those file locations.
Listing 10-3 showcases how you would do that for firing off a third-party impression 1x1.
Listing 10-3. Cache Busting Example
<!DOCTYPE HTML>
<html>
<head>
<script>
function fireImpression () {
var beacon = new Image ();
beacon.src = " http://tracking.somedomain.com?r= " + cacheBust();
}
 
 
Search WWH ::




Custom Search