In-page with Floating build guide

Add display and close companion functions

Once you build your In-page and 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 In-page creative that open and close the companion Floating creative.

How do I set up companion functions in an In-page with Floating unit?

There are two ways to call companion functions when using the In-page 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 In-page 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 In-page 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 In-page with Floating format.

In this example, you open the Floating creative with the displayBtnInstance click object. This click object exists in the In-page 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 In-page creative, one for displaying the Floating, one for closing the Floating.