Build Guide

More documents

Recommendations

Info

.<strong>Build</strong> &. .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
Page 1: .Swipe for More. HTML5 Component. I
Page 5 and 6: .NOTE:. Enabler.getUrl() is require
Page 7: Contact Us. If you still have any q

Build Guide

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?