Expanding build guide
How the Expanding component works
The Expanding component gives you flexibility in controlling your expanding creative. There are several options and features that you can implement with this component. We recommend learning a bit about how the basic functions of the component work before adding the component to your creative.
The basic functions of the expanding component are to control the expansion and collapse of your creative, to position the ad on the page, to determine the direction of the expand, and to enable standard tracking for the creative.
- Control the expansion and collapse of your creative
The main function of this component is to handle the expand and collapse functions of your creative. In this guide, you'll learn how to control these functions.
Position your ad on the page
Another basic function of the Expanding component is to help the website identify the portion of your parent file that represents the collapsed panel.
Since the stage of your parent file is larger than the area of the collapsed panel, and expansion can be set in any direction, it's important to define the collapsed area so the page knows how to render your ad.
When your ad is serving on a site page, the page will match the location of the Expanding component to the ad slot. It's important to place the component over the collapsed dimensions in your parent file so that the stage is clipped to the right size and the collapsed panel shows correctly.
- Determine expanding direction
The Expanding component can also determine the direction of your ad's expansion. The position of the Expanding component in relation to the rest of the creative's stage determines the expand direction.
The component clips the stage until the expand function is called, at which point it reveals the rest of the stage, making it appear as if the ad is expanding in the size and direction of the rest of the space.
- Enable standard tracking
The Expanding component automatically tracks metrics like the number of expansions and Rich Media expansion time.
The Expanding component can also:
- act as a button to expand the creative
- set up collapse on mouseout
- set up an animated collapse
- enable multi-directional expand
- execute functions on expand and collapse
These functions are covered later in the build guide, but first, let's Add the Expanding component to your creative.