En este post vamos a ver una «receta» muy sencilla para aprender cómo medir los vídeos de Vimeo con Tag Manager, en un nivel elemental, con sus dos acciones más clave: play y complete.
He sacado el código de gitHub y lo he adaptado como he creído mejor… y quitando el pause, porque cada vez que se completaba el vídeo se mandaba automáticamente el pause de nuevo, y porque tampoco me parece algo muy importante para medir (sobre todo con el error mencionado).
Si alguien quiere, se puede mejorar el código, seguro! aquí vemos solo en forma básica cómo podemos conectar con la API de Vimeo, para enviar las acciones importantes de reproducción de vídeo a Tag Manager (vía DataLayer).
Después, y gracias a la capa de datos, desde GTM lo enviamos como evento a donde deseemos, como conversión, o como nos venga mejor hacer en el proyecto en cuestión.
Sin más rodeos, este es el código que se debe poner en una etiqueta HTML personalizada:
<script src=»//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js»></script>
<script>
var vimeoTag = document.getElementsByTagName(‘iframe’);
for(i=0; i<vimeoTag.length; i++){
var newSrc = vimeoTag[i].src + ‘?api=1&player_id=player_’ + i;
vimeoTag[i].id = ‘player_’ + i;
vimeoTag[i].src = newSrc;
}
var player = document.getElementsByTagName(‘iframe’);
// Listen for messages from the player
if (window.addEventListener){
window.addEventListener(‘message’, onMessageReceived, false);
}
else {
window.attachEvent(‘onmessage’, onMessageReceived, false);
}
// Handle messages received from the player
function onMessageReceived(e) {
var data = JSON.parse(e.data);
switch (data.event) {
case ‘ready’:
onReady(data.player_id);
break;
case ‘play’:
onPlay(data.player_id);
break;
case ‘finish’:
onFinish(data.player_id);
break;
}
}
// Helper function for sending a message to the player
function post(action, value, playerid) {
var data = {
method: action
};
if (value) {
data.value = value;
}
var message = JSON.stringify(data);
var playerVaria = document.getElementById(playerid);
var url = playerVaria.src.split(‘?’)[0];
var videoNumber = playerid.split(«_»)[1];
player[videoNumber].contentWindow.postMessage(message, url);
}
function onReady(player_id) {
post(‘addEventListener’, ‘finish’, player_id);
post(‘addEventListener’, ‘play’, player_id);
}
function onFinish(player_id) {
dataLayer.push({‘event’: ‘vimeoFinished’});
}
function onPlay(player_id) {
dataLayer.push({‘event’: ‘vimeoPlayed’});
}
</script>
Lo que hace es seguir las acciones play y finished del vídeo, y luego comunicarlas a GTM vía dataLayer, para poder cazarlas en activadores de evento personalizado.
Podemos llamar a la etiqueta Vimeo Listener y la activaremos solo en aquellas páginas donde tengamos los vídeos de Vimeo.
Preferentemente, activamos en Page DOM para no sobrecargar la carga de página inicial de scripts:
(recuerda que esto es solo un ejemplo y seguramente tu activador sea Page Videos DOM o similar (donde pongas como condición extra la/s URL/s y no solo el DOM de toda la web)
Además del código anterior, hay un par de cosas adicionales por hacer, dos variables que he visto necesarias para distinguir el vídeo. Si solo tenemos un vídeo de Vimeo en toda la web te lo puedes ahorrar y personalizar el código JS de arriba quitando la variable {{Vimeo URL}} y reemplazándola por un texto fijo:
- Vimeo SRC: una variable de JavaScript personalizado que captura el atributo «src» del vídeo de VIMEO (osea, donde se llama para mostrarlo)
- Vimeo URL: convierte la URL anterior en una URL real y clicable de Vimeo (para poder hacer copy paste por ej desde Analytics y ver de qué vídeo se trata)
A mí el player_id que montan en el código no me ha convencido del todo y por eso he hecho las variables anteriores.
Pero vamos, esto es solo una solución más. Se puede optar por muchas otras, como poner simplemente la URL de la página donde está el video en nuestra web (osea, {{Page URL}}. Todo lo cuento solo con fines didácticos, no digo que sea la única opción ni la ideal.
Y por último, para enviar la información, por ejemplo a Google Analytics, por ejemplo en su versión Universal, usaríamos esta etiqueta de Google Tag Manager para vídeos de Vimeo:
Y este el activador:
NOTA: es importante es mencionar que esta «sencilla» solución está pensada para un único vídeo de Vimeo por URL.
Para una implementación más compleja y donde podáis editar el iframe de insertar el vídeo de Vimeo, os dejo este otro enlace de Github que pinta muy muy bien :)
O si prefieres una formación in company, en tu empresa, sobre:
- Tag Manager y Píxeles de Conversión
- Google Analytics básico o avanzado
- Data Studio
- Supermetrics Functions
- SEO
- Google Ads
