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”

attivatore tracciare video youtube nocookie google tag manager

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.

tag html tracciare video youtube nocookie google tag manager

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”.

action tracciare video youtube nocookie google tag manager

 

label tracciare video youtube nocookie google tag manager

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.

attivatore2 tracciare video youtube nocookie google tag manager

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.

tag2 tracciare video youtube nocookie google tag manager

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ì:

anteprima tracciare video youtube nocookie google tag manager

Tutto funziona correttamente? Adesso puoi tracciare nuovamente i tuoi video di YouTube, nonostante il barbatrucco che elimina il cookie 😉

A presto e… Buon Tag!

Condividi anche tu Google Tag Manager!
  • Reply

    Assia

    21 05 2021

    Ciao Matteo!

    Ma per fare questa cosa con il GA4?

    • Matteo Zambon

      16 06 2021

      Ciao!
      Configura il tag Evento di GA4 e inserisci le variabili nei parametri dell’evento utilizzando la stessa nomenclatura che GA4 utilizza per gli eventi video.
      Ti consiglio il corso che trovi nello shop https://club.tagmanageritalia.it/shop/ dedicato a Google Analytics 4 🙂

      Buon Tag!

  • Reply

    Sara

    10 09 2020

    Ciao Matteo, ho cercato di seguire la guida passo passo, ma quando vado all’anteprima ricevo i seguenti messaggi: “Variabile sconosciuta “Action” trovata in un tag. Modifica il tag e rimuovi il riferimento alla variabile sconosciuta.”
    e
    “Variabile sconosciuta “Label” trovata in un tag. Modifica il tag e rimuovi il riferimento alla variabile sconosciuta.
    Cosa posso aver sbagliato?
    🙁

    • Sara

      10 09 2020

      Unica differenza che ho notato è che sotto alla varibile non mi compare il riquadro “riferimenti a questa variabile”

    • Matteo Zambon

      14 09 2020

      L’hai creata? Mandami i dettagli qui: https://www.facebook.com/groups/TagManagerItalia

      Ti aspetto 🙂

    • Matteo Zambon

      14 09 2020

      Ciao Sara, sicura di aver creato la variabile Action nello step 3? Occhio a maiuscole e minuscole 🙂

      Fammi sapere!

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *