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

they can even be proxied to your mobile devices for capturing web traffic on smartphones, tablets, and TVs. What's
really great about these HTTP monitoring tools is the ability to validate tracking, reporting, and redirect calls made
from advertisements. It is crucial to do testing to ensure reporting is accurate after a campaign has launched. For
those of you who use Firefox, there is also a free browser plug-in called HTTPFox ( http://addons.mozilla.org/
en-us/firefox/addon/httpfox ) , which essentially does the same thing as Charles and Fiddler but from directly
inside the browser. Another one is the Firefox add-on called Live HTTP Headers ( http://addons.mozilla.org/
en-US/firefox/addon/live-http-headers ) , which allows a user to view the HTTP headers of a page while browsing.
HTTP monitoring can be extremely helpful for mobile debugging since mobile devices currently lack in their native
development tools. For tethering to your device using Charles, take a look at the following steps.
For iDevices, connect to a shared network between your computer and wireless device and go to the settings
on the iDevice. Under HTTP Proxy, select Manual, and enter your computer's IP address into the server spot; then
enter any unused port like 8888 . Next, begin to access mobile Safari or an application (anything with network traffic),
and you'll eventually be prompted by Charles that another service is requesting to use this network as a proxy. Select
Allow, and start using your device while viewing the network traffic on your computer.
Debugging on mobile can be even more problematic when you need to debug advertisements inside of
applications where you don't have native features of browsers such as console logs. When debugging in mobile
applications, you can leverage the power of HTTP requests to trick the calls into being tracing statements to
understand what's happening inside your ad code. A good example of this is creating a dummy image file and
assigning its source to a faux tracking call with some URL parameters for your log statement. The following example
outlines what I'm discussing:
<script>
function adInit() {
var traceImage = new Image();
traceImage.src = " http://yourdomain.com?trace=statement " ;
}
</script>
Now when the function adInit is called, you'll see a request to a dummy URL in your HTTP monitor with the
query param of trace equal to whatever statement you want to output. In this case, this may be the function that kicks
things off in the ad experience, so it could look like the following code snippet (and Figure 10-3 ):
<script>
function adInit() {
var traceImage = new Image();
traceImage.src = " http://yourdomain.com?trace= AD-STARTED ";
}
</script>