Viewability Management

Viewability 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.

For the next steps you have to go in the panel Code view, and find the JavaScript part.

Setting up Google web designer execution

First Step

Add the method gwdAd.initAd(); in the handleDomContentLoaded function:

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

Second Step

Remove the code from the handleWebComponentsReady function:

function handleWebComponentsReady(event) {
    // Start the Ad lifecycle.
    setTimeout(function() {  /* <-- Remove this line */
        gwdAd.initAd();      /* <-- Remove this line */
    }, 0);                   /* <-- Remove this line */
}

Capture visibility

The ADventori.isVisible method lets you know if the banner is visible.

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

Example

In the case below the function startAnimation will be called when the banner will be visible:

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

function startAnimation() {
    //Executing the google web designer animation
    setTimeout(function() {
        gwdAd.initAd();
    }, 0);
}