[Aggiornata il 28 Febbraio 2019]
Aspetta, indovino. Tu non stai cercando una guida su come tracciare i video di Youtube, ma quelli di Vimeo.
Bingo! Sei arrivato sulla guida corretta 🙂
Prima di approfondire voglio svelarti una chicca: Vimeo permette in modo nativo il tracking con Google Tag Manager! La brutta notizia è che devi avere un account Business (tanti dindi, ahimè :\ ).
Qui c’è l’articolo della guida ufficiale che ti spiega come fare: https://help.vimeo.com/hc/en-us/articles/115002859607-Integrating-with-Google-Tag-Manager.
Tutto bellissimo, vero?
“Ma… ma… e se non ho l’account business?”
Non ti preoccupare, grazie all’aiuto di uno script esterno di Lunametrics riusciamo a tracciare tutto lo stesso! Sei pronto? Iniziamo 🙂
Il primo passo da fare è quello di installare lo script JavaScript che permette di intercettare le azioni dell’utente all’interno del video di Vimeo. Lo script è stato creato da Lunametrics e per maggiori dettagli questo è il link su github.
Crea un nuovo Tag.
<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',
'Watch to End': 'ended'
};
var cache = {};
video.getVideoTitle()
.then(function(title) {
forEach_(['Play', 'Pause', 'Watch to End'], 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,
'Watch to End': 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) {
dataLayer.push({
event: 'vimeoTrack',
attributes: {
videoAction: state,
videoName: title
}
});
},
'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,
'Watch to End': true
},
'percentages': {
'every': 25,
'each': [10, 90]
}
});
/*
* Configuration Details
*
* @property events object
* Defines which events emitted by YouTube API
* will be turned into Google Analytics or GTM events
*
* @property percentages object
* Object with configurations for percentage viewed events
*
* @property each Array|Number|String
* Fires an event once each percentage ahs been reached
*
* @property every Array|Number|String
* Fires an event for every n% viewed
*
* @property syntax object
* Object with configurations for syntax
*
* @property type ('gtm'|'cl'|'ua')
* Forces script to use GTM ('gtm'), Universal Analytics ('ul'), or
* Classic Analytics ('cl'); defaults to auto-detection
*
* @property name string
* THIS IS USUALLY UNNECESSARY! Optionally instantiate command queue for syntax
* in question. Useful if the tracking library and tracked events can fire
* before GTM or Google Analytics can be loaded. Be careful with this setting
* if you're new to GA/GTM. GTM or Universal Analytics Only!
*//*
* v1.0.1
* Created by the Google Analytics consultants at http://www.lunametrics.com
* Written by @notdanwilkerson
* Documentation: https://github.com/lunametrics/vimeo-google-analytics/
* Licensed under the MIT License
*/</script> Nel dettaglio questo script non farà altro che creare un evento personalizzato chiamato vimeoTrack con due variabili: videoAction e videoName.
Ora che abbiamo installato lo script in tutte le pagine, verifichiamo che effettivamente funzioni. Per farlo ovviamente devi avere un video di Vimeo e il debug e anteprima attivato.
Una volta avviato il debug non devi fare altro che smanettare (termine super tecnico) sul video avviandolo, fermandolo e soprattutto portandolo in avanti nell’arco temporale.
Se tutto va come deve andare allora dovresti vedere degli eventi personalizzati con dei valori strani nel dataLayer:
Come ben noterai, oltre all’evento, ecco spuntare le due famose variabili. Ma osserva bene. Non vedi niente di strano?
No? …Si?
Le variabili sono all’interno di un oggetto chiamato attributes (nomi bellissimi anche qua). Vediamo come estrapolarli ora 🙂
Ora che sappiamo che il nostro bellissimo e utilissimo script crea delle variabili nel dataLayer che contengono il tipo di azione (play, pause, watch end e le percentuali di visualizzazione) e il nome del video, non ci resta che prendere queste variabili!
Ehm, come?
Ma con delle variabili di tipo livello dati, ovviamente 😉
Allo stesso modo, crea la Variabile “videoAction”.
Ormai siamo quasi alla fine. Per permettere al nostro Tag di Google Analytics, che creeremo poi, di passare l’evento a Google Analytics dobbiamo fare in modo di far attivare il Tag all’evento: vimeoTrack.
Non ci resta che creare il nostro bellissimo Tag di Google Analytics passandogli tutto il “bordellume” (altro termine super tecnico) di variabili che abbiamo gestito precedentemente.
Non ci resta che verificare con il debug di Google Tag Manager che il nostro tag si attivi:
Se tutto funziona come previsto, torna sul contenitore e clicca sul pulsante blu “Invia” per pubblicare ufficialmente le modifiche.
E tu quanto usi Vimeo? Hai trovato problemi? Scrivimi nei commenti 🙂
Negli ultimi mesi hai notato in Google Analytics 4 un calo improvviso e inspiegabile nelle…
Se ti trovi su questa guida è perché hai compreso che solo attraverso la Data…
Greenpeace è un'associazione globale che con azioni dirette e concrete denuncia i problemi ambientali e…
Da quando hai configurato la Consent Mode v2 (CM v2) hai notato cali improvvisi o…
Premesso che non è possibile conoscere l'esatto funzionamento né di Chrome, né degli algoritmi di…
Da quale canale di marketing arriva il maggior numero di conversioni? Quale campagna di marketing…
View Comments
Ciao Matteo, grazie per le tue guide e per il libro. Sempre impeccabili. Posso chiederti lo step 5 per GA4 come posso farlo?
Grazie ancora
Gloria
Ciao Gloria, grazie del feedback.
Devi replicare la struttura dell'evento video che trovi qui: https://www.tagmanageritalia.it/news-parametri-eventi-enhanced-measurement-disponibili-nei-report-di-ga4/
Fammi sapere, nel caso posso fare una versione guida specifica per GA4 :)
A presto!
Ciao Matteo
sono fermo al primo step, non va.
Codice inserito correttamente, in anteprima vedo il tag ma zero eventi.
Consigli?
Ciao Massimo, riesci a darmi un URL o qualche info in più?
Grazie per la fantastica guida! Funziona anche se voglio tracciare gli eventi per il pixel di facebook?
Ciao Patrick, sì certo. Funziona su qualsiasi Tag tu voglia sparare.
A presto!
Comne faccio a tracciare un'acquisto del mio corso che sta su vimeo? L'utente atterra sul mio sito visita le pagine poi decide di andare su vimeo ed acquiosta.
Ciao, quello che puoi tracciare è cosa fa l'utente sul TUO sito. Una volta che è su Vimeo, sarà Vimeo stesso a darti dei dati analitici.
Quindi puoi tracciare il click di quanti vanno su Vimeo, ma non quello che succede in una piattaforma dove non sei padrone :)
A presto!
ciao!
ho seguito la procedura: il primo tag si attiva, mentre il secondo, quello di GA Event, non funziona. Ho rifatto il procedimento due volte, ma nada. Non capisco dove sbaglio.
ric
Ciao Riccardo, se sicuro di aver messo maiuscole e minuscole correttamente? Fammi sapere!
GTM è fantastico ma a inserire tutti i tag di tracciamento che servono sbilancia il rapporto html/testo delle pagine per la seo non sei d'accordo?
Ciao Marek,
in realtà Google Tag Manager gestisce i tag in modo asincrono, se gli stessi codici dovessero essere inseriti all'interno del codice senza GTM, ci sarebbero più problemi ;) GTM semplifica il lavoro, sta a noi decidere cosa tracciare e installare :)