Cómo implementar eventos de video en Google Analytics con Dailymotion y Google Tag Manager

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

ANTERIOR
SIGUIENTE

TIPS DE EXPERTOS

Suscríbete para impulsar tu negocio.

ÚLTIMOS ARTÍCULOS

La creciente importancia de las soluciones de detección de deepfake

En el mundo actual, altamente interconectado, la línea entre lo real y lo falso se desdibuja cada vez más. Esta mezcla entre lo auténtico y lo creado digitalmente ha dado lugar a una creciente necesidad de soluciones avanzadas para la detección de deepfakes. Pero, ¿qué oportunidades y desafíos presenta esto para las empresas? ¿Cómo pueden implementarse estas soluciones para maximizar su impacto positivo? Aquí exploramos estas preguntas con un enfoque positivo, examinando casos de uso aplicables tanto para B2B como para B2C.

Avances revolucionarios en inteligencia artificial y biotecnología

En el paisaje en constante cambio de la tecnología, estamos siendo testigos de avances revolucionarios en inteligencia artificial (IA) y biotecnología. Estos campos no solo están transformando la manera en que interactuamos con el mundo, sino que también están abriendo nuevas posibilidades tanto para empresas B2B como B2C. A continuación, exploraremos algunas de las aplicaciones más prometedoras y cómo pueden ser implementadas por grandes empresas para maximizar su potencial.

Todo sobre el marketing digital para potenciar tu negocio

El marketing digital se ha convertido en una herramienta indispensable para empresas de todos los tamaños y sectores. Con la creciente cantidad de tiempo que las personas pasan en internet, es esencial aprovechar este canal para alcanzar nuevos clientes y fortalecer el negocio. A continuación, exploraremos diferentes aspectos del marketing digital, su impacto y cómo implementarlo efectivamente en empresas grandes. También discutiremos casos de uso tanto en B2B como en B2C.

Nesa: Innovación en IA y tecnología Blockchain para el Futuro

En el panorama rápidamente cambiante de la inteligencia artificial (IA) y la tecnología blockchain, Nesa emerge como una solución revolucionaria, destacándose como una potente plataforma de Capa 1 que promete transformar la forma en que tanto las empresas como los consumidores interactúan con estas tecnologías de vanguardia.

data
Mallorca 184, 08036
Barcelona, Spain