Search
Clear search
Close search
Google apps
Main menu

HTML5 banner build guide

Set up a polite load in HTML5 (optional)

What is polite loading?

Polite loading delays the loading of creative assets (like images) until the parent page has finished loading.

3-part polite load image: a) website partly loaded b) website fully loaded c) full ad appears including video
blue letter A Page is 20% loaded: initial content displays.
green letter b Page is 50% loaded: initial content remains, no additional action occurs.
red letter c Page is 100% loaded: additional content and actions display.

Studio doesn't require that your files use polite load, but publisher specifications may require it.

When you use this feature, you can load in a placeholder image or <div> tag, wait for the page to finish loading, and then control how the creative loads.

Set up polite loading in Google Web Designer

When you design creatives in Google Web Designer, you don't need to add any code. When you publish your file (either locally or directly to DoubleClick Studio, check the Polite Loading checkbox in the Settings section of the publish dialog:

Publish dialog in Google Web Designer with Polite Loading checked

Set up polite loading with JavaScript

Add the following code to your JavaScript file after the Enabler initialization code. This code checks if the page is loaded using the Enabler’s isPageLoaded method, which returns true or false. If true, call a custom function that loads your creative (in this example, the custom function is called showAd). If false, listen for the Enabler’s PAGE_LOADED event before calling showAd.

 Download a polite loading example creative (open logic.js to see all required Enabler code)
if (Enabler.isInitialized()) {
  init();
} else {
  Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}

// Runs when Enabler is ready.
function init() {
  if (Enabler.isPageLoaded()) {
    showAd();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, showAd);
  }
};

// Runs when the page is completely loaded.
function showAd(){
  // Add your code to load creative assets or begin creative animation.
};
Was this article helpful?
How can we improve it?