Search
Clear search
Close search
Google apps
Main menu
true

HTML5 Mobile Adhesion

Three images of a mobile device, 2 portrait and 1 landscape, showing an ad adjusting to the orientations.

The Mobile Adhesion (or Footer-to-Fullscreen) format lets you build an effective creative for mobile devices (smartphones in particular) that's always visible on the screen and can be expanded to full-screen for a more complete rich media experience.

When collapsed, the creative is positioned at the bottom of the page. The user can expand it to full screen, allowing for videos, image galleries, buttons, and any other HTML5-powered rich media features. If desired, the creative can automatically expand to fill the screen for the first 3 seconds, while adapting the layout to the device's orientation.

The automatically expanding version also has an additional fullscreen panel, which is immediately shown for a few seconds as soon as the creative is loaded, before sliding down and showing the collapsed banner.

Prerequisites

About the template files
File name Description

adhesion.html

The main creative file. Add your content here as described in Set up the collapsed and expanded panels below.

adhesion.css

The main CSS file to style the mandatory parts of the layout. You shouldn’t need to edit this.

custom.css

A custom CSS file to style the optional parts of the content of the HTML file. Use this file for your custom CSS code.

adhesion.js

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

Set up the collapsed and expanded panels

This template lets you define how the Mobile Adhesion HTML5 banner looks in the CSS file and how the user can interact with it in the JavaScript file. 

Open adhesion.HTML.

Add content to the collapsed panel

Add content to the collapsed panel inside the section with the id: collapse-container.

Tap to expand collapsed panel code



<!-- Collapsed panel (footer) -->
<section id="collapse-container">
   ...
   <button id="expand-button">TAP TO EXPAND</button>
   <button id="collapse-close-button"></button>
 </section>

Add content to the fullscreen expanded panel
Add content to the fullscreen panel inside the section with the id: expand-container.


<section id="expand-container">
   ...
   <button id="close-button"></button>
   <div id="expand-content">
   ...
   </div>
</section>
    
The close-button is pre-coded. Do not remove it. If you wish, you can edit the styles in the custom.CSS. If you remove this button, the Mobile Adhesion template may not work properly.

Optional: Add custom styles

Open custom.css to add styles to any element added in the HTML file, identified by its ID.

Optional: Add custom code

Open custom.js to add custom code for your banner behavior.

Upload the finished creative to Studio

Upload the Mobile Adhesion HTML5 creative using the Interstitial format in Studio. See also Review your HTML5 interstitial creative.

In the Preview tab, click Show details Show details, then click Display properties, and set the following properties:

  • Width: 320px
  • Height: 20px (for the auto-expand version) or 50px. (Width and height should be set automatically, but verify them here, especially if original size has changed.)
  • Positioning left: 0px
  • Positioning top: -200px (This is a temporary position to hide the creative until the proper dynamic footer position kicks in.)

Trafficking

The Adhesion format must be served in DoubleClick Campaign Manager (DCM) using a "display interstitial" placement.

You can only use JavaScript tags to traffic this format. Iframe tags aren't supported.
Was this article helpful?
How can we improve it?