HTML and CSS Reference
In-Depth Information
Code Execution
On the heels of optimization, another important practice is code execution. For mobile ads, code execution can be
a nightmare to work with, especially when waiting for page content to load, first, various network conditions and
non-mobile-optimized web content on mobile devices. It's really a game of sequence,checks, and playing traffic cop.
A coworker and friend of mine always calls this “the Dance.” Whether you're checking if DOM elements exist before
calling actions on them or waiting for JavaScript platforms and libraries to download, it's always a debugging process
when your ad tag goes into the live environment. Indeed, this statement really sums up the frustration one can
have when dealing with interpreted code execution in the browser, especially code you have no control over on the
publisher's side. Much as with a new dancing partner, you don't know whether they'll step on your toes.
In the advertising realm, the publisher's page content first has to load, usually as an onload event; then the page
makes a request to the ad server to request the ad content. At this point the ad populates the publisher's page or
designated iFrame. The ad code still has to load all of its ad-dependent files—in this case it could be CSS, JavaScript,
any images, web fonts, and whatever else. Finally, having gotten the go-ahead, our ad experience can than start up.
I've seen this done a number of ways, but no matter how it gets done, there are a lot of steps, especially for ad content
that has to execute quickly! Remember, no one goes online to look at ads, so you have to render quickly and grab a
user's attention while you can. You'll learn that the best sites provide callbacks for ads to begin loading or even load
their ad scripts asynchronously. Listing 8-8 shows my own method of ensuring that all elements have been written to
the page.
Listing 8-8. DOM Element Checker Example
<script>
function adChecker () {
if (document.querySelector("#yourLastDOMElement")) {
initAd();
} else {
setTimeout(adChecker,100);
}
}
function initAd () {
//Ad content starts here
}
adChecker();
</script>
You can see from the code that a function called adChecker is being used. It runs through a conditional to
check whether the ad code's last element is rendered to the page. Once it returns true, the function called initAd
is executed. It will kick things off in our creative. Otherwise, set a timeout function of 100 milliseconds and call the
adChecker function again. This will occur over and over until the ad's markup is fully rendered to the document. This
looping over and over again can be a costly operation, which is why I say the best sites provide callbacks for ads to
hook onto. They are a lot more efficient than this repeating function, especially on mobile.
Mobile Site Events
A common request from clients will be to have the ability to track site events on mobile devices. Site events are
tracking tags placed on an advertiser's web site. When a user views or interacts with an ad and later visits the
advertiser's site, a site event metric is fired, thus showing the ROI that the ad could potentially have made the user go
to the advertiser's URL after taking notice of the ad. Site events traditionally operate on the cookie model for tracking;
 
Search WWH ::




Custom Search