Search
Clear search
Close search
Google apps
Main menu

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 or adhesion_autoexpand.html

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

adhesion.css or adhesion_autoexpand.css for auto-initiated expand

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 or adhesion_autoexpand.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 or autoexpand_footer.png

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.

autoexpanded.png ("autoexpand" template only)

Template image for the three seconds initial auto-expanded panel. Replace with your own artwork.

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

Auto expand collapsed panel code



<!-- Collapsed panel (footer) -->
 <section id="collapse-container">
   <div id="collapse-background"></div>
 </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.

Optional: Change the automatic expansion behavior

If you wish, you can customize the behavior of the auto expand template in several ways:

  • Change the duration of the automatic expansion
    Set the value of the variable dcrm.autoCollapseTime, in milliseconds, default value: 3000.
  • Change the height of the footer
    Set the value of the variable dcrm.collapsedHeight, in pixels, default value: 20.
  • Load a different file in the expanded panel
    Set the value of the variable dcrm.autoExpandImgSrc, default value: 'autoexpanded.png'. This file load is handled with JavaScript so that the expansion only starts when the content is ready. You can also change the default "closing in.." countdown text inside the function dcrm.timerHandler, found in the file adhesion_autoexpand.js.

Upload the finished creative to Studio

Upload the Mobile Adhesion HTML5 creative using the Floating format. See also Review your HTML5 floating 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?