HTML and CSS Reference
In-Depth Information
Listing 3-2.
A Media Query Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="base.css" />
<link rel="stylesheet " media="all and (orientation:portrait) " href="tablet_portrait.css">
<link rel="stylesheet " media="all and (orientation:landscape) " href="tablet_landscape.css">
<link rel="stylesheet" media="tv" href="tv.css" />
</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 $MACRO$
</script>
</html>
Since doing this obviously takes additional development and design time, make sure your team is aware; use this
method only when you know your ad will be running across publishers that require a responsive layout. (For more
■
in htML5 doc parsers, it is no longer required to include
type="text/javascript"
; this is now assumed by
default. thus, writing
<script></script>
will now work.
Note
Responsive ads have time to grow before they become a reality. It comes down to how publishers and ad servers
gather metrics on an ad—and that can change. This is a bit of a paradigm shift in thinking; traditionally, ad servers
and publishers bill clients based on impressions and break down the ads that account for those impressions into
size categories to get a more granular look into the campaign's performance. However, if you have one ad tag on the
page and allow the creative to resize and do a relayout accordingly, no other tags need to be accounted for. This is a
dream for ad ops guys or gals—they don't have to worry about which tag goes to which property on which distribution
channel. No matter if it's a smartphone, tablet, desktop, or television—its all the same tag, and so operational scale on
ad trafficking is a huge win! However, clients will surely want to learn what size ad was getting the most views, as this
will help determine the user base of screens accessing the ad. The following model (see Listing 3-3) helps break this
down a bit more; it allows the tag to track one major campaign impression and fire off supplementary impressions
based on the creative size rendering to the user's screen.
Listing 3-3.
A Responsive Ad Example
var publisherSize;//Get this value from the publisher's page.
window.addEventListener('load', function () {
//fire off uber impression
var img = new Image()
img.src = '
http://imptracker.adserver.com
'
;
//Pass publisher's layout to the checkSize function
checkSize(publisherSize);
}, false);
