How to create an expandable ad item

This option is not enabled by default. Contact support to have it enabled on your account.

An expandable ad is an ad that appears to have a static size, but expands to show a larger version of the ad based on your desired trigger or action (e.g. when the viewer clicks on the ad). You can create an expandable ad in AdButler using an HTML ad and the optional expandable functionality of HTML5 ad items.

In this guide, you will learn:

  1. About the zone requirements and restrictions for expandable ads.
  2. How to create an expandable ad item in AdButler.
  3. About using our sample code for an expandable ad.
  4. 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).

back to top

Creating an expandable ad

  1. Go to the section of the relevant campaign (Your AdButler > Advertisers > Your Advertiser > Your Campaign) or zone (Your AdButler > Publishers > Your Publisher > Your Zone).
  2. Click Add Ad Item under the Ad Items table. The Add Ad Item window will appear.
  3. Click HTML5 (Rich Media). The New Ad Item page will appear.

Creating an expandable HTML5 ad in AdButler

  1. Click on Enable expandable functionality. Three dropdown menus will be added to the ad item settings: Expand method, Vertical direction, and Horizontal direction.

  2. 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.
  1. 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.
  1. Fill in the rest of the fields as needed.
  2. Click Save Ad Item.

back to top

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 in expanded-ad.
  • Within the body tags, place the actual image sources for collapsed-ad and expanded-ad in the src attribute of their respective image embed elements.
  • Within the onMouseEnter() method inside the script tags, replace the sample values in AdButlerIframeContentManager.triggerOpenEvent() with the actual expanded height and width of your ad.

back to top

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, onmouseleave etc.
  • 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.

back to top


Can't find what you're looking for?

Send us an email

hello@adbutler.com

Visit the blog

For more ad serving tips, industry news and AdButler insights.