Search
Clear search
Close search
Google apps
Main menu

HTML5 expanding build guide

Control expansion of the creative

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").

Example code

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 code

Use 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:

  1. The creative requests to expand using the requestExpand method.
  2. This request dispatches the EXPAND_START event which tells the creative to perform the expansion animation (if there is one).
  3. Once the expansion animation finishes, the creative requests to complete the expansion using the finishExpand method.
  4. This request dispatches the EXPAND_FINISH event which tells the creative that it may now perform additional functionalities or animation on the expanded panel.
Example code
<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. 

Place this line of code before the expandStartHandler function in the expansion code sample above:
Enabler.setStartExpanded(true);
Polite load with automatic expand example code

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();
};​


Was this article helpful?
How can we improve it?