Banner with floating build guide

Add display and close companion functions

Once you build your banner with floating units, you must set up functions to handle how the two companion creatives appear and interact with each other. A common setup includes buttons in the banner creative that open and close the companion floating creative.

How do I set up companion functions in an banner with floating unit?

There are two ways to call companion functions when using the banner with floating ad format:

  • Display companion: The enabler.displayCompanion() method calls the display of one unit from its companion unit. For example, when this method is used in the banner unit, the floating unit displays.
  • Close companion: The enabler.closeCompanion() method calls the closure of one unit from its companion unit. For example, when this method is used in the banner unit, the floating unit closes.

Studio reminder

The display and close companion methods don't function correctly until you upload and preview your assets in the DoubleClick Studio Web UI as an banner with floating format.

In this example, you open the floating creative with the displayBtnInstance click object. This click object exists in the banner creative.

AS3 code snippet

import com.google.ads.studio.events.StudioEvent;

// Create function to display Floating ad
var onDisplayClickHandler:Function = function(event:MouseEvent):void {
    enabler.displayCompanion();
}

displayBtnInstance.addEventListener(MouseEvent.CLICK, onDisplayClickHandler);

Try it!

Create two buttons on the banner creative, one for displaying the floating, one for closing the floating.

Was this article helpful?