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

  1. Page is 20% loaded: A polite load image is shown in the ad placement.
  2. Page is 50% loaded: More content is showing on the page. Polite load image is still shown.
  3. Page is 100% loaded: All page content loaded. Polite load image is hidden and the rest of the ad content is shown.


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). Studio doesn't require that your files use polite load, but publisher specifications may require it.

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 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 politeInit). If false, listen for the Enabler’s PAGE_LOADED event before calling politeInit.

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

// 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 whenthe 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?