Mag 2018

Guida Avanzata: Tracciare i Video di YouTube NoCookie con Google Tag Manager

guida tracciare video youtube nocookie google tag manager

Tempi duri quelli della GDPR… 🙁

Me la sono presa come una crociata personale, e infatti ho scritto già varie guide sull’argomento.

Fra le tante guide per salvarti dalla GDPR che trovi su Tag Manager Italia c’è anche la guida base su come disabilitare i cookie di YouTube.

Infatti – se non lo sai – servizi come YouTube e Google Maps installano dei cookie di profilazione del browser dell’utente già di default!

Nella guida che ti ho linkato su come eliminare i cookie di YouTube ti mostravo un #barbatrucco per evitare questo ma…. c’è un problema!

Sembra che utilizzando il #barbatrucco poi la classica guida su come tracciare i video di YouTube con Google Tag Manager con il Tag integrato nella piattaforma non funzioni più!

Oddio e ora come faccio!

“E quindi che si fa, Matteo? Devo rinunciare a tracciare i miei video?”

Ma sei matto?! Ovviamente no 😀 non devi rinunciare proprio a nulla.

Ormai hai capito che c’è sempre un #barbatrucco…. anche per il risolvere il #barbatrucco 😀

In cosa consiste?

Se sei un veterano di Google Tag Manager ricorderai che prima che esistessero Attivatori e Variabili integrate per il tracciamento di YouTube su Google Tag Manager (il cambiamento risale al settembre 2017)
bisognava fare tutto a manina…

Infatti esiste ancora la vecchia guida su Tag Manager Italia che ti spiegava come tracciare la visualizzazione di Video YouTube in modo “old school”.

Ebbene! Andiamo a recuperare quella guida e facciamo una piiiiccola modifica al Tag HTML Personalizzato, andando a dire insomma a Google Analytics di tracciare sia il dominio normale di YouTube che quello “speciale” per disattivare i Cookie, ovvero www.youtube-nocookie.com (ringraziamo Lunametrics per la tips <3 ).

Sei pronto? (Ri)cominciamo!

Tutti gli step saranno identici alla vecchia guida manuale, tranne lo step 2, quello del Tag HTML Personalizzato.

STEP 1 – CREA L’ATTIVATORE

Per prima cosa devi creare 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/contatti/ (perché il video si trova in quella pagina, altrimenti puoi metterlo su tutte le pagine)
Salva l’Attivatore nominandolo in modo appropriato. Ad esempio io l’ho chiamato “Video YouTube – Contatti”

STEP 2 – CREA IL TAG

Questo come ti dicevo è l’unico step diverso rispetto alla guida vecchia. Cambia solo un dettaglio nello script (lo vedi in rosso).

Tag > Nuovo > Tag HTML personalizzato
Incolla il seguente codice:

<script type="text/javascript"> 
for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) 
if (/youtube(\-nocookie)?.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 = []; //multiple players on the same page 
function onYouTubeIframeAPIReady() { 
for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) { 
if (/youtube(\-nocookie)?.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); 
} 
} 

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>

Attiva sull’Attivatore creato nello step 1, in questo caso “Video YouTube – Contatti”.
Rinomina il Tag in modo appropriato, ad esempio “cHTML – Video Youtube Nocookie”.
Salva.

STEP 3 – CREA LE VARIABILI

Dobbiamo creare adesso delle Variabili corrispondenti a quelle pushate dal Tag HTML Personalizzato: Action e Label.

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

Allo stesso modo, crea anche la Variabile “Label”.

STEP 4 – CREA IL SECONDO ATTIVATORE

Questo serve per il Tag che creeremo nell’ultimo step.

Attivatori > Nuovo > Tipo: Evento personalizzato
Nome evento: “youtube”
Nomina l’Attivatore anch’esso “Youtube” e salva.

STEP 5 – CREA IL SECONDO TAG

Ci siamo quasi. Adesso bisogna 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.
Seleziona l’Attivatore dello step 4 “Youtube”.
Nomina il Tag ad esempio “GA – Event – Youtube Video Nocookie” e salva.

STEP 6 – VERIFICA CON L’ANTEPRIMA

Come ultimo step dobbiamo verificare che il barbatrucco funzioni e che adesso – nonostante il nocookie – Google Tag Manager sia nuovamente in grado di tracciare la visualizzazione dei video di Youtube.

Andiamo in modalità anteprima, accediamo al sito nella pagina dove abbiamo embeddato il video di Youtube.

In un primo momento dovresti vedere il Tag “GA – Event – Youtube Video Nocookie” fra i Tags Not Fired On This Page.

Se provi a cliccare play e visualizzare il video, il Tag dovrebbe passare fra i Tags Fired On This Page. Così: