To expand your creative to a set size, create an object that controls expansion on user interaction. You can set it up to expand on user click or mouse over. The example in this article shows you how to set it up to expand on click anywhere on the collapsed panel.
If you want to expand to fullscreen, use the expand to fullscreen guide instead.
1. Create a button
Create a <div> in the HTML file and give it an ID (for example, "expand-button").
Add a new div with the ID "expand-button".
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Add collapsed content here. -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Add expanded content here. -->
</div>
</div>
</body>2. Style the button
Style the object you created with CSS using the ID ("expand-button").
Example codeUse CSS to make the button the same size as the collapsed panel and set it to invisible.
#expand-button {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
cursor: pointer;
}3. Add expansion code
Expanding an ad is an asynchronous process that follows this exact order:
- The creative requests to expand using the
requestExpandmethod. - This request dispatches the
EXPAND_STARTevent which tells the creative to perform the expansion animation (if there is one). - Once the expansion animation finishes, the creative requests to complete the expansion using the
finishExpandmethod. - This request dispatches the
EXPAND_FINISHevent which tells the creative that it may now perform additional functionalities or animation on the expanded panel.
<head>
<script type="text/javascript">
var isExpanded = false;
function expandStartHandler() {
// Perform expand animation.
// Optionally, should you want the direction to expand in call:
// Enabler.getExpandDirection(); //
// When animation finished must call
Enabler.finishExpand();
}
function expandFinishHandler() {
// Convenience callback for setting
// final state when expanded.
isExpanded = true;
}
function collapseStartHandler() {
// Perform collapse animation.
// When animation finished must call
Enabler.finishCollapse();
}
function collapseFinishHandler() {
// Convenience callback for setting
// final state when collapsed.
isExpanded = false;
}
function actionClickHandler() {
isExpanded ? Enabler.requestCollapse() : Enabler.requestExpand();
}
Enabler.addEventListener(
studio.events.StudioEvent.EXPAND_START,
expandStartHandler);
Enabler.addEventListener(
studio.events.StudioEvent.EXPAND_FINISH,
expandFinishHandler);
Enabler.addEventListener(
studio.events.StudioEvent.COLLAPSE_START,
collapseStartHandler);
Enabler.addEventListener(
studio.events.StudioEvent.COLLAPSE_FINISH,
collapseFinishHandler);
actionBtn.addEventListener(
'click',
actionClickHandler,
false);
</script>
...
</head>
Optional: Expand the creative automatically the first time it loads
Some publishers allow creatives to expand automatically the first time the ad loads on a page. To do this, call the requestExpand method after the page is loaded. To avoid tracking the first, automatic expansion, use the Enabler's setStartExpanded method. Any user expansions after the automatic one will still be recorded.
expandStartHandler function in the expansion code sample above:
Enabler.setStartExpanded(true);
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
// Runs when Enabler is ready.
function init() {
if (Enabler.isPageLoaded()) {
politeInit();
} else {
Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
}
};
// Runs when the page is completely loaded.
function politeInit(){
Enabler.requestExpand();
};