Build Guide

.Swipe for More.
HTML5 Component.
Introduction.
.Rich Media HTML5 Build Guide.
.JULY 2012 .
Mobile devices are heavily constrained for screen real estate and so creative methods are needed in order to
maximize the usage of available space. One such method popular on iOS and Android devices is the availability of
a pulldown "curtain." This curtain layer is a window that the user can swipe down from the top of the screen, so we
took this idea and created Swipe for More
Swipe for More gives you a ready made draggable curtain that you can place into any creative and customise
however you see fit. Increase your creative canvas quickly and simply with the Swipe for More curtain and provide
space to present to the user a multitude of extra images, videos, maps or whatever else you might need just that
little bit of extra space for.
A preview of a creative using the Swipe for More HTML5 component can be found here.

.Build &.
.Delivery.
Swipe For More is a configurable HTML5 template that can be applied to any HTML5 ad. Developers can configure
the swipe for more curtain attributes such as the color, the dimension, animation speed and an array of other
aspects of the component which will be explained in more detail below. Once the curtain is swiped down, it can be
treated as a brand new blank canvas and so developers can add any additional arbitrary content to it. It is up to the
developer to properly position images, video, maps, and other components on this canvas (the canvas is a standard
DIV). In this demo the canvas has been used to contain 4 thumbnail images each of which when clicked takes the
user to a new larger image.
.NOTE:. This format is initially supported only on WebKit-based browsers (Android, iOS, desktop Chrome and Safari). For initial deployment it is
recommended that you explicitly target mobile Android and iOS.
.NOTE:. If you have any questions or comments about this format then please feel free to reach out to our technical team via .dclk-
drmtechnical@google.com.
Demo files for this creative can be found .here.
A breakdown of the files and how they work can be found below:
.1.. swipeformore.html (300x250 inpage)
This is the HTML page which contains the HTML5 creative itself, it creates and calls the container which the creative
will appear in and also contains the DoubleClick HTML5 Enabler.
The Enabler contains all of the tracking calls and functionality which allows this creative to work within the
DoubleClick Studio platform and should be added to the head of your HTML as follows:
.NOTE:. Additional information on setting up HTML5 creatives within DoubleClick Studio and the use of the Enabler can be found .here.
.2.. swipeformore.css, swipeformore.js, modernizr.js
These are required CSS and JS files which form the basis of the swipe gallery component. They contain all of the
script and functionality of the swipe gallery and as such need to be included within the head of the HTML as follows:

.3.. s4m_demo.css, s4m_demo.js
These are required CSS and JS for this demo which contain all of the actual content which will be pulled into the
container within the HTML page
.4.. thumb_1.png, thumb_2.png, thumb_3.png, thumb_4.png
These are the thumbnail images which are pulled into the Swipe for More curtain.
.5.. image_1.png, image_2.png, image_3.png, image_4.png
These are the large images which are shown when the thumbnails within the swipe for more curtain are pressed.
.6.. tab.png. grip.png
These are the images which make up the Swipe for More curtain.
.7.. background_image.jpg
This is the backup image for the creative which will display if the creative is viewed by a non HTML5 compliant
browser. It should be the size of the creative, so in this case 300x250px
.Using the Component.
.>. Configuration
The goal of this mobile component is to be as flexible as possible especially around its configuration. In order to set
it up a config object is created in JavaScript (shown below) and then passed to the component.
.NOTE:. This config for the demo downloadable from this document is done within the s4m_demo.js file.
// Swipe For More config object.
var config = {
// Id of div container that will hold the Swipe 4 More component.
adContainerId: 'swipe-container',
// File path of the swipeable tab image.
outerTabFilepath: Enabler.getUrl('tab.png'),
// Dimensions of the outer swipeable tab image.
outerTabDimensions: {
width: 300,
height: 37
},
// Amount of space to increase the tab swipe hit area by in pixels.
tabHitAreaIncrease: 15,
// File path of the inner tab image that appears inside the swipe pane.
innerTabFilepath: Enabler.getUrl('grip.png'),
// Dimensions of the inner tab image.
innerTabDimensions: {
width: 47,
height: 17
},
// Because the outer tab and inner images differ, there could be an

alignment problem. This pixel offset can be adjusted to correct
// this.
innerTabOffset: 7,
// Distance between bottom edge and the inner tab image.
innerTabBottomMargin: 10,
// The solid color of the main swipeable pane. Rgba is used because
// children do not inherit the opacity of parents.
backgroundRgba: 'rgba(82, 214, 247, 0.90)',
// Opacity of the gradient div. The actual gradient effect is defined in
// s4m.css.
gradientOpacity: .3,
// Time (in ms) it takes for expand/retract of the swipeable pane.
animationDuration: 800,
shouldTease: true,
// Starting z-index for the Swipe 4 More component.
zIndexStart: 8000
};
// Create an instance of the Swipe 4 More component, passing in config.
var mySwipe4More = new
studio.innovation.components.SwipeForMore(config);
mySwipe4More.render(document.getElementById('swipe-container'));
// Four Image Gallery config object.
var imgConfig = {
// Div container that will hold the gallery.
adContainer: mySwipe4More.getMainContentArea(),
// Padding around thumbnails.
thumbnailPadding: {
paddingLeft: 10,
paddingRight: 10,
paddingTop: 8,
paddingBottom: 5
},
// Dimensions of thumbnails.
thumbnailSize: {
width: 113,
height: 94
},
// Filepaths to thumbnails and corresponding image. Also contains
// corresponding CTA objects defined above.
images: [ {thumb: Enabler.getUrl('thumb_1.png'), image: Enabler.getUrl('image_1.png')},
{thumb: Enabler.getUrl('thumb_2.png'), image: Enabler.getUrl('image_2.png')},
{thumb: Enabler.getUrl('thumb_3.png'), image: Enabler.getUrl('image_3.png')},
{thumb: Enabler.getUrl('thumb_4.png'), image: Enabler.getUrl('image_4.png')} ],
// Border for the large image. Can be set to null for no border.
imageBorderColor: '#FFF',
// Dimensions of the close X button.
closeButtonSize: {
width: 26,
height: 24
},
fadeClass: 's4m-image-fade',
// Starting z-index for the component.
zIndexStart: 9000
};

.NOTE:. Enabler.getUrl() is required when loading in an image within Studio to make sure that studio can locate the file properly when adserved.
For more information check out our help centre .here.
.>. Instantiation and Event Handling
Instantiating the component is straightforward and is done as follows:
var mySwipe4More = new studio.innovation.components.SwipeForMore(config);
.NOTE:. This is again done for the downloadable demo from this document within the s4m_demo.js file.
Immediately following instantiation, you can set up listeners and callback for the SWIPE_OPEN and SWIPE_CLOSE
custom events. In place of the console.log, it is typical to invoke the Studio HTML5 Enabler.
mySwipe4More.addEventListener(studio.innovation.components.SwipeForMore.SWIPE_OPEN, function() {
console.log('open');
Enabler.counter("HTML5 Counter - Open Swipe For More Container");
}, false);
mySwipe4More.addEventListener(studio.innovation.components.SwipeForMore.SWIPE_CLOSE,
function() {
console.log('close');
Enabler.counter("HTML5 Counter - Close Swipe For More Container");
}, false);
.NOTE:. The Enabler.counter() call is a custom Rich Media counter which will appear within the Rich Media report for your creative, allowing you
to easily see which of your images was viewed the most. For more information on setting up Rich Media Counters see our help centre .here.
Finally, to actually show the component you must call the render method and supply the parent container. The
parent container can be any valid element.
mySwipe4More.render(document.getElementById('swipe-container'));
IMPORTANT: This component relies on the latest CS3 effects (specifically, CSS transitions and CSS transforms).
The component uses Modernizr to sniff out these capabilities, and if it does not detect them the swipe pane and
tab will NOT load. The recommended strategy is to include a static image within the parent DIV container that will
contain Swipe For More.
Example:
/* The content below serves as the backdrop to your ad, over which the swipe pane
* gets placed. In this example, a static JPG is the backdrop and will be shown
* regardless of whether the user’s device can support Swipe For More.
*/
Other API Methods.
.>. Programmatically Opening and Closing of the SwipeForMore Object.
To open the main content area of the SwipeForMoreObject:

function openSwipeAreaHandler(event) {
mySwipe4More.openSwipePane();
}
openSwipeAreaBtn.addEventListener(‘click’, openSwipeAreaHandler, false);
To close the main content area of the SwipeForMoreObject:
function closeSwipeAreaHandler(event) {
mySwipe4More.closeSwipePane();
}
closeSwipeAreaBtn.addEventListener(‘click’, closeSwipeAreaHandler, false);
.>. Accessing the Main Content Area of the SwipeForMore Object.
To access the main content area of the SwipeForMore object:
mySwipe4More.getMainContentArea();
Additional Notes.
Once finished, your creative and all of its files should be uploaded to Studio exactly as you would do with any other Rich
Media creative, for more information on uploading to Studio check out the help centre .here.
Swipe for More is compatible with any HTML5 format that’s uploaded to DoubleClick Studio and some more
advanced sample files which use the Swipe for More HTML5 component can be downloaded from the Resources
section below.
.Resources.
.>. [DEMO] Swipe Gallery
.>. [FILES] Inpage Demo (Basic)
.>. [FILES] Inpage with Video Demo (Advanced)
.>. [FILES] Expanding Demo (Advanced)
.>. [HELP DOCUMENTATION] Studio link to HTML5 Information
.>. [HELP DOCUMENTATION] Studio Enabler API/SDK Information
.>. [HELP DOCUMENTATION] Setting up your creative in Studio
.>. DoubleClick Rich Media Help Center
.>. DoubleClick Rich Media Studio
.>. DoubleClick Rich Media Gallery
.>. @rmgallery - DoubleClick Rich Media Gallery Twitter Account

Contact Us.
If you still have any questions relating to this format or build then please feel free to contact our Rich Media
Technical Support team through Doubleclick’s Help Center Contact Us form.
About DoubleClick.
For advertisers and publishers who need to reach a target audience, the Google’s 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 NY: 76 Ninth Ave, New York, NY 10011
.www.google.com/doubleclick ©2012 Google Inc. All rights reserved..