Offline Storage, Tracking, Debugging, and Optimization - HTML5 Advertising - page 239

First users interact online with an ad; throughout the interaction, the network connection gets so poor that the
user is unavoidably offline for a few moments. Since the ad has been cached to the user's device (using ad-serving
device detection), the user doesn't notice that they're actually offline because all the features of the ad are still intact.
The important change here is that every interaction in the ad is trackable; those tracking activities won't find their
way back to the server if the user is offline. That said, you'd need to capture those interactions on the client side before
they're lost forever and you lose out on valuable brand insight. You have a variety of new technologies to leverage
for achieving this using HTML5 and various other APIs, including local storage/session storage or even client-side
databases like WebSQL and IndexedDB, as you'll learn a bit in the following sections. Let's take a look at how you can
attempt to handle offline click tracking with Listing 10-8 using HTML5's localStorage technique.
Listing 10-8. LocalStorage Offline Click Tracking Example
<script>
var NetworkAccess = navigator.onLine;
var trackingCalls = {
"clicks" : [{
"name": "clickButton1",
"online": "1023-online",
}, {
"name": "clickButton2",
"online": "1024-online",
}]
}
function trackClick(name) {
if (!NetworkAccess) {
//No network - clicks won't fire
return false;
} else {
var trackingID;
var clickName;
}
for (var n = 0; n < trackingCalls.clicks.length; n++) {
if (name == trackingCalls.clicks[n].name) {
clickName = trackingCalls.clicks[n].name;
trackingID = trackingCalls.clicks[n].online;
}
}
if (trackingID){
location.href = " http://clicks.someurl.com?clickName= " + clickName + "&trackingID=" +
trackingID + "&r=" + cacheBust();
}
}
function cacheBust () {
var num = Math.random();
return num;
}