IAB Future Format. The Cascade Build Guide.

IAB Future Format. The Cascade Build Guide.
.Telegraph Cascade Build Guide.
.MARCH 2012 .
IAB Future Format.
The Cascade Build Guide.
Introduction.
The Cascade is the IAB Future Format 2012 Winner.
The Cascade unit has been developed to meet increased client demands within the digital arena. Enabled for both
Flash and HTML5, the Cascade provides rich, interactive content in a consistent advertising platform across multiple
devices, maintaining high impact and engagement levels across all devices.
Launched from a high impact universal ad unit, the cascading effect sets it apart from other expandable formats. As
users engage with the unit, on click, they can choose to ‘cascade’ downwards to reveal additional panels, scrolling
and rotating through the expanded space. As a result, advertisers will achieve a high level of user engagement,
whether it’s click, swipe or scroll.
The Cascade unit gives clients the flexibility to choose their content, either using pre-defined panels including a
Video Player, Image Gallery, Social Media and RSS Feeds or using each panel as a ‘blank canvas’. There are no set
style rules that they must adhere to and there are no limits to the number of panels a Cascade unit may contain
(from three upwards).
The Cascade is a truly unique multi-platform, rich media unit, offering an engaging user experience. It captures the
interest of the user and drives engagement, no matter what device.
You can see a demo of this format at .www.richmediagallery.com/cascade.
IAB Future Format.
The Cascade.
Designed to extend a pre-existing placement on a page, The Cascade takes a typical expanding creative and gives
the user a choice for more as they begin to interact with the brand. On the desktop, users are able to expand from
one panel, to 2 or 3, covering as much of the site content as they wish. Each panel remains the same size (940x230
pixels) and advertisers are allowed an unlimited number of panels to showcase their brand or product.
The Cascade is also intended to offer a fully functioning rich media experience for tablet and mobile smartphone
users, thus making sure that the advertised brand is received and consumed as its intended no matter the device its
viewed on.
On a tablet, The IAB Future Format Cascade uses device orientation to detect how many panels the format should
expand to. In portrait mode, the height of the device window allows for 5 panels, while on landscape 3 panels. Due
to size constraints, the height of each panel also differs between orientation, as illustrated below.
Cascade Tablet Portrait Dimensions.
Cascade Tablet Landscape Dimensions.
Cascade Phone Dimensions.
NOTE: The Cascade Creative was developed for The Telegraph. As an IAB Future Format, this format can be
adapted for any publisher, either by using an existing ad placement (eg. 728x90 or 970x250) or by introducing
a new ad placements. For additional details and help in creating a modified creative, please contact drmpubrelatons@google.com.
IAB Cascade Panels.
The Cascade gives advertisers the flexibility to choose their content, and as a result each panel can be seen as
a ‘blank canvas’ giving advertisers true freedom to showcase their brand. However whilst there are no set style
rules that they must adhere to, there are a number of module options that can be used. Some ideas are listed
below.....
>. Video Player
>. Image Gallery
>. Twitter Feeds
>. RSS Feeds
>. You Tube Player
>. Google Maps
>. Telegraph News Feed
>. Social Panel
>. & many more..
Should you wish to incorporate any of these, please reach out to the Technical Team for assistance.
Format Specification.
.Desktop.
>. Panel Dimensions: 940x230
>. Expanded Dimensions: Up to 940x690
>. Expand Direction: Down
>. Initial File Size Limit (preloader): 40kb
>. Initial File Size Limit (after load): 60kb
>. Maximum Total Creative File Size: 30MB
>. Backup Image File size Limit: 50kb
>. Sound: Only after user initiation (click)
.Tablet.
>. Panel Dimensions: 940x230 (Portrait) or 940x205 (Landscape)
>. Expanded Dimensions: Up to 940x1050
>. Expand Direction: Down
>. Maximum Total Creative File Size: 10MB
>. Backup Image File size Limit: 50kb
>. Sound: Only after user initiation (click)
.Mobile.
>. Collapsed Dimensions: 300x50
>. Expanded Panel Dimensions: 320x356 (Portrait) or 480x208 (Landscape)
>. Expand Direction: Full Browser Window
>. Maximum Total Creative File Size: 10MB
>. Backup Image File size Limit: 50kb
>. Sound: Only after user initiation (click)
NOTE: These specifications are set by The Telegraph. It's likely that other publishers running this format will have their own specifications about
this format so always be sure to check with the publisher for exact ad specifications.
Build.
&.
Delivery.
The Telegraph Cascade is created as an Expanding creative using the DoubleClick Studio Components within Flash
and should then be set up as an Expanding Format within Studio once the finished files are uploaded there. In
addition, two optional HTML5 creatives can be built and these would be targeted to phone and tablet devices. These
should also be built as Expanding Creatives but built using our HTML5 components and HTML5 schema rather than
the corresponding Flash versions.
NOTE: The Desktop & tablet creatives can be setup in DoubleClick Rich Media Studio as one creative, and trafficked through DFA as one tag. The
phone creative requires an additional creative of a different size that must be trafficked as a separate creative.
IAB Cascade:.
Creating the Desktop Cascade (Flash).
The desktop Cascade creative must be built in Flash using AS3. Template files are available .here.
A breakdown of the files and how they work can be seen below:
1.. Cascade_Main_AS3.fla
>. This is the main Cascade Flash file. It contains the Enabler & Expanding Components
>. This file includes all flash elements (eg. more, close, up, down) and AS3 code needed for The Cascade to
function correctly. To edit any of these buttons, select the relevant movie clip from the flash library.
>. The dimensions of this file must reflect the expanded size. This is 940x690.
>. A polite load creative is recommend. To add this, select “Polite Load Creative” from the library or the
relevant layer in the flash file.
>. An unlimited number of panels is allowed, but only 6 panels have been included in the template file. To
add additional panels, you must adjust the AS3 in frame 1 of this file under “Cascade Setup” and reference
the relevant SWF file. The code below shows 6 panels being loaded in;
var numberOfPanels = 6;
var panelSWF:Array = [];
panelSWF[1]= "Cascade_Panel1_AS3.swf";
panelSWF[2]= "Cascade_Panel2_AS3.swf";
panelSWF[3]= "Cascade_Panel3_AS3.swf";
panelSWF[4]= "Cascade_Panel4_AS3.swf";
panelSWF[5]= "Cascade_Panel5_AS3.swf";
panelSWF[6]= "Cascade_Panel6_AS3.swf";
NOTE: There should be no need to edit any other part of this file.
2.. Cascade_PanelTemplate_AS3.fla
>. This is the Panel Template file. It contains the Proxy Enabler and the Invisible Exit Component to creative
a unique click through for the panel.
>. The dimensions of this file must adhere to the panel dimensions. This is 940x230.
>. This file can be edited as needed to fit your creative concept.
NOTE: The template file has been re-saved in the template file six times to illustrate the creative. Each are named following this standard:
Cascade_PanelX_AS3.swf, where X is the panel name
3.. BackupImage.jpg
>. This is the background image. The dimensions must be 940x230.
IAB Cascade:.
Creating the tablet Cascade (HTML5).
The tablet Cascade creative must be built in HTML5, and must be uploaded in the same Studio Creative as the Flash
version, outlined previously.
Download template files for the tablet HTML5 Cascade Format .here.
A breakdown of the files and how they work can be seen below:
1.. Cascade.html
>. This is the main Cascade Creative file. It contains HTML elements needed for the Cascade to function
correctly, and links to the required JavaScript & CSS files.
>. All Cascade content must be kept within the main DIV. This DIV has the ID of “cascade”. It’s important
that this is not changed. Inside this div, all key elements of the cascade creative are contained, including
control buttons (more, close, up, down) and each individual cascade panel.
<div id=”cascade”>
<button id="more">Show more</button>
<button id="close">Close</button>
<button id="up">Up</button>
<button id="down">Down</button>
<!-- Cascade Panels go here -->
</div>
>. An unlimited number of panels is allowed, but only 6 panels have been included in the template file. To
add additional panels, use the following HTML. An unlimited number of classes can be added to the DIV as
required but the panel ID must be named “panelX” where X is the panel number (eg. “panel5”).
<div class=”panel” id=”panelX”>
<!--Place content here for each panel →
</div>
>. While HTML elements can be used for each panel, the template is currently setup to set images
as a background for each panel. To cater for the orientation changes, each panel has two images:
portrait & landscape. These images are set in Cascade.js using the following naming structure:
panel_X_landscape.jpg or panel_2_portrait.jpg
NOTE: If adding additional panels, the last panel must appear at the top of the HTML document, and the first at the end of the HTML document.
2.. Cascade.css
>. This is the stylesheet for the Cascade Creative. It’s main purpose to style and initially position the
Cascade Buttons (More, Close, Up & Down) and also set the dimensions for each panel. Should you wish to
adapt the style of the Cascade,, we recommend you place any bespoke CSS in Cascade-Custom.css
NOTE: Once users have interacted with the Cascade Unit, some elements of the Cascade creative will be positioned within the Cascade.js
javascript file.
3.. Cascade.js
>. This is the main JavaScript file. It contains JavaScript code to provide the key functionality of the Cascade
Creative.
>. An unlimited number of panels is allowed, but only 6 panels have been included in the template file. If
you have added additional panels in the HTML file, you must amend the number of panels this JavaScript file
at the top of this file. This is done with the following code, where X is the number of panels in your creative;
var panelNo = X;
>. We recommend that you do change any other areas of this file, instead place any custom JavaScript in
Cascade-Custom.js
3.. Cascade-Custom.css
>. This is a stylesheet where we recommend you add any CSS bespoke to your creative.
4.. Cascade-Custom.js
>. This is the secondary JavaScript file. We recommend you place any additional javascript code, bespoke to
your creative in this file.
>. To add or change additional exits, we recommend adjusting the Event Listeners in the initCustomExits()
function. When doing this, it is important to add listeners for both click and touchend so it works on an iPad.
To add a listener on click, use the following code:
docuent.getElementById(‘DIV ID’).addEventListener(‘click’,myExitFunction);
To add a listener on touchend, use the following code. This is typically used for mobile devies.
docuent.getElementById(‘DIV ID’).addEventListener(‘touchend’,myExitFunction);
.IMPORTANT:. Whilst the width of the panels are built as 940 pixels in width, please note that the iPad will
automatically scale this up alongside the Telegraph site content when in portrait mode on the iPad. For this
reason, please note that the height of each panel will change as an iPad switches between Portrait & Landscape
mode. Portrait Mode is 230 pixels high and Landscape 205 pixels. In addition, the expand size will depend on the
orientation of the iPad. On landscape, the highest expanded size can be 940x690 while in Portrait 940x1150. For this
reason, the expanded size of this HTML5 creative must be set to 940x1150.
IAB Cascade:.
Creating the phone Cascade (HTML5).
The phone Cascade creative must be built in HTML5. Template files are available .here.
The phone Cascade template files follow the same structure as the tablet template files, with some key differences.
A breakdown of the files and how they work can be seen below:
1.. Cascade.html
>. This is the main Cascade Creative file. It contains HTML elements needed for the Cascade to function
correctly, and links to the required JavaScript & CSS files.
>. All Cascade content must be kept within the main DIV. This DIV has the ID of “cascade”. It’s important
that this is not changed. Inside this div, all key elements of the cascade creative are contained, including
control buttons (more, close, up, down) and each individual cascade panel.
<div id=”cascade”>
<!-- Collapsed Panel -->
<div id="collapsed-panel">
<img src="collapsed-creative.jpg" />
</div>
<div id="expand-panels">
<button
<button
<button
<button
id="more">Show more</button>
id="close">Close</button>
id="up">Up</button>
id="down">Down</button>
<!-- Expanded Mobile Cascade Panels go here →
</div>
</div>
>. An unlimited number of panels is allowed, but only 6 panels have been included in the template file. To
add additional panels, use the following HTML. An unlimited number of classes can be added to the DIV as
required but the panel ID must be named “panelX” where X is the panel number (eg. “panel5”).
<div class=”panel” id=”panelX”>
<!--Place content here for each panel →
</div>
>. While HTML elements can be used for each panel, the template is currently setup to set images
as a background for each panel. To cater for the orientation changes, each panel has two images:
portrait & landscape. These images are set in Cascade.js using the following naming structure:
panel_X_landscape.jpg or panel_2_portrait.jpg
NOTE: If adding additional panels, the last panel must appear at the top of the HTML document, and the first at the end of the HTML document.
2.. Cascade.css
>. This is the stylesheet for the Cascade Creative. Should you wish to adapt the style of the Cascade, we
recommend you place any bespoke CSS in Cascade-Custom.css
NOTE: Once users have interacted with the Cascade Unit, some elements of the Cascade creative will be positioned within the Cascade.js
javascript file.
3.. Cascade.js
>. This is the main JavaScript file. It contains JavaScript code to provide the key functionality of the Cascade
Creative.
>. An unlimited number of panels is allowed, but only 6 panels have been included in the template file. If
you have added additional panels in the HTML file, you must amend the number of panels this JavaScript file
at the top of this file. This is done with the following code, where X is the number of panels in your creative;
var panelNo = X;
>. We recommend that you do change any other areas of this file, instead place any custom JavaScript in
Cascade-Custom.js
3.. Cascade-Custom.css
>. This is a stylesheet where we recommend you add any CSS bespoke to your creative.
4.. Cascade-Custom.js
>. This is the secondary JavaScript file. We recommend you place any additional javascript code, bespoke to
your creative in this file.
>. To add or change additional exits, we recommend adjusting the Event Listeners in the initCustomExits()
function. When doing this, it is important to add listeners for both click and touchend so it works on an iPad.
To add a listener on click, use the following code:
docuent.getElementById(‘DIV ID’).addEventListener(‘click’,myExitFunction);
To add a listener on touchend, use the following code. This is typically used for mobile devices.
docuent.getElementById(‘DIV ID’).addEventListener(‘touchend’,myExitFunction);
.IMPORTANT:. Whilst the collapsed creative size will always remain the same at 300x50 pixels, the expanded
dimensions will depend on the orientation of the iPhone. For Portrait mode the expand dimensions will be 320x356
and for landscape, 480x208. To cater for this the expanded dimensions setup in studio for the HTML5 creative must
be 480x356.
Additional.
Notes.
The Rich Media Help center has a variety of resources that can help you throughout the Creative Build. For an guide
to to building an Expanding Ad in flash, please see our, .Expanding Build. .Guide. on the Help Center, and for help
building in HTML5 please see our HTML5 Build Guide.
.Resources.
>. [DEMO PAGE] - www.richmediagallery.com/cascade
>. [AS3 & HTML FLA]
>. Flash Expanding Build Guide
>. HTML5 Build Guide
>. DoubleClick Rich Media Help Centre
>. DoubleClick Rich Media Studio
>. 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 drm-campaign@google.com. 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..
Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF

advertising