Search
Clear search
Close search
Google apps
Main menu

HTML5 banner build guide

Add the HTML5 Enabler

The Enabler is the core code library of DoubleClick Studio. Think of it as the brain of the creative. All components and API calls must go through the Enabler. The Enabler library is required for all rich media creatives. By adding the Enabler, you automatically ensure that your creative:

  • includes standard tracking functionality for metrics like display time, number of impressions, interactive time, and other standard metrics
  • can handle more complex features like video and expand functionality
When you make an ad with Google Web Designer, the Enabler is included for you automatically when you select the DoubleClick environment. There's no need to add any of the code below.

Add the Enabler

To the <head> tag of your HTML file, add a script tag that links to the Enabler:

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

This provides a singleton object in the global namespace called Enabler. To call methods on it, call Enabler.isInitialized(), Enabler.exit(), and so on.

Optional: Set expanding flags

There are a few optional methods you can use to set behaviors for expanding ads. If you need to use any of these methods, put them before the Enabler initialization code below. These methods are:

  • Enabler.setExpandingPixelOffsets(left:number, top:number, opt_expandedWidth:number, opt_expandedHeight:number)
    Sets stage offsets for expanding ads.
  • Enabler.setIsMultiDirectional(value:Boolean)
    Allow the ad to expand in more than one direction.

  • Enabler.setStartExpanded(startExpanded:Boolean)
    When the ad loads, load with the expansion already open, instead of waiting for someone to expand it.

    Learn more about these methods in Studio's HTML5 SDK.

Wait for Enabler initialization

Nothing in the ad should auto-execute until the Enabler has initialized. This ensures that everything is properly loaded and Enabler methods can be accessed before a user interacts with the ad.

In your JavaScript, verify that the Enabler has initialized using the Enabler’s isInitialized method, which returns true or false. If true, make the call to start your function, in this example, enablerInitHandler(). If false, make a fallback call that listens for the Enabler’s INIT event.

// If true, start function. If false, listen for INIT.
window.onload = function() {
  if (Enabler.isInitialized()) {
    enablerInitHandler();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
  }
}

function enablerInitHandler() {
  // Start polite loading, or start animation,
  // load in your image assets, call Enabler methods,
  // and/or include other Studio modules.
}

Once the Enabler has initialized, start animation, load in your image assets, and call tracking methods, or include other Studio modules.

Update the Enabler

When a new version of the Enabler is released, you'll see a warning that your creative's Enabler version is out of date in the Studio UI. To upgrade to the latest version of the Enabler, re-upload the creative's primary HTML asset.

Was this article helpful?
How can we improve it?