VISIBILITÉ

GERER LA VISIBILITE

La gestion de la visibilité vous permet de jouer l’animation d’une créa uniquement lorsque celle-ci est visible.
Pour implementer cette solution , nous devons gérer l’événement de visibilité dans la bannière et exécuter l’animation lorsque l’evenement est capturé.

Cas où la bannière n’est pas visible :

Avant toute chose , vous devez modifier votre bannière pour l’affichage par defaut (image , div…), dans la cas ou la bannière n’est pas visible .
Dans votre fichier html, ajoutez une div correspondant à la taille de votre bannière ou une image par defaut.

Conseil : ajouter cette fonctionnalité uniquement lorsque votre bannière est terminer et publier. 

Editer votre fichier html.

exemple : 

Ajouter la balise html juste avant la balise google web designer

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

Paramétrage de l’execution Google web designer:

Ajouter la methode gwdAd.initAd(); à la fonction handleDomContentLoaded

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

Retirer le code de la fonction handleWebComponentsReady: 

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

Capturer la visibilité:

La methode ADventori.isVisible () vous renseigne quand la bannière est visible.

ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,callBackFunction); cette méthode s’abonne à l’événement de visibilité et appelle la fonction en paramètre lorsqu’elle est visible

exemple : 

//dans le cas ci-dessous, la fonction startAnimation sera appelée quand la bannière sera 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';
//execution de l'animation google web designer
  setTimeout(function() {
    gwdAd.initAd();
  }, 0);
}

lien d’exemple

Tester la visibilité de vôtre bannière:

Allez dans la page de test ADventori : lien

Uploadez votre bannière, pour activer la visibilité, cliquez sur l’icône en forme d’oeil

resultat :

Téléchargez l’exemple