HTML and CSS Reference
In-Depth Information
Listing 3-1. An Example of an Ad-Serving Macro
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
#clickBtn {background-color:#000; width:100px; height:20px; color:#FFF; cursor:pointer;}
</style>
</head>
<body>
<div align="center" id="clickBtn" data-link= $MACRO$ onClick=window.open(macroValue)>Open Macro</div>
</body>
<script type="text/javascript">
var macroValue = document.getElementById('clickBtn').getAttribute('data-link') //returns value to be
replaced by ad server
</script>
</html>
At ad serve time, the $MACRO$ value gets replaced by what the ad server defines. This case could have something
that states $MACRO$ = http://www.google.com or http://www.bing.com . In short, the rules for the data attribute state
that any attribute that starts with “data-” will be treated as a storing area that the end user won't see. Again, this is
pretty valuable when you're trying to specify explicit information about an element without changing its look or feel.
HTML5 Considerations
It should be noted that HTML5's new markup additions are a huge step forward in assistive technologies in that they
allow machines to better interpret the structure of the document for parsing and interpretation. However, as ads tend
to live only for the life of their campaign, usually a couple months at most, it's frequently better to deliver ads within
a good ol' common div tag with specific IDs and classes applied. I've found that that's the commonest approach of
publishers and ad networks anyway.
It should also be noted that each publisher will have its own implementations for constructing ad inventory
throughout its web content. That being said, the best advice I can give is to reach out to the publisher directly to learn
whether they're using HTML5 elements, a div with overflow set to none , or even an iFrame as the ad's wrapper
element. While this may not be a huge concern for every campaign, the more complex and interactive campaigns
may require manipulation of the site's elements or busting out of an iFrame so this information can be vital. For more
information on what HTML5 building blocks to use, or if you are just a bit confused by all of this, take a peak at the
image in Figure 3-3 from html5doctor.com .
 
Search WWH ::




Custom Search