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