Seguimiento de clics del mouse

Cuando se usa 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, agregar objetos de escucha de eventos directamente al reproductor de video no funciona. Una solución alternativa es mostrar y ocultar el contenedor de anuncios, pero esto puede interferir con la funcionalidad del SDK. Una mejor solución es unir ambos jugadores en un div superior y adjuntarle objetos de escucha de eventos. En esta guía, se muestra cómo hacerlo.

Requisitos previos

• Reproductor de video HTML5 con el SDK de IMA HTML5 integrado. Si no tienes una, consulta nuestra guía de introducción.

Modifica tu código HTML

Primero, debes cambiar tu HTML para agregar una div que une el reproductor de anuncios y el reproductor de video de contenido. En la guía de introducción, esto ya se hace automáticamente 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>
...

Cómo agregar objetos de escucha de eventos a tu JavaScript

A continuación, agrega objetos de escucha de eventos al código JavaScript, por ejemplo, para detectar cuando 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!');});
  ...
}
...

Listo. Puedes hacer clic en el video y ver la ventana emergente que aparece sin importar si el anuncio se está reproduciendo y si aún funcionan los clics en el anuncio.

Probar

A continuación, puedes ver una implementación funcional.