What is polite loading?
Polite loading delays the loading of creative assets (like images) until the parent page has finished loading.
- Page is 20% loaded: A polite load image is shown in the ad placement.
- Page is 50% loaded: More content is showing on the page. Polite load image is still shown.
- 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:
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.
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".