Come tracciare la visualizzazione di video con Google Tag Manager

[AGGIORNAMENTO 01 Dicembre 2022]

Questa guida risale prima che Google Tag Manager creasse l’attivatore e le variabili integrate per il tracciamento di video su Youtube.

Inoltre, se hai disattivato i cookie di YouTube come ti ho spiegato nel mio #barbatrucco, per tracciare i video col nocookie ora dovrai seguire quest’altra guida.

Nonostante questo aggiornamento ho voluto mantenere questo articolo e non cancellarlo, perché in fondo è pur sempre una soluzione funzionante 😉

Pronti allora!

Hai inserito dei video di YouTube nel tuo sito? Ti interesserebbe avere informazioni sull’interazione degli utenti con questi video?

Grazie a questa guida potrai capire come fare, con Google Tag Manager, ad avere informazioni sulla visualizzazione dei video da parte degli utenti del tuo sito, capire quindi se hanno cliccato “play”, “pausa” o se hanno visionato il video, ad esempio, fino a metà, fino al 75% oppure interamente.

Prerequisito

Per fare questo utilizzeremo la JavaScript API di YouTube, che consente di controllare tramite JavaScript i video incorporati di YouTube per avere informazioni sulla loro riproduzione.

Ad esempio:

<iframe width="560" height="315" src="https://www.youtube.com/embed/MR5Uq1AMyk4" frameborder="0" allowfullscreen></iframe>

Bene, in questo modo sarà possibile inviare i dati relativi alla visualizzazione del video a Google Tag Manager e quindi, successivamente, a Google Analytics.

Step 1 – Crea l’Attivatore

Per prima cosa crea l’Attivatore. Entra quindi nel tuo account di Google Tag Manager, poi fai così:

• Attivatori > Nuovo > Configurazione attivatore.
• Tipo di attivatore: Pronto per DOM.
• Attiva su: Alcuni eventi pronti per DOM.
• In Attiva quando seleziona le pagine che contengono i video che vuoi tracciare. Nel mio esempio ho impostato: Page URL contiene esempio/pagina-di-esempio/.
• Salva l’Attivatore nominandolo “PaginaVideoYoutube”.

Step 2 – Crea il Tag

Crea quindi un nuovo Tag.

• Clicca su Tag > Nuovo > Configurazione tag.
• Tipo di tag: Tag HTML personalizzato.
• Incolla il seguente codice:

<script type="text/javascript">

for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;)
 if (/youtube.com\/embed/.test(e[x].src))
 if(e[x].src.indexOf('enablejsapi=') === -1)
 e[x].src += (e[x].src.indexOf('?') ===-1 ? '?':'&') + 'enablejsapi=1';

var gtmYTListeners = []; 

function onYouTubeIframeAPIReady() {
 for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) {
 if (/youtube.com\/embed/.test(e[x].src)) {
 gtmYTListeners.push(new YT.Player(e[x], {
 events: {
 onStateChange: onPlayerStateChange,
 onError: onPlayerError
 }
 }));
 YT.gtmLastAction = "p";
 }
 }
}

function onPlayerStateChange(e) {
 e["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e["target"]);
 var video_data = e.target["getVideoData"](),
 label = video_data.video_id+':'+video_data.title;
 if (e["data"] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p") {
 dataLayer.push({
 event: "youtube",
 action: "play",
 label: label
 });
 YT.gtmLastAction = "";
 }
 if (e["data"] == YT.PlayerState.PAUSED) {
 dataLayer.push({
 event: "youtube",
 action: "pause",
 label: label
 });
 YT.gtmLastAction = "p";
 }
}

function onPlayerError(e) {
 dataLayer.push({
 event: "error",
 action: "GTM",
 label: "youtube:" + e
 })
}

function onPlayerPercent(e) {
 if (e["getPlayerState"]() == YT.PlayerState.PLAYING) {
 var t = e["getDuration"]() - e["getCurrentTime"]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 4) / 4).toFixed(2); if (!e["lastP"] || t > e["lastP"]) {
 var video_data = e["getVideoData"](),
 label = video_data.video_id+':'+video_data.title;
 e["lastP"] = t;
 dataLayer.push({
 event: "youtube",
 action: t * 100 + "%",
 label: label
 })
 }
 e["lastP"] != 1 && setTimeout(onPlayerPercent, 1000, e);
 }
}
window.onbeforeunload = function (e) {
 var e = e || window.event;
 if(e)
 e.returnValue = 'na';
 return 'na';
};
window.onbeforeunload = trackYTUnload;

function trackYTUnload() {
 for (var i = 0; i < gtmYTplayers.length; i++)
 if (gtmYTlisteners[i].getPlayerState() === 1) {
 var video_data = gtmYTlisteners[i]['getVideoData'](),
 label = video_data.video_id+':'+video_data.title;
 dataLayer.push({
 event: 'youtube',
 action: 'exit',
 label: label
 });
 }
}
var j = document.createElement("script"),
 f = document.getElementsByTagName("script")[0];
j.src = "//www.youtube.com/iframe_api";
j.async = true;
f.parentNode.insertBefore(j, f);
</script>

 

• In Attivazione seleziona l’Attivatore appena creato, cioè “PaginaVideoYoutube”.
• Rinomina il Tag in modo appropriato, ad esempio “Video YouTube”.
• Salva.

PICCOLO TIP

Se hai problemi prova con la libreria minificata che trovi a questo link.

 

Step 3 – Visualizza in Anteprima

Attiva ora la modalità Visualizzazione in Anteprima di Google Tag Manager, vai nella pagina che contiene il video ed avvialo.

Nel box in basso vedrai comparire diversi eventi. Dalla scheda Data Layer puoi vedere che l’elemento action può avere il valore: “play“, “pause“, “0%“, “25%“, “50%“, “75%“, “100%” (rispettivamente quando il video inizia ad essere riprodotto, viene messo in pausa, arriva al 25%, al 50%, al 75% e viene completato) e label che corrisponde al codice e al titolo del video riprodotto.

 

Per passare i dati degli elementi action e label a Google Analytics dovrai creare delle Variabili.

Step 4 – Crea le Variabili

• Vai quindi in Variabili > Variabili definite dall’utente > Nuova > Configurazione variabile.
• Tipo di variabile: Variabile di livello dati.
• Nome variabile livello dati: action.
• Salva la Variabile nominandola, appunto, “Action”.

Allo stesso modo, crea la Variabile “Label”.

Step 5 – Crea il secondo Tag

L’ultimo step è creare un Tag per passare queste Variabili appena create a Google Analytics.

• Tag > Nuovo > Configurazione tag.
• Tipo di tag: Universal Analytics.
• Tipo di monitoraggio: Evento.
• Categoria: Video.
• Azione: {{Action}}
• Etichetta: {{Label}}
• Seleziona la variabile di Google Analytics oppure abilita l’override e inserisci, nel campo ID di monitoraggio, {{gaID}} (la Costante personalizzata che corrisponde al tuo codice di monitoraggio Analytics). Oppure inserisci semplicemente il tuo codice UA di Analytics.
• Clicca su Attivazione. A questo punto ti comparirà una finestra con tutti gli Attivatori già creati. Clicca sul simbolo “+” in alto a destra per creare un nuovo Attivatore.
• Per il nuovo Attivatore scegli il tipo: “Evento personalizzato”.
• Nome evento: “youtube”.
• Nomina l’Attivatore anch’esso “Youtube” e salva

Infine, nomina anche il Tag in questo modo “GA – Event – Video Youtube” e salvalo.

Ora hai fatto tutto il necessario per trasferire queste informazioni a Google Analytics.

Potrai quindi visualizzare tra gli eventi di Google Analytics (Comportamento > Eventi) tutti gli eventi relativi alla visualizzazione dei video da parte degli utenti. Puoi notare quindi se gli utenti tendono a vedere interamente i tuoi video, oppure arrivano la maggior parte delle volte al 25%, ad esempio.

Nota

Nel video tutorial ho utilizzato l’ultima versione degli script, che ha dei nomi leggermente diversi rispetto alla guida scritta.
Gli script e le informazioni su come implementare questa funzionalità di tracciamento sono stati presi da un post di Bounteous (ex Lunametrics): https://www.bounteous.com/insights/2015/05/11/youtube-tracking-google-analytics-google-tag-manager/

Prova ad implementare questa funzionalità, se dovessi riscontrare problemi, non esitare a scrivermi!

Buon Tag!