HTML5 banner build guide

Add the HTML5 Enabler

The Enabler is the core code library of 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 Display & Video 360 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.

Set the creative's size

Unlike images or videos, HTML documents don't have dimensions on their own. To display your ad in the right size, add an ad size meta tag to your HTML file in the head section.

Copy the example meta tag below and change the width and height to match your creative size.

Example ad size meta tag for a 300x250 creative

<meta name="ad.size" content="width=300,height=250">

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 helpful?

How can we improve it?

Need more help?

Try these next steps:

Search
Clear search
Close search
Google apps
Main menu
10869094848056617731
true
Search Help Center
true
true
true
true
true
74220
false
false