Realiza un seguimiento de los clics del mouse

Cuando usas el SDK de IMA, hay dos reproductores de video separados: el reproductor de video de contenido y el reproductor de anuncios. El SDK administra automáticamente la superposición del reproductor de anuncios sobre el reproductor de video de contenido. Como resultado, no funciona agregar objetos de escucha de eventos directamente al reproductor de video. Una solución alternativa es mostrar y ocultar el contenedor de anuncios, pero esto puede interferir en la funcionalidad del SDK. Una mejor solución es unir ambos reproductores en un div superior y adjuntar objetos de escucha de eventos a él. En esta guía, se muestra cómo hacerlo.

Requisitos previos

Modifica tu código HTML

Primero, debes cambiar el código HTML para agregar un div que una el reproductor de anuncios y el reproductor de video de contenido. En *Configurar el SDK de IMA*, ya se hizo por ti con 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>
...

Agrega objetos de escucha de eventos a tu código JavaScript

A continuación, agrega objetos de escucha de eventos a tu código JavaScript, por ejemplo, para detectar si un usuario hace clic en el video. Por ejemplo, en ads.js: 

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

Eso es todo. Puedes hacer clic en el video y ver que aparece la ventana emergente, independientemente de si se está reproduciendo un anuncio y de que las conversiones por clic en el anuncio sigan funcionando.

Probar

A continuación, puedes ver una implementación en funcionamiento.