Desde Parnaso, como agencia de publicidad donde trabajamos día a día en marketing digital y todo lo que concierne con el seguimiento de los usuarios cuando visitan las webs de nuestros clientes, os queremos contar una de las maneras que se pueden utilizar en Google Tag Manager para el seguimiento en Google Analytics 4 de videos incrustados en nuestro site.
Cualquier agencia especializada en marketing digital debe saber que la herramienta de seguimiento que Google nos ofrece, Google Tag Manager, es fundamental tenerla bien configurada para el seguimiento de las acciones de los usuarios en cualquier web o ecommerce.
En este sentido esta herramienta nos facilita bastante el trabajo y como decimos es muy recomendable tenerla presente para cualquier campaña de marketing digital que queramos implementar correctamente, y posteriormente tener a nuestro alcance una medición de la misma para poder optimizarla si fuese necesario, que normalmente casi siempre es necesario, en eso se basa el marketing digital.
Índice de contenidos
¿Cómo medimos vídeos incrustados en nuestra web con Google Tag Manager?
En ocasiones nuestros videos están alojados en el propio servidor donde tenemos la web o existe la posibilidad que los videos que se expongan en la web están enlazados al canal de Youtube o Vimeo, es más, la mejor opción con respecto a estos videos es que estén subidos al canal y desde ahí sea desde donde los enlacemos.
Aun así, nos hemos encontrados con algunos clientes que utilizan videos incrustados que no utilizan estas plataformas, es decir, con etiquetas <video> en lugar de mediante reproductores de terceros.
En Google Tag Manager tenemos seguimientos de vídeos integrados con estas plataformas, es bastante sencillo configurar este tipo de seguimiento. Ahora bién, ¿Cómo podemos realizar el seguimiento cuando son vídeos HTML5 incrustados?
Tal como os vamos a indicar ahora podremos detectar las interacciones deseadas con este tipo de vídeos, funcionarán de la misma manera que el que ya existe para las aplicaciones de terceros, y todo quedara registrado en Google Analytics 4.
¿Por qué utilizar Google Tag Manager para el seguimiento de videos?
Todos estos parámetros podemos recogerlos desde nuestro Analytics.
Actualmente GA4, ya viene con un parámetro por defecto de video.
Si nos vamos al flujo de datos, que se encuentra en la cuenta de GA4, en el apartado de configuración podemos ver que una de las acciones que recoge es la de “interacción con videos”.
Aunque muchos implementadores coinciden en que concretamente este parámetro no se recoge del todo como quisiéramos, en este sentido aún le quedan a Google pulir algunos aspectos. Como sabemos GA4 es una herramienta bastante nueva y esperamos que a lo largo del tiempo se realicen actualizaciones de mejora por parte de sus creadores.
Pero de momento es lo que tenemos, y es por esto que GTM nos ayuda a solucionar este déficit. Si nos dirigimos a los activadores y abrimos el panel que nos trae por defecto GTM podemos ver que uno de ellos esta específicamente diseñado para realizar un seguimiento en los videos.
Pero, como podemos ver, nos hace referencia a Videos de Youtube. Es lógico, la plataforma de Google para videos es Youtube, y estamos utilizando una herramienta de medición que Google nos ofrece.
En el caso que estamos explicando aquí, como hemos comentado, la reproducción de los videos se realiza desde el propio HTML de la web.
Esto hace que si queremos hacer un seguimiento de los mismos tendremos que realizar configuraciones extras y más complejas en GTM, ya que estas activaciones debemos crearlas nosotros mismos.
¿Hay que ser un experto en marketing digital para utilizar GTM en este caso?
Ni mucho menos, solo entender un poco el funcionamiento de Google Tag Manager y seguir estos pasos.
La parte más importante de esta configuración es un código personalizado que está diseñado para seguir buscando interacciones de video HTML5.
Hemos agregado algunas modificaciones para que el seguimiento sea más conveniente con Google Analytics 4. Pero antes de crear esta etiqueta, debemos crear una variable de JavaScript personalizada.
Para que no afecte al rendimiento de la página y puesto que vamos a emplear una personalización con bastantes líneas de código debemos cerciorarnos que solo trabaje en aquellas páginas que contengan video, y no en toda la web, para que afecte lo mínimo posible a la carga y rendimiento de la web.
En lugar de activar el oyente en cada página, lo activaremos solo en aquellas páginas donde el reproductor HTML5 está realmente presente. Eso se puede hacer con la variable JavaScript personalizada.
En Google Tag Manager, vamos a Variables > Nuevo > JavaScript personalizado y pegamos el siguiente código:
Luego vamos a Activadores > Nuevo > Ventana cargada e ingresamos la siguiente configuración:
Este activador saltará cuando la página se cargue por completo y el reproductor de video HTML5 esté presente en una página. ¿Cómo sabremos si el usuario está en una página con video?
Esa variable JavaScript personalizada devolverá verdadero (true) si el reproductor está realmente disponible en una página.
Ahora es el momento de crear una etiqueta HTML personalizada que contendrá el código del oyente.
Esta etiqueta buscará interacciones de video HTML5 y, si detecta una, podremos verla en el modo de vista previa de GTM, por lo tanto, activará la etiqueta de evento GA4. En GTM, vamos a Etiquetas > Nuevo > HTML personalizado y pegamos el siguiente código:
<script>
// Let's wrap everything inside a function so variables are not defined as globals
(function() {
// This is gonna our percent buckets ( 25%-75% )
var divisor = 25;
// We're going to save our players status on this object.
var videos_status = {};
// This is the funcion that is gonna handle the event sent by the player listeners
function eventHandler(e) {
switch (e.type) {
// This event type is sent everytime the player updated it's current time,
// We're using for the % of the video played.
case 'timeupdate':
// Let's set the save the current player's video time in our status object
videos_status[e.target.id].current = Math.round(e.target.currentTime);
// We just want to send the percent events once
var pct = Math.floor(100 * videos_status[e.target.id].current / e.target.duration);
for (var j in videos_status[e.target.id]._progress_markers) {
if (pct >= j && j > videos_status[e.target.id].greatest_marker) {
videos_status[e.target.id].greatest_marker = j;
}
}
// current bucket hasn't been already sent to GA?, let's push it to GTM
if (videos_status[e.target.id].greatest_marker && !videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker]) {
videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker] = true;
dataLayer.push({
'event': 'video',
'video_status': 'progress',
'video_provider' : 'generic html5 video player',
'video_percent': videos_status[e.target.id].greatest_marker,
// We are sanitizing the current video src string, and getting just the video name part
'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
});
}
break;
// This event is fired when user's click on the play button
case 'play':
dataLayer.push({
'event': 'video',
'video_status' : 'play',
'video_provider' : 'generic html5 video player',
'video_percent': videos_status[e.target.id].greatest_marker,
'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
});
break;
// This event is fied when user's click on the pause button
case 'pause':
if (videos_status[e.target.id].greatest_marker < '75') {
dataLayer.push({
'event': 'video',
'video_status' : 'pause',
'video_provider' : 'generic html5 video player',
'video_percent': videos_status[e.target.id].greatest_marker,
'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
});
}
break;
// If the user ends playing the video, an Finish video will be pushed ( This equals to % played = 100 )
case 'ended':
dataLayer.push({
'event': 'video',
'video_status' : 'complete',
'video_provider' : 'generic html5 video player',
'video_percent': '100',
'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
});
break;
default:
break;
}
}
// We need to configure the listeners
// Let's grab all the the "video" objects on the current page
var videos = document.getElementsByTagName('video');
for (var i = 0; i < videos.length; i++) {
// In order to have some id to reference in our status object, we are adding an id to the video objects
// that don't have an id attribute.
var videoTagId;
if (!videos[i].getAttribute('id')) {
// Generate a random alphanumeric string to use is as the id
videoTagId = 'html5_video_' + Math.random().toString(36).slice(2);
videos[i].setAttribute('id', videoTagId);
}// Current video has alredy a id attribute, then let's use it <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/2/svg/1f642.svg">
else {
videoTagId = videos[i].getAttribute('id');
}
// Video Status Object declaration
videos_status[videoTagId] = {};
// We'll save the highest percent mark played by the user in the current video.
videos_status[videoTagId].greatest_marker = 0;
// Let's set the progress markers, so we can know afterwards which ones have been already sent.
videos_status[videoTagId]._progress_markers = {};
for (j = 0; j < 100; j++) {
videos_status[videoTagId].progress_point = divisor * Math.floor(j / divisor);
videos_status[videoTagId]._progress_markers[videos_status[videoTagId].progress_point] = false;
}
// On page DOM, all players currentTime is 0
videos_status[videoTagId].current = 0;
// Now we're setting the event listeners.
videos[i].addEventListener("play", eventHandler, false);
videos[i].addEventListener("pause", eventHandler, false);
videos[i].addEventListener("ended", eventHandler, false);
videos[i].addEventListener("timeupdate", eventHandler, false);
videos[i].addEventListener("ended", eventHandler, false);
}
})();
</script>Agregamos el activador de ventana cargada creado anteriormente a esta etiqueta.
Aunque tenemos esos datos de video en la capa de datos, no podemos usarlos hasta que creemos variables para cada punto de datos que planeamos usar.
Para cada uno de ellos, necesitamos crear una separada. Vayamos a Variables > Nuevo > Data Layer Variable e ingresamos la siguiente configuración:
Solo debemos cambiar el nombre de la variable de la capa de datos en cada una al crear las demás.
Cada vez que se envía un evento de «video» a la capa de datos queremos activar una etiqueta GA4.
Esa etiqueta enviará los datos del video a Google Analytics. La única forma en que podemos activar una etiqueta es mediante el uso de un disparador.
Para esta configuración utilizaremos un activador de evento personalizado.
Aquí os dejamos una ayuda de cómo se puede configurar un activador de evento personalizado, y mandarlo a los informes del nuevo Google Analytics para este caso.
Esperamos que os haya servido de ayuda, para cualquier campaña de marketing digital que se precie es muy recomendable utilizar este tipo de herramientas, no dudes en aplicarlas para mejorar tu ecommerce o página web. Cualquier pregunta que tengas no dudes en contactar con alguno de nuestros expertos en marketing digital, que para eso estamos. Hasta pronto!
Si necesitas una agencia de publicidad que combine creatividad, experiencia y resultados comprobados, estás en el lugar correcto. En Parnaso, contamos con un equipo de expertos altamente capacitados y una trayectoria llena de éxitos en campañas reconocidas. No es casualidad que hayamos sido premiados en múltiples ocasiones como la mejor agencia de publicidad de España.
