En este artículo os contaremos cómo implementar el Player de video Dailymotion en nuestras páginas web para poder mapear correctamente distintos eventos desde Google Tag Manager.
El consumo de contenido de hoy en día hace tiempo que empezó un proceso de migración de lo escrito a lo visual. Las nuevas generaciones han nacido en la era de Internet y cada vez es más evidente la inmediatez con la que queremos consumir el contenido, por ello el formato audiovisual juega un papel cada vez más relevante. Es aquí donde entra en juego un reproductor de video como Dailymotion. Actualmente, por ejemplo, un periódico puede relatar una noticia en formato escrito, pero también tener una sección de video e incluso narrar las noticias directamente en este formato, con lo que como buenos analistas queremos aprender y saber interaccionan los usuarios con nuestros videos. Preguntas cómo: ¿Cuánto tiempo el usuario pasa viendo el video? ¿Se alcanzan ciertos porcentajes del video? ¿En qué momentos se pausa el video? son indispensables para conocer qué contenidos interesan y nos aportan mayor rendimiento.
Realmente Dailymotion nos ofrece la posibilidad de mapear muchos eventos de video, pero en este caso estos serán de los que nos ocuparemos:
- Inicio de video
- Play
- Pause
- Fin de video
Otra cosa a tener en cuenta, es cómo tiene que ser la implementación del Player de Dailymotion, si utilizamos los iframes no podremos registrar estos eventos de video, también está la opción de usar la SDK de JavaScript para Dailymotion, los eventos se podrán mapear, pero hablamos de tecnología obsoleta, y no sería de extrañar que un día nos dejase de funcionar.
En este punto entra en juego la JavaScript Player API de Dailymotion, con la cual mediante código JavaScript en nuestra página web podremos crear nuestro Player de video.
Antes de nada, necesitamos tener creados el video y Player dentro de la página de Dailymotion (necesitarás crearte una cuenta), en el apartado Vídeos e Incrustaciones/Reproductores podrás crear y ver los identificadores de ambos.
Veamos la implementación del Player:
Primero de todo, necesitamos hacer la llamada a la librería del Player, esta nos permitirá hacer uso de la instancia dailymotion y todas sus funciones, deberemos de introducir el identificador del Player anteriormente creado.
Después creamos un elemento DIV donde irá el video, y utilizamos un identificador para hacer referencia.
Ahora viene la parte del código JavaScript donde creamos el Player dentro del DIV y con el video de código “x84sh87” para este ejemplo.
En este momento el reproductor ya tiene que estar funcionando.
Recuerda tener correctamente implementado Google Tag Manager en las páginas donde necesites implementar el mapeo de eventos de video.
Ahora damos paso a nuestro GTM, necesitaremos:
- 1. Variables de tipo DataLayer:
Almacenarán los datos que queremos extraer de los eventos.
- 2. Trigger de vídeo:
Cada vez que el código envíe un dataLayer.push con el evento video se activará el trigger.
- 3. Tags
Necesitamos un tag de tipo Event, donde usaremos las variables creadas para los eventAction y eventLabel, el trigger a utilizar será el anteriormente creado.
El tag HTML que se encargará hacer las llamadas a la API de Dailymotion, y hacer un push al DataLayer con el evento ocurrido.
De esta forma, cada vez que ocurra uno de los siguientes eventos podremos ver en Google Tag Manager como el evento ‘video’ se ha disparado, lo cual nos permitirá llevar a cabo otras funciones utilizando nuestro Custom Trigger “Event – Video Interaction”.
