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

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.

Creatividad e IA: aliados estratégicos

La creatividad ha sido durante siglos una de las características más únicas y valiosas del ser humano. Es el resultado de la imaginación, la emoción y un toque personal que nos permite desarrollar ideas innovadoras y artísticas. Sin embargo, con el auge de la tecnología y la inteligencia artificial (IA), nos encontramos ante una pregunta que ha generado debate: ¿es la IA un amigo o un competidor en las industrias creativas? En este artículo, nos enfocaremos en cómo la IA puede funcionar como un aliado estratégico, potenciando la creatividad tanto en entornos B2B como B2C.

Transformación del comercio digital a causa de la IA generativa

La manera en que interactuamos con los sitios web y buscamos productos ha experimentado una transformación radical en los últimos años. Gracias a los avances en inteligencia artificial (IA) generativa y la búsqueda conversacional, el proceso de compra en línea se ha vuelto más intuitivo y eficiente. En este artículo, exploraremos cómo estos avances pueden optimizar la experiencia de compra en sitios web, presentaremos casos de uso en los sectores B2B y B2C, y discutiremos cómo las grandes empresas pueden integrar estas tecnologías para mantenerse competitivas.

data
Mallorca 184, 08036
Barcelona, Spain