How to create an expandable ad item
This option is not enabled by default. Contact support to have it enabled on your account.
In this guide, you will learn:
- About the zone requirements and restrictions for expandable ads.
- How to create an expandable ad item in AdButler.
- About using our sample code for an expandable ad.
- About the ad item requirements and restrictions for expandable ads.
Zone requirements and restrictions
- Expandable ads and campaigns with expandable ads should be assigned only to Standard zones with the zone size set to Fixed for the expandable ad to be displayed properly.
- The zone's dimensions must match the collapsed dimensions of the ad item.
- The zone's Responsive setting must not be changed from the default option (Standard fixed dimension delivery).
Creating an expandable ad
- Go to the section of the relevant campaign (Advertisers > Your Advertiser > Your Campaign).
- Click Add Ad Item at the top right of the Ad Items table. The Ad Item type window will appear.
- Click HTML5 (Rich Media). The New Ad Item page will appear.
Click on Enable expandable functionality. Three dropdown menus will be added to the ad item settings: Expand method, Vertical direction, and Horizontal direction.
Choose an expand method.
- Float: the ad will be displayed on top of the other elements on the page, potentially blocking some of the content.
- Push : the ad will push nearby elements in the page in the direction(s) that it will expand.
- Choose a direction in Vertical direction, Horizontal direction or in both dropdown menus. These options indicate how your ad will expand relative to its original position.
If your ad expands both vertically and horizontally, you can choose a direction for both dimensions. However, you should choose a vertical direction only if your chosen expand method is Float AND your ad is coded to expand up or down. Similarly, you should choose a horizontal direction only if your chosen method is Float AND your ad is coded to expand left or right.
- Fill in the rest of the fields as needed.
- Click Save Ad Item.
Sample expandable ad HTML
Below is a sample code for an expandable ad item. It's for a vertical ad - note how its expanded version is taller than its default (collapsed) version.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
/* Many browsers set a default margin that will affect the body element within an iframe, so it will
likely be necessary to overwrite that value. */
margin: 0;
}
.collapsed-ad {
/* These values should match the dimensions of your collapsed ad and the Ad Zone that the ad will be
used in. */
height: 500px;
width: 500px;
}
.expanded-ad {
/*
These values should match the dimensions of your expanded ad.
*/
height: 800px;
width: 500px;
display: none;
}
</style>
</head>
<body>
<div class="expandable-ad" onmouseenter="onMouseEnter()" onmouseleave="onMouseLeave()">
<img
src="[place collapsed ad image source here]"
class="collapsed-ad"
/>
<img
src="[place expanded ad image source here]"
class="expanded-ad"
/>
</div>
<script>
// we get the collapsed ad and expanded ad elements
var collapsedAd = document.querySelector('.expandable-ad .collapsed-ad');
var expandedAd = document.querySelector('.expandable-ad .expanded-ad');
function onMouseEnter() {
// we hide the collapsed ad and show the expanded ad
collapsedAd.style.display = 'none';
expandedAd.style.display = 'block';
// This call will update the iframe appropriately, depending on your ad item settings. The arguments should be
// your expanded ad's width and height, in that order
AdButlerIframeContentManager.triggerOpenEvent(500, 800);
}
function onMouseLeave() {
// we hide the expanded ad and show the collapsed ad
collapsedAd.style.display = 'block';
expandedAd.style.display = 'none';
// This call will update the iframe appropriately, depending on your ad item settings.
AdButlerIframeContentManager.triggerCloseEvent();
}
</script>
</body>
</html>
If you want to adopt the sample code:
- Within the style tags, replace the sample values with the actual default (collapsed) height and width of your ad in
collapsed-ad, and the actual expanded height and width inexpanded-ad. - Within the body tags, place the actual image sources for
collapsed-adandexpanded-adin thesrcattribute of their respective image embed elements. - Within the
onMouseEnter()method inside the script tags, replace the sample values inAdButlerIframeContentManager.triggerOpenEvent()with the actual expanded height and width of your ad.
Ad item requirements and restrictions
- The ad's ability to expand should be coded within the HTML file; AdButler cannot automatically create an expandable ad out of any custom HTML ad item.
- The ad must change its internal dimensions whenever the expand event is triggered, and again whenever the collapse event is triggered. You can use whatever DOM events you like to trigger the expansion and contraction -
onclick,onmouseenter,onmouseleaveetc. - When the expand event is triggered, you must call
AdButlerIframeContentManager.triggerOpenEvent()with the width and height of your expanded ad as the arguments. - When the collapse event is triggered, you must call
AdButlerIframeContentManager.triggerCloseEvent().
For more information on creating HTML5 ad items, read How to create an HTML5/Rich media ad item.
You can also create expandable ads using native templates and native ad items. Custom rendering native ad items can emulate only floating expandable ads. Styled native ad items can emulate both floating and pushing expandable ads, though you will need to code the behavior in JavaScript.
