HTML and CSS Reference
In-Depth Information
As you can see, it's really hard to speak of “best practices” about something that's still emerging. Myself and
various other working group members are working hard to develop a formal overview on HTML5 and advertising.
When the spec becomes final, the IAB will surely update this guideline. (Visit
iab.net/guidelines/508676/508767/
displayguidelines
for more information on this topic.)
Borders
The first ad best practice to cover is that a publisher will normally request that all creatives include a 1-pixel black
border if the ad color is not noticeably different from the page background color. If a 1-pixel boarder around the unit
is needed, all you'd have to do is add CSS on the ads
div
container so its clearly separated from the publisher's page
content.
Tracking
HTML5 ads have the ability to track users, just like publishers have been able to do using Flash. Now agencies can utilize
Google analytics and URL shortening links, such as
Bit.ly
,
which allow for tracking clicks. Ad designers can embed
these free analytics platforms into their creative code and get valuable insight into a user's location, behavior, and
technology. With HTML5 ads, there is much discussion about ad-serving companies using the HTML5 ping attribute
for tracking URLs. That this attribute can store a value and “ping” it to a redirect server is useful for tracking purposes.
(There is more about this at
lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2005-October/004926.html
.)
Click Tags
One specific form of tracking in ads involves what are known as click tags. They allow the ad server to inject specific
values at serve time into the URL destination of a click. (This is very similar to the macro approach outlined in
Listing 3-1.) A click tag can be assigned in multiple ways depending on the ad server, but it's almost always added in
campaign creatives. They can be written in any variation required by the ad server—
clickTAG
,
ClickTag
,
clickTag
, or
something else. Check with your ad-serving provider during creative development so the correct variable is used. Let's
take a look at working with click tags (see Listing 3-10).
Listing 3-10.
A Click Tag Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id='clickBtn1' onClick=window.open(clickTag1)>CLICK HERE!</div>
<div id='clickBtn2' onClick=window.open(clickTag2)>CLICK HERE!</div>
</body>
</html>
As you can see, working with click tags is pretty simple. Depending on the ad server, the URL's location during
development will be
clickTag
and the number you want to use. In this case, there are two, so I simply call them
clickTag1
and
clickTag2
. At ad serve time, the click tag value will be replaced by whatever value is defined at the
ad server. This will keep specific tracking and redirects intact when the creative is sent to various publishers and ad
networks on the media buy.
