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

function buttonClick (event) {
var type = event.target.attributes.value.value;
switch (type) {
case "buttonOne" :
trackClick("clickButton1");
break;
case "buttonTwo" :
trackClick("clickButton2");
break;
}
console.log(type)
}
function AdInit () {
console.log("AdInit : NetworkAccess " + NetworkAccess)
document.removeEventListener("DOMContentLoaded", AdInit);
//set up Ad UI here
document.getElementById('buttonOne').addEventListener('click', buttonClick, false);
document.getElementById('buttonTwo').addEventListener('click', buttonClick, false);
}
document.addEventListener("DOMContentLoaded", AdInit, false);
</script>
Let's review this code. The first thing you do is set up your tracking variables at the top of the script by checking
for NetworkAccess and the important trackingCalls JavaScript object, which stores all the clicks for online use. Next,
at the bottom of the script, you start listening for your DOMContentLoaded event and fire off the adInit function, which
will kick things off; there's nothing new there. Next, if a user clicks buttonOne or buttonTwo within the ad environment,
it will channel through a function called buttonClick , which will take the event parameter and perform a switch/
case for determining which button was clicked. Depending on which event fired, you'll call the function trackClick
and pass in the string value for your button; in this case, it would be either trackClick("clickButton1"); or
trackClick("clickButton2"); . Now if you head up to the trackClick function, you'll notice that the first thing
you do is detect whether the user has network access. If they don't, you simply return the user out of the function.
However, if they do, you set up two new variables called trackingID and clickName , which will house the values
for tracking for which you want to save. When the for loop loops through all the tracking clicks as defined in your
JavaScript object, you can track and send the user to the appropriate URL (if connected) based on their actions.
Now that you understand how to handle offline clicks, let's take a look at user activities from within the ad
experience. Again, this is something local to the ad that you want to report on that doesn't navigate the user away
from the ad experience. It is important to understand interactions such as swipes, touches, video plays, gaming,
and whatever else is important to an advertiser's branding awareness campaign. Take a look at the revised code in
Listing 10-9.
Listing 10-9. LocalStorage Offline Activity Tracking Example
<script>
var NetworkAccess = navigator.onLine;
var trackingCalls = {
'pings': [{
'name': 'touchstart',
'online': '1011-online',