Expanding build guide

Set up an auto-expanding function

You can initiate the expand or collapse of an expanding creative by making a call to the Expanding class in the DoubleClick Studio API. Similarly, you can use our auto-expand method to start a creative in an expanded state.

In the previous steps, you learned how to add the Expanding component to your creative and to use the API to set up an expanding function and set up a collapse function. Once you’ve set up the basic expand in your units, you can set up your creative to auto-expand.

How do I set up the auto-expand function?

In the parent file or at the very beginning of the timeline in the collapsed panel, make a call to this method:

Expanding.startExpanded(panelName:String).

panelName is optional, and is used to pass the name of the specific child you want to auto-expand. This is important if you want to set up more than one child panel in your Expanding creative. If you don't define any panels, the main timeline expand actions are invoked.

By design, the Expanding.startExpanded() method doesn't automatically track the ad expansion metric as the Expanding.expand() method does. If you want to track how many times your auto-expand function fired, we recommend that you also set up a counter along with the Expanding.startExpanded() method.

For more information on custom tracking, see Add custom tracking.

Also, to comply with site specs for auto-expand creatives, you may need to build a timer to make the unit auto-collapse after a set number of seconds. For more information on auto-collapse, see set up an auto-collapse in this build guide.

How do I set up an auto-expand panel and user-initiated panel?

To set up two different panels for an auto-expand and a user-initiated panel, add two different child panels to the Expanding component. You can add expanded child panels while you add the Expanding component to your parent file. In this example, the two child panels are auto and user.

  1. Set up the child auto to auto-expand

    Open the Expanding component's Component Inspector in the parent file. Assign the name "auto" to the child panel that you want to auto-expand.

    In Frame 1 of the collapsed panel, make a call to the auto-expand method expanding.startExpanded("auto").

    Studio reminder

    Whenever you make a call to the Expanding class from the DoubleClick Studio API in a new file, be sure to import the StudioClassAccessor and get a reference to the Expanding class with this code:
    import com.google.ads.studio.utils.StudioClassAccessor;

    //Get a reference to the Expanding class
    var expanding:Object = StudioClassAccessor.getClass(StudioClassAccessor.CLASS_EXPANDING)["getInstance"]();

  2. Set up the child user to expand on click

    Open the Expanding component's Component Inspector in the parent file. Assign the name "user" to the child panel that you want to expand on user interaction.

    In the collapsed panel, set up a Click object to make a call to the expand method expanding.expand("user").

    If you already set up a custom expand button following the instructions in Set up a basic expansion, add the child panel name "user" to the existing expand function.

Try it!

Set up the auto-expand function by calling the auto-expand method from the collapsed child panel.

AS3 code snippet
import com.google.ads.studio.utils.StudioClassAccessor;

//Get a reference to the Expanding class
var expanding:Object = StudioClassAccessor.getClass(StudioClassAccessor.CLASS_EXPANDING)["getInstance"]();

//Call the Auto-expand method
expanding.startExpanded();

Test your work

Run the creative in Flash. Once the ad is politely loaded, the expanded content should load into the parent SWF and the following traces should appear in the output panel:

    Enabler: Event: expand
    Enabler: Ad expanded
    Expanding component event: expand
    Expanding component event: loadInit
    Expanding component event: load