Suivi des clics de souris

Avec le SDK IMA, il existe deux lecteurs vidéo distincts : votre contenu le lecteur vidéo et le lecteur d'annonces. Le SDK gère automatiquement la superposition de l'annonce sur le lecteur vidéo du contenu. Par conséquent, l'ajout d'écouteurs d'événements au le lecteur vidéo ne fonctionne pas directement. Une solution consiste à afficher et masquer l'annonce. mais cela peut interférer avec le fonctionnement du SDK. La meilleure solution consiste à encapsuler les deux joueurs dans un div parent et lui associer des écouteurs d'événements. Ce guide vous explique comment procéder.

Prérequis

• Lecteur vidéo HTML5 avec SDK IMA pour HTML5 intégré. Si vous n'en avez pas, consultez notre guide de démarrage.

Modifier votre code HTML

Vous devez d'abord modifier votre code HTML pour ajouter un div encapsulant à la fois le lecteur d'annonces et le lecteur vidéo de contenu. Dans le guide de démarrage, il s'agit déjà fait pour vous avec mainContainer:

...
<div id="mainContainer">
  <div id="content">
    <video id="contentElement">
      <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4">
    </video>
  </div>

  <div id="adContainer"></div>
</div>
...

Ajouter des écouteurs d'événements à votre code JavaScript

Ajoutez ensuite des écouteurs d'événements à votre code JavaScript, par exemple pour détecter lorsqu'un utilisateur clique sur la vidéo. Par exemple, dans ads.js:

...
function init() {
  videoContent = document.getElementById('contentElement');
  mainContainer = document.getElementById('mainContainer');
  mainContainer.addEventListener('click', function() { alert('I was clicked!');});
  ...
}
...

Et voilà ! Si vous cliquez sur la vidéo, le pop-up s'affiche, si une annonce est en cours de lecture et qu'elle continue de générer des clics.

Essayer

Vous trouverez ci-dessous une implémentation fonctionnelle.