VISIBILITY

VISIBILITY MANAGEMENT

Visibility Management lets you play a creative’s animation only when it’s visible.
To implement this solution, we must manage the visibility event in the banner and execute the animation when the event is captured.

Case where the banner is not visible:

First of all, you must modify your banner for the default display (image, div …), in case the banner is not visible.
In your html file, add a div corresponding to the size of your banner or a default image

Tip: Add this feature only when your banner is finished and publish.

Edit your html file.

example : 

Add the html tag just before the google web designer tag

<div id="loading" class="loading-image" style="background-image: url('no_visible.png');width:300px;height:250px;"></div>

<gwd-genericad id="gwd-ad"> .............. </gwd-genericad>

Setting up Google web designer execution:

Add the method gwAda.initAd(); in the handleDomContentLoaded function

function handleDomContentLoaded(event) {
  gwdAd.initAd();
}

Remove the code from the handleWebComponentsReady function:

function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}

Capture visibility:

The ADventori.isVisible() method tells you when the banner is visible.

ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,callBackFunction); this method subscribes to the visibility event and calls the function as a parameter when it is visible

example : 

//in the case below, the startAnimation function will be called when the banner is visible

if(!ADventori.isVisible()){
  ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,startAnimation);
}else{
  startAnimation();
}

/**
 * Starts animation.
 */
function startAnimation() {
  console.log("start Animation");
  // Start the Ad lifecycle.
  document.getElementById('loading').style.display = 'none';
//executing the google web designer animation
  setTimeout(function() {
    gwdAd.initAd();
  }, 0);
}

link example

Test the visibility of the banner:

Go to the ADventori test page : link

Upload your banner, to activate visibility click on the eye icon

result :

Téléchargez l’exemple