Swipe Gallery. HTML5 Component. - DoubleClick [PDF]

.Rich Media HTML5 Build Guide. .JULY 2012 .

.Swipe Gallery. HTML5 Component. Introduction. Mobile devices are heavily constrained for screen real estate. Creative layouts can maximize the space available to convey your brand message, all while being highly interactive. On phones and tablets, users have grown accustomed to swiping content naturally in order to reveal additional information. The carousel/gallery metaphor is a common way to enable users to cycle through a series of media. Combined with touch input, the Swipe Gallery is an excellent way to show a variety of media to users in a way that is not intrusive. HTML5 Swipe Gallery achieves hardware accelerated, “buttery smooth” animation on modern WebKit-based devices.

A preview of a creative using the Swipe Gallery HTML5 component can be found here.

.Build &. .Delivery. Swipe Gallery is a configurable HTML5 template & component that consists of an horizontal strip of images that is sequenced in such a way that it allows a user to swipe from one image to the next in a smooth, swiping gesture, and is supported for both touch and mouse. .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.

Developers can easily configure the gallery images, ad dimensions, and animation speed as the gallery is swiped. Events are raised when an image is swiped into view so custom events can be reported to gauge user interaction. At present the Swipe Gallery has no CTA associated with the component. It is recommended that the ad developer embed the Swipe Gallery as part of a broader ad/creative that will feature CTAs elsewhere. Demo files for this creative can be found .here. A breakdown of the files and how they work can be found below: .1.. swipeGallery.html (300x250 inpage) This is the HTML page which contains the HTML5 creative itself, it creates and calls the elements which the creative will pull 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. .NOTE:. The HTML page is fully commented, however if you have any questions or comments about the please reach out to our technical team via [email protected].

.2.. swipegallery.css, swipegallery.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.. 1.jpg, 2.jpg, 3.jpg, 4.jpg These are the images which are pulled into the Swipe Gallery. Note that you can configure the gallery to have an arbitrary number of images, though you should balance this with total filesize and download times on mobile devices. .4.. swipe.png This is an image which is displayed within the swipe gallery on first load that makes it clear to a user that the images can be “swiped”. The image can be turned on or off within the config settings explained further down this document. .5.. backup.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. var config = { // // Id of container that will hold the component. adContainerId: 'gallery', // Image that instructs user that swiping is possible. swipeInstructionImage: 'swipe.png', // Images in the swipe gallery. Make sure that the width // of each image should be the same and should furthermore // match the container div's width. images: [{'src': Enabler.getUrl('1.jpg'), 'width': 315, 'height': {'src': Enabler.getUrl('2.jpg'), 'width': 315, 'height': {'src': Enabler.getUrl('3.jpg'), 'width': 315, 'height': {'src': Enabler.getUrl('4.jpg'), 'width': 315, 'height': ],

197}, 197}, 197}, 197}

// Transition duration in milliseconds. transitionDuration: 300, zIndexStart: 8000, // Whether to display the slide the user is on. showNavigation: false, // Delay in ms (used to correct an Android animation glitch). animationSnapDelay: 40 }; .NOTE:. To pull in more images to the swipe gallery simply add extra lines to the images array and the swipe gallery will pull in more images. Alternatively if you want fewer images, simply remove an image from the array. .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 Wait for the Enabler to be initialised: // Set up our point of entry. if (Enabler.isInitialized()) { init(); } else { Enabler.addEventListener(studio.events.StudioEvent.INIT, init); }

Instantiating the component is straightforward function init() { var gallery = new studio.innovation.components.SwipeGallery(config); }

Immediately following instantiation, you can set up listeners and callback for the SLIDE custom event. When a user slides to an image, the event slideX is raised where X is a number starting from 0 and counting upward depending on how many images are in the gallery.

gallery.addEventListener('slide0', function() console.log('slide0'); Enabler.counter("slide - image 1"); }); gallery.addEventListener('slide1', function() console.log('slide1'); Enabler.counter("slide - image 2"); }); gallery.addEventListener('slide2', function() console.log('slide2'); Enabler.counter("slide - image 3"); }); gallery.addEventListener('slide3', function() console.log('slide3'); Enabler.counter("slide - image 4"); });

{

{

{

{

.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.

To actually show the component you must call the render method and supply the parent container. The parent container can be any valid element. gallery.render(document.getElementById('gallery'));

Finally, a method is available for you to jump to any slide in the gallery. The two parameters it takes are the slide index number (starting at index 0) and the animation duration, in milliseconds. gallery.slide(3, 300); gallery.slide(2, 3000); gallery.slide(0, 1000);

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 Gallery is compatible with any HTML5 format that’s uploaded to DoubleClick Studio and some more advanced sample files which use the swipe gallery 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..