Vimeo | Cómo medir reproducciones con GTM y Google Analytics 4

Has llegado hasta aquí seguramente porque quieres aprender a cómo medir reproducciones de Vimeo con GTM y Google Analytics 4.

¡Felicitaciones! Porque has llegado al lugar perfecto. 

Google Analytics 4 ofrece la medición de los videos con la versión mejorada. Pero lo importante aquí, es que solo admite el seguimiento de los videos de YouTube. Entonces, no podremos realizar la medición de interacciones.

Antes de continuar, me gustaría recordarte que si lo deseas, puedes ver el contenido de este tema tan importante, en el video a continuación.

¿Vemos las configuraciones?

Si vamos a Google Tag Manager, debemos tener asignada la etiqueta de configuración de Google Analytics 4.

Entonces, lo primero que vamos a hacer es ir a “vista previa” arriba a la derecha y hacer clic en «connect»

En mi caso se va a cargar un video preestablecido de Vimeo que tengo en mi sitio web. Le hago clic en «reproducir», luego lo “pausamos” y volvemos a GTM.

Entonces vamos a ver en el menú de la izquierda de la plataforma, que no hay ninguna acción o interacción que nos indique la reproducción que hicimos recientemente.

Entonces ¿Cómo realizar la medición de reproducciones con Google Tag Manager? ¡Allí vamos!

Para ello,debemos agregar un código personalizado y específico para realizar esta tarea y lograr hacer el seguimientos de videos con Google Tag Manager.

Tenemos que copiar el siguiente código que te dejaré preparado, y el cual es bastante extenso.

<script type="text/javascript" id="gtm-vimeo-tracking">

;(function(document, window, config) {

'use strict';

// The API won't work on LT IE9, so we bail if we detect those UAs

if (navigator.userAgent.match(/MSIE [678]\./gi)) return;
config = cleanConfig(config);

var handle = getHandler(config.syntax);
if (document.readyState !== 'loading') {
init();
} else {
document.addEventListener('DOMContentLoaded', function() {
init();
document.addEventListener('load', init, true);
});
}

function init() {
var videos = filter_(selectAllTags_('iframe'), isVimeo);
if (!videos.length) return;
loadApi(function() {
forEach_(videos, listenTo);
});
}

function isVimeo(el) {
return el.src.indexOf('player.vimeo.com/video/') > -1;

}

function loadApi(callback) {
if (isUndefined_(window.Vimeo)) {
loadScript('https://player.vimeo.com/api/player.js', callback);
} else {
callback();
}
}

function listenTo(el) {
if (el.__vimeoTracked) return;
el.__vimeoTracked = true;
var video = new Vimeo.Player(el);
var percentages = config._track.percentages;
var eventNameDict = {
'play': 'play',
'pause': 'pause',
'complete': 'ended'
};
var cache = {};
video.getVideoTitle()
.then(function(title) {
forEach_(['play', 'pause', 'complete'], function(key) {
if (config.events[key]) {
video.on(eventNameDict[key], function() {
handle(key, title);
});
}
});
if (percentages) {
video.on('timeupdate', function(evt) {
var percentage = evt.percent;
var key;
for (key in percentages) {
if (percentage >= percentages[key] && !cache[key]) {
cache[key] = true;
handle(key, title);
}
}
});
}
});
}

function cleanConfig(config) {
config = extend_({}, {
events: {
'play': true,
'pause': true,
'complete': true
},
percentages: {
each: [],
every: []
}
}, config);
forEach_(['each', 'every'], function(setting) {
var vals = config.percentages[setting];
if (!isArray_(vals)) vals = [vals];
if (vals) config.percentages[setting] = map_(vals, Number);
});
var points = [].concat(config.percentages.each);
if (config.percentages.every) {
forEach_(config.percentages.every, function(val) {
var n = 100 / val;
var every = [];
var i;
for (i = 1; i < n; i++) every.push(val * i);
points = points.concat(filter_(every, function(val) {
return val > 0.0 && val < 100.0;
}));
});
}
var percentages = reduce_(points, function(prev, curr) {
prev[curr + '%'] = curr / 100.0;
return prev;
}, {});
config._track = {
percentages: percentages
};
return config;
}

function getHandler(syntax) {
syntax = syntax || {};
var gtmGlobal = syntax.name || 'dataLayer';
var uaGlobal = syntax.name || window.GoogleAnalyticsObject || 'ga';
var clGlobal = '_gaq';
var dataLayer;
var handlers = {
'gtm': function(state, title) {
if (state.indexOf('%') === -1 && state.indexOf('play') === -1) {
dataLayer.push({
event: 'video',
video_provider: 'vimeo',
video_action: state,
video_title: title.toLowerCase(),
video_percent: undefined
});
} else if (state === '0%'){
dataLayer.push({
event: 'video',
video_provider: 'vimeo',
video_action: 'start',
video_title: title.toLowerCase(),
video_percent: undefined
});
} else if (state.indexOf('play') === -1) {
dataLayer.push({
event: 'video',
video_provider: 'vimeo',
video_action: 'progress',
video_percent: state,
video_title: title.toLowerCase()
});
}
},
'cl': function(state, title) {
window[clGlobal].push(['_trackEvent', 'Videos', state, title]);
},
'ua': function(state, title) {
window[uaGlobal]('send', 'event', 'Videos', state, title);
}
};
switch(syntax.type) {
case 'gtm':
dataLayer = window[gtmGlobal] = window[gtmGlobal] || [];
break;
case 'ua':
window[uaGlobal] = window[uaGlobal] || function() {
(window[uaGlobal].q = window[uaGlobal].q || []).push(arguments);
};
window[uaGlobal].l = +new Date();
break;
case 'cl':
window[clGlobal] = window[clGlobal] || [];
break;
default:
if (!isUndefined_(window[gtmGlobal])) {
syntax.type = 'gtm';
dataLayer = window[gtmGlobal] = window[gtmGlobal] || [];
} else if (uaGlobal&& !isUndefined_(window[uaGlobal])) {
syntax.type = 'ua';
} else if (!isUndefined_(window[clGlobal]) && !isUndefined_(window[clGlobal].push)) {
syntax.type = 'cl';
}
break;
}
return handlers[syntax.type];
}

function extend_() {
var args = [].slice.call(arguments);
var dst = args.shift();
var src;
var key;
var i;
for (i = 0; i < args.length; i++) {
src = args[i];
for (key in src) {
dst[key] = src[key];
}
}
return dst;
}
function isArray_(o) {
if (Array.isArray_) return Array.isArray_(o);
return Object.prototype.toString.call(o) === '[object Array]';
}
function forEach_(arr, fn) {
if (Array.prototype.forEach_) return arr.forEach.call(arr, fn);
var i;
for (i = 0; i < arr.length; i++) {
fn.call(window, arr[i], i, arr);
}
}
function map_(arr, fn) {
if (Array.prototype.map_) return arr.map.call(arr, fn);
var newArr = [];
forEach_(arr, function(el, ind, arr) {
newArr.push(fn.call(window, el, ind, arr));
});
return newArr;
}
function filter_(arr, fn) {
if (Array.prototype.filter) return arr.filter.call(arr, fn);
var newArr = [];
forEach_(arr, function(el, ind, arr) {
if (fn.call(window, el, ind, arr)) newArr.push(el);
});
return newArr;
}
function reduce_(arr, fn, init) {
if (Array.prototype.reduce) return arr.reduce.call(arr, fn, init);
var result = init;
var el;
var i;
for (i = 0; i < arr.length; i++) {
el = arr[i];
result = fn.call(window, result, el, arr, i);
}
return result;
}
function isUndefined_(thing) {
return typeof thing === 'undefined';
}
function selectAllTags_(tags) {
if (!isArray_(tags)) tags = [tags];
return [].slice.call(document.querySelectorAll(tags.join()));
}
function loadScript(src, callback) {
var f, s;
f = document.getElementsByTagName('script')[0];
s = document.createElement('script');
s.onload = callCallback;
s.src = src;
s.async = true;
f.parentNode.insertBefore(s, f);
function callCallback() {
if (callback) {
callback();
s.onload = null;
}
}
}
})(document, window, {
'events': {
'play': true,
'pause': true,
'complete': true
},
'percentages': {
'every': 25,
'each': [0, 90]
}
});
</script>

¡Estupendo!. Una vez que tienes copiado el código, nos ayudará a medir las reproducciones e interacciones de nuestros videos en Vimeo.

Ahora volvemos a Google Tag Manager, hacemos clic en “nueva” para crear una nueva etiqueta:

Luego, hacemos clic en “configuración de la etiqueta”, y por último seleccionamos “HTML personalizado”.

Entonces, cómo lo estarás imaginando, se abrirá un campo para que puedas hacer “copy” del código que habíamos copiado anteriormente. (que es un código html)

Debajo de ese código, vas a poder ver un campo que dice “Activación”. ¡Haz clic allí!

Luego harás clic en el signo de suma arriba a la derecha (+), y seleccionamos “ventana cargada” como el ‘tipo de activador’.

Siguiente a ello, simplemente deberás cambiarle el nombre a “tu nuevo activador”. ¡Clic en guardar!

Luego, hacemos clic donde dice ‘configuración del activador’, y le cambiaremos también el nombre a la etiqueta. ¡Vas bien! 

¿Querías medir las reproducciones de Vimeo! ¡Seguimos un poco más!

Una vez que le cambiaste el nombre a la etiqueta, en mi caso le puse «HTML personalizado Vimeo». Esta misma, nos permitirá ver estos eventos que nos interesan, en Tag Assistant. ¡Guardamos la etiqueta! (hacemos clic en vista previa)

¡Ahora vamos a reproducir nuestro video nuevamente en el sitio web! Lo pausamos, volvemos nuevamente a Tag Assistant,  y si nos fijamos bien en el menú de la izquierda donde dice «Video» ¡Vamos a tener eventos nuevos!

Si queremos saber aún más sobre la medición de estos videos en Vimeo, como se ve en la imagen, hacemos clic en “dataLayer”.

Verás como se ve en la foto, las interacciones que tomó el evento, como “el nombre del video, clic en el botón ‘start’, y más. En el otro evento que se generó, nos mostrará datos más interesantes como el porcentaje de reproducción, si hizo clic en ‘adelantar el video’ o en el botón de ‘pausa’, etc.

Configurar etiqueta de Google Analytics para medir reproducciones en Vimeo.

Nuevamente en GTM, hacemos clic en “nueva”, “configuración de etiqueta”, pero esta vez seleccionamos «Google Analytics, evento de GA4»

Luego, debajo en “etiqueta de configuración”, por supuesto seleccionamos “Google Analytics 4”, y le colocamos un nombre en el campo que está arriba a la izquierda de tu pantalla.

También le tenemos que poner un nombre al evento, para ello despliega donde dice “etiqueta de configuración” y allí verás el campo que dice “nombre del evento”

Bien, ahora también haremos clic en el símbolo (+) para agregar una variable que nos indique la ‘acción que ocurre con nuestro video’.

Dentro de “elegir una variable” hacemos clic en el símbolo suma, (+) arriba a la derecha, configuración de la variable, y seleccionamos ‘variable de capa de datos’

Le colocamos el nombre, por ejemplo ‘video_action’, y hacemos clic en guardar arriba a la derecha de tu pantalla.

Te quedará el nombre del evento, guión bajo, el nombre de la acción:

Para agregar las demás acciones, hacemos clic en “parámetros del evento”. Le daremos el nombre del evento por ejemplo video_percent, y en el campo de valor, crearemos una nueva variable que capture los datos de esta acción.

Entonces nuevamente vamos agregar esta nueva variable, hacemos clic en el signo de suma (+), “configuración de variable”, seleccionamos “variable de capa de datos” ¿Lo recuerdas? ¡Ya lo hicimos a estos pasos! 

Entonces, en el campo correspondiente, agregamos el nombre de la variable con esta nueva acción “video_percent”. Le colocamos nombre a la variable nueva, y guardamos arriba a la derecha.

Y si quieres tener un parámetro que te diga “cual es el proveedor del video”, tendrás que hacer exactamente los mismos pasos que hemos visto anteriormente. Le asignamos un nombre, en el campo de valor puedes poner ‘vimeo’.

Lo mismo sucede si quieres saber “el título del vídeo en reproducción". Sigue exactamente los mismos pasos. (nombre, agregar parámetro configuración, variable de capa de datos)

¡Estupendo! 

¡Hacemos clic en Guardar a la última acción!. Tiene que quedarte algo similar a lo que podemos ver en la imagen a continuación:

Activar la etiqueta que mide reproducciones en vimeo con Google Analytics

Debajo de esos ‘parámetros de evento’, tendremos que hacer clic para configurar nuestro activador para medir los videos en Vimeo.

Hacemos clic debajo, luego en el signo suma arriba a la derecha (+) luego “configuración del activador”, y por último en “evento personalizado”

Le colocamos un nombre al evento del activador, y lo guardamos arriba a la derecha.

Bien, ahora cada vez que se activen los eventos de video en Tag Assistant, la etiqueta que acabamos de crear, ¡se activará al mismo tiempo! ¡Felicidades! 👏

Entonces de ese modo, enviará todos los datos y parámetros, a Google Analytics 4.

Para chequear que todo esté bien, puedes ir a la vista previa, cargar tu video nuevamente, reproducirlo en tu sitio web, lo adelantas, le pones ‘pausa’.

¡Impresionante! Verá como todas las acciones que fuiste haciendo en tu video y en tu sitio, se cargarán correctamente en Tag Assistant en el menú izquierdo.

Y si vamos a la debugView en Google Analytics, verás que los eventos también estarán sincronizados:

Si hacemos clic en cada una de las acciones, también podremos ver los parámetros de cada una de ellas. (nombre, porcentaje, proveedor, etc)

¡Es hora de publicar los cambios en GTM!

El seguimiento de las interacciones de video en Google Analytics, tiene su complejidad. ¡Pero es muy importante! Necesitamos comprender las interacciones audiovisuales con nuestros clientes.

Pero para que tengas un mejor panorama, te recomiendo el siguiente artículo:

EMBUDO DE VENTAS EN GOOGLE ANALYTICS

¡Felicitaciones!

¡Hasta la próxima colega!