Search
Clear search
Close search
Google apps
Main menu

HTML5 banner with floating build guide

A banner with floating creative uses both a banner and a floating creative in one Studio ad format for display on either desktop or mobile web.

This combined format allows you to deliver two creatives to one page at the same time. Since they're uploaded together in DoubleClick Studio, we refer to the individual creatives as companions. When these two companions are served together, you can open and close the floating creative from the banner creative.

 Set up your files

  1. Create two .HTML files, one for the banner and one for the floating creative.
  2. Include the Enabler in each file.
    • If you're using Google Web Designer, the Enabler is added automatically when you select the "DoubleClick" environment, so skip this step.
    • If you're using a different development tool, include the following script:
      <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

Add functions to open or close the floating companion

When you serve a floating and a banner creative together, the banner can act as an anchor for the floating companion, allowing the viewer to re-open the floating creative or close it. Learn how to add these functions to your banner creative below.

displayCompanion
  1. Add a button to your banner creative to open the floating companion.
  2. Add a click event handler that opens the floating companion when the open button is clicked. For example, if your button is called openButton:
    function openButtonClickHandler(event) {
    
      // Record a custom counter each time the floating creative is opened.
      Enabler.counter("Show Floating");
              
      // Open the floating creative.
      Enabler.displayCompanion();
    };
    
    document.getElementById('openButton').addEventListener('click', openButtonClickHandler, false);
closeCompanion
  1. Add a button to your banner creative to close the floating companion.
  2. Add a click event handler that closes the floating companion when the close button is clicked. For example, if your button is called closeButton:
    function closeButtonClickHandler(event) {
    
      // Record a manual close each time the floating creative is closed.
      Enabler.reportManualClose();
              
      // Close the floating creative.
      Enabler.closeCompanion();
    };
    
    document.getElementById('closeButton').addEventListener('click', closeButtonClickHandler, false);

Upload and preview

When you're finished designing your two creatives, upload them to Studio, then preview and test how they work together.

  1. Add a new creative in Studio, and select the format Banner with floating.
  2. Upload your HTML files, along with any media files or images. Both of your HTML files should have a status of Primary. If they don't, make sure both files include the Enabler (See Set up your files above).
  3. Review creative events and add exit urls in the Edit Events step.
  4. Preview your creative in the Preview step. 

Display properties

By default, the floating companion is displayed in the center of the publisher's page as soon as the page loads. You can change these settings in Studio's Creatives > Preview step.

To edit, click Show details, then expand the Display properties panel.

Interstitial

The settings in the Floating section set display properties for the Floating creative.

Filename: The filename of the Floating creative. Studio detects the ad types of the two companion creatives automatically. If the wrong creative name is selected, use the drop-down to select the correct creative name to use as the Floating creative.

Width: The width of the creative in pixels.

Height: The height of the creative in pixels.

Alignment: Where to display the Floating creative over the visible area of the publisher's page in the browser. Use positioning to further customize placement.

Transparency: Whether the publisher's page is visible through transparent portions of the creative. By default, Floating creatives are transparent. Uncheck to disable.

Z-index: The stack order of an element when displayed on the publisher's page. By default, all creatives are set to 1000000 to make sure they're displayed on top of other content. Check with your publisher in case you need to adjust z-index to layer correctly with other site controls.

Display start: When to display the creative. By default, Floating creatives are displayed immediately after the publisher page loads. You can also add a delay or not load the Floating creative until a button is clicked in the Banner creative.

  • Custom: Select this option to load immediately (at 0 seconds). Adjust the time to add a delay before the Floating creative loads. This delay is only applied when the Floating creative first displays, not when the displayCompanion function is used.
  • None: When you select None, the Floating creative will not be displayed until the displayCompanion function is called.

Display duration: The amount of time the Floating creative is displayed. By default, Floating creatives are displayed until the close button is clicked.

  • Custom: Set a specific amount of time to display the creative before automatically closing it.
  • Unlimited: The creative doesn't close until the close button is clicked.

Positioning: Fine-tune the position of the Floating creative over the visible area of the publisher's page in the browser.

  • Top: The number of pixels to offset the creative from the top of the browser viewport.
  • Left: The number of pixels to offset the creative from the left of the browser viewport.

When you're done, click Save to save your changes and reload the creative preview.

 

Banner

In most cases, the default display properties for the banner creative do not need any adjustment.

Filename: The filename of the banner creative. Studio detects the ad types of the two companion creatives automatically. If the wrong creative name is selected, use the drop-down to select the correct creative name to use as the banner creative.

Transparency: Whether the publisher's page is visible through transparent portions of the creative. By default, banner creatives are not transparent. Check with your publisher before enabling transparency for a banner creative.



Was this article helpful?