.Rich Media HTML5 Creative Template.
.NOVEMBER 2012.
IAB Mobile Rising Star.
.Adhesion.
.HTML5 Build Guide.
Introduction.
The IAB Mobile Rising Star Adhesion format (also known as Footer to Fullscreen), specifically developed to be used on
mobile devices (smartphones in particular) but flexible enough to also be used and served within a desktop environment,
allows you to create an impacting creative always visible on the device screen and with the capability to expand to
full-screen for a comprehensive rich-media experience.
In its collapsed state the creative is positioned at the bottom of the page as a footer (or Floor Ad) and the user is able to
expand it to obtain a full-screen experience, thus allowing the possibility of viewing videos, image galleries, multiple
buttons and any other HTML5 powered rich-media feature, also adapting the layout to the device orientation.
A preview of a Adhesion creative can be found here.
Take a look at the official page about IAB Mobile Rising Stars formats here .
Overview.
Download the sample template files for Adhesion from here.
The format is composed by two parts:
1.. The footer, which has a size of 320x50 pixels (the standard size for a mobile footer). Nevertheless, you’re obviously
free to resize it as you see fit.
2.. The expanded full-screen panel, which is 100% wide and high. Actually, the template files provided just have a 100%
wide\height background image, while the actual content is included in a “safe area” which is 320x420 pixels (for the
portrait orientation layout) or 480x260 pixels (for the landscape orientation layout).
Using a fixed-width “content safe area” is a very common practice in mobile development to be sure that the core
content of your ad is viewed in the same way across different screen sizes: see how it keeps the layout consistent in the
example below, while the background image takes advantage of the full screen and gives an equally pleasant experience
to the user.
Nevertheless, if you don’t want to use “safe areas” you can change the CSS properties of the creative (e.g. to switch to
proportional sizes to adapt to different screen sizes).
.Template File Structure.
File name
Description
adhesion.html
Main creative HTML file. All your content goes here. Edit
to add your content as described below.
adhesion.css
Main CSS file to style the main, mandatory parts of the
layout. You shouldn’t need to edit this.
custom.css
Custom CSS file to style the additional parts of the
content of the HTML file. Use this file for your custom CSS
code.
adhesion.js
Main JavaScript file to handle the main logic of the format.
You shouldn’t need to edit this.
custom.js
Custom JS file to handle all the additional actions of your
creative. Use this file for your custom JS code.
collapsed.jpg
Template background image for the collapsed creative
(footer). Replace with your own artwork.
fullscreen_portrait.jpg, fullscreen_landscape.jpg
Template background images for portrait\landscapre
layouts. Replace with your own artwork.
video1.mp4, videothumbnail.jpg
Template video file (and thumbnail image). Replace with
your own assets.
closebutton.png, google_32.png, facebook_32.png,
email_32.png, twitter_32.png
Template graphic assets for the buttons. Add\edit\replace
with your own assets.
The template provided with this formats and this guide gives you the possibility to add a videoplayer and a set of
buttons with different clickthrough actions to the expanded full-screen panel. Obviously this is just one example of
layout, but you have complete freedom to design your own content exactly the way you want it. Of course, please keep
web standards and accessibility in mind when you do so but feel free to use third-party mobile frameworks or write your
own JavaScript when using and adding to this template.
.Build.
.& Delivery.
As in any other HTML5 creative you’ll put content in the HTML file, define how it looks in the CSS file and how the user can
interact with it in the JavaScript file.
1.. Content: adhesion.html
The HTML file has 2 sections, reflecting the two parts (footer and full-screen panel) presented above.
See in the following lines how you can edit the template code:
<!­­ Collapsed panel (footer) ­­>
<section id="collapse­container">
<div id="collapse­background"></div>
The first part of the “collapsed panel” section includes the background div, which in file custom.css will have a background
image assigned. Usually there’s no enough “space” in the 320x50 stage of the footer to add more content than a static
image, but this doesn’t mean that you can’t do it!
<button id="collapse­background­exit"></button>
This is the button (which covers the whole footer) which triggers the “collapsed exit” to bring the user directly to a landing
page. You can edit what happens when clicking on this exit throught the code in the javascript files (as with any other
action of the creative).
<button id="expand­button">FIND OUT MORE!</button>
</section>
This is the button which triggers the expansion to full-screen of the creative. It is styled in the CSS file. Of course it has an
higher z-index than the exit button.
<!­­ Expanded panel (full­screen) ­­>
<section id="expand­container">
<button id="expand­background­exit"></button>
This is the button which triggers the “background exit” for the expanded, full-screen panel.
<button id="close­button"></button>
This button adds the traditional “close” button to the full-screen panel. It is styled like in most full-screen ads (a white X in
a black circle) so you shouldn’t need to edit it, but you can do it playing with the CSS settings or with the
“closebutton.png” file.
<div id="expand­content">
The “safe area” of the expanded panel, as described above.
<div id="video­container">
<video id="video1">
<source id="video­1­mp4­src" type="video/mp4" src="video1.mp4" />
</video>
</div>
This code use the native HTML5 video tag to add a videoplayer to the expanded panel. In the javascript file there’s code
that adds tracking functionalities. Feel free to remove this part (and, obviously, the corresponding code in the custom JS
and CSS files) if you don’t need any video player.
<button id="website­button">VISIT THE WEBSITE</button>
<button id="button1"></button>
<button id="button2"></button>
<button id="button3"></button>
<button id="button4"></button>
A set of buttons added to the expanded panel. The code in the custom CSS file sets their style (in this template, the 4
generic buttons become E-mail, Google+, Facebook and Twitter icons), while the code in the custom JS file defines what
happens when they’re clicked.
</div>
</section>
Once again: this template provides some demo content, but you are free to change it completely
adding\removing\editing any of the elements (even if we suggest you to leave at least the <section> and <div> tags
intact as you’ll problably need to preserve the basic behaviour of the creative).
2.. Style: adhesion.css, custom.css
The code of the CSS files is very simple to understand: any element put in the HTML file, identified through its id, is
stylized and positioned. It also handles different settings depending on the device orientation using CSS media queries.
For example, the video-container style is defined through with the following code in file custom.css (as the video player is
part of the custom and not mandatory content)
#video1­container {
position: absolute;
width: 240px;
height: 135px;
background­color: #FFF;
border: 3px solid #c172f;
z­index: 500;
}
but it also has some more code added, in cascade, through media queries, so that it’s positioned in a different part of the
safe area depending on whether the device is oriented as “portrait” or “landscape”:
/* Portrait */
@media all and (orientation:portrait) {
#video1­container {
top: 50%;
left: 50%;
margin­top: ­95px;
margin­left: ­120px;
}
}
/* Landscape */
@media all and (orientation:landscape) {
#video1­container {
top: 50%;
left: 50%;
margin­top: ­40px;
margin­left: ­230px;
}
}
3.. Behaviour: adhesion.js, custom.js
The following code from file custom.js defines how we listen for the click of the user on the “Website Exit” button to
perform the corresponding actions (triggers the exit for the landing page and calls the function to collapse the expanded
panel).
dcrm.websiteBtn = document.getElementById('website­button');
[...]
dcrm.websiteBtn.addEventListener('click', dcrm.websiteExitHandler, false);
[...]
dcrm.websiteExitHandler = function (e) {
Enabler.exit('Website Exit');
dcrm.stopVideo();
dcrm.collapseAd();
}
There is similar code for every element of the HTML file (in file custom.js), plus some additional code which handles the
initial setup of the creative and its behaviour on expand and collapse (in file adhesion.js, which you shouldn’t need to
edit).
You can obviously add any custom Rich Media metric using Counters, Timers and Exits.
See this article on our Help Center. for more information.
Upload to.
DoubleClick Studio.
Follow these simple steps to upload the creative to DoubleClick Studio
1.. Create a new creative of type Floating.
2.. Upload all the files of your creative.
3.. Check that all your exits, counters and timers are tracked in the Events tab.
4.. In the Preview tab open the “Display Options” window: set Width to 320px, Height to 50px (these should be set
automatically, but check them especially if changed the original size), Position X to 50% and Position Y to -200px (it’s
just a temporary positioning to hide the creative until the proper dynamic “footer” position kicks in).
5.. To preview your creative, insert this URL in the proper field of the Preview tab, and click on the links you will see to
open a simulation of a mobile page in your browser (portrait\landscape mode):
http://motifcdn2.doubleclick.net/EMEA/ad-in-a-box/IAB-Adhesion/studiotestpage.html.
NOTE: This is needed because the standard Studio preview doesn’t include the fundamental companion script which must be included in
DFA to be served together with the creative (see Additional Notes below). Using this custom preview URL the script is added to the page,
but please note that you’ll have a proper, complete preview only when the tag is generated and trafficked.
6.. Publish your creative!
Additional.
Notes.
Serving this creative from DFA requires your Trafficker to make additional very important ad settings - an additional
external Javascript file hosted on our servers, which handles the communication between the creative and the hosting
webpage, needs to be linked to the creative.
In particular, this URL needs to be added in the Survey URL field of the creative in DFA:
http://motifcdn2.doubleclick.net/EMEA/ad-in-a-box/IAB-Adhesion/adhesion_survey.js.
Please make sure to add notes to your publishing message in Studio to remind the trafficking team about this.
NOTE: Javascript tags need to be used; iFrame tags don’t support correctly this HTML5 format.
.Resources.
>. [DEMO] IAB Mobile Rising Star Adhesion
>. [TEMPLATE FILES] IAB Mobile Rising Star Adhesion
>. [HELP DOCUMENTATION] Google’s HTML5 Rocks website
.>. [HELP DOCUMENTATION] Help Center HTML5 Articles
.>. [HELP DOCUMENTATION] Studio HTML5 API/SDK
.>. [HELP DOCUMENTATION] Setting up your creative in Studio
>. IAB Mobile Rising Stars formats
>. DoubleClick Rich Media Help Centre
>. DoubleClick Rich Media Gallery
>. @rmgallery - DoubleClick Rich Media Gallery Twitter Account
Contact Us.
If we haven’t quite covered everything in this document, please contact your local Rich Media Campaign Manager or
email our technical team at [email protected]. with any follow up questions.
About DoubleClick.
For advertisers and publishers who need to reach a target audience, the DoubleClick product suite is an advertising
platform that maximizes revenue growth and return on advertising spend through a unique and innovative ad targeting
process. The experience and innovative spirit at DoubleClick drives a constant evolution of products and solutions,
ensuring the best, most effective advertising tools are always at our customers’ command.
www.doubleclick.com.
www.richmediagallery.com.
DoubleClick UK : Belgrave House, 76 Buckingham Palace Road, London SW1W 9TQ : Phone: +44 (0)800 912 1344.
www.doubleclick.co.uk ©2010 Google Inc. All rights reserved..