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 design your creative with an initial preload image, wait for the page to finish loading, and then load in additional assets (such as images, animations, or videos).

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

Use a preload image

If you want to show an initial image while you wait for the page to load, use the handleAdInitialized handler. Learn more

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, then open DCRM_HTML5_inPage_Polite_300x600.html to see the required Enabler code.

Polite loading code snippet 

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, showAd);
  }
};

// Runs when the page is completely loaded.
function politeInit(){
  // Add your code to hide any loading image or animation and load creative  
  // assets or begin creative animation.
};

Use a preload image

If you want to show an initial image while you wait for the page to load, you can load the preload image, then hide it when the PAGE_LOADED event is received. In the example files, the loading image is called "loading.gif" and its div element ID is "loading_image_dc".

 

Was this article helpful?
How can we improve it?