- MDX: Manage > Ads > New > Design New HTML5 Ad
- Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads
An HTML5 Expandable Banner is an ad that starts in a banner space and then, either automatically or upon user initiation, expands outside of the banner. The expansion can be a panel appearing adjacent to the banner or a free-floating layer. The Expandable Banner ad contains at least three elements:
- A default image
- A default HTML5 banner
- At least one panel (the expansion HTML5 file).
You can create an HTML5 Expandable Banner in Ad Builder. You define the basic banner and panel dimensions in the Welcome page. When the application opens, the basic banner and panel are displayed in the Instances pane. The banner is set as the Master_banner and cannot be deleted or replaced.
The HTML5 Expandable ad is uploaded to the platform as a Workspace directly from Ad Builder.
Ad Builder provides the following advanced Expandable ad functionality:
- Expand to Full Screen: You can configure a panel to expand to either predefined dimensions, or alternatively to full screen. For more information, see HOW TO: Configure a Panel to Expand to Full Screen.
- Pushdown Ads: You can configure an HTML5 Pushdown Expandable ad expands the panel downwards while pushing down the existing content on the webpage. For more information, see HOW TO: Configure an HTML5 Pushdown Expandable Ad.
- Responsive Panels: A responsive panel expands to full width or height depending on your selection. You can decide whether to expand the panel to full width of the ad or to full height of the ad. For more information, see OVERVIEW: Creating HTML5 Responsive Ads in Ad Builder.
- Trigger Events based on Banner and Panel Visibility
Creating an HTML5 Expandable Banner
Important: In the Sizmek Advertising Suite platform, the Expand settings defined on the Creative level in Ad Builder are preserved when uploading the ad to the Sizmek Advertising Suite platform. You can however modify these settings on the Ad level in the platform. For more information, see REFERENCE: Expandable Ad Fields
- Access Ad Builder according to your selected platform.
- In the Welcome page, click Blank Ad, and in the list select Expandable.
- Set the banner and panel dimensions.
The banner is set as the Master_Banner and cannot be removed once the ad is configured.
- Click Create.
Ad Builder opens displaying your expandable ad. The ad elements are displayed in the Instances pane.
- Access the Instances pane. The Master_Banner and panel_1 are displayed in the Instances pane.
- To configure the Master_Banner in the Properties pane, perform these steps:
- Click Master_Banner in the instances pane.
- Set the default image for the ad. This step is mandatory.
- Add an event that will trigger the panel to expand using the expand or pushdown action, for example: a Tap/Click event.
- In the Action and Animations section, click Create New Event.
- To assign an animation to the panel, click Add Action.
and select the Expand or Pushdown action from the Expandable category in the Actions list.
- Configure the Expandable panel to collapse to the banner size:
- In the Action and Animations section, add an event that will trigger the panel to collapse using the collapse action, for example: a Tap/Click event.
- From the Instances pane, click the panel.
- Add a Button component to the close the banner when clicked.
- Assign the collapse action to the panel by clicking the Ad Action and select the Collapse action from the Expandable category in the Actions list.
- Preview the ad in Preview in the platform.
Triggering Events Based on Panel and Banner Visibility
Ad Builder enables you to trigger events based on the visibility and non-visibility of banners and panels on the page. You can trigger an event when a banner becomes visible to the user, or when the user can no longer view the banner.
You can apply the following events to banners and panels:
- On Visible: This event fires when 50% of the banner or the panel area becomes visible to the user, for 0 milliseconds (instantly), in case the banner or panel were less visible previously.
On Not Visible: This event fires when 50% of the banner' or the panel area when less than 50% of the banner or panel is in view, for 0 milliseconds (instantly), in the case the banner or panel were more visible previously.
The most common actions that trigger these events are:
- Video play
- Panel expand