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ì:
Tutto funziona correttamente? Adesso puoi tracciare nuovamente i tuoi video di YouTube, nonostante il barbatrucco che elimina il cookie 😉
A presto e… Buon Tag!
Altre Guide che potrebbero interessarti
Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!
- TERZA EDIZIONE ITALIANA aggiornata e espansa con 164 pagine in più
- Videocorso di 2 ore con tutti gli aggiornamenti su GTM IN OMAGGIO
- Bonus segreto del valore di 597 Euro IN OMAGGIO
NEWSLETTER
Iscriviti e rimani sempre aggiornato su Google Tag Manager
Articoli recenti
- Ricerca di personale: Senior Digital Analyst per Tag Manager Italia
- News: Facebook vs iOS14. Gli impatti dell’AppTracking Transparency
- Glossario: Enhanced Measurement in Google Analytics 4
- Glossario: Data Stream (Stream di Dati) in Google Analytics 4
- Testimonianza: Corrado Di Scala e “l’importanza di uno strumento fondamentale come Google Tag Manager”
Che Guida Cerchi?
Commenti recenti
- Matteo Zambon su How to move FROM Enhanced Ecommerce tracking TO Google Analytics 4 ecommerce tracking with Google Tag Manager
- Matteo Zambon su How to move FROM Enhanced Ecommerce tracking TO Google Analytics 4 ecommerce tracking with Google Tag Manager
- Matteo Zambon su How to Fix Cookiebot’s Official Guide and Protect Yourself from GDPR
- Matteo Zambon su Come abilitare il tracciamento Ecommerce (per WooCommerce) con Google Tag Manager
- Matteo Zambon su How to move FROM Enhanced Ecommerce tracking TO Google Analytics 4 ecommerce tracking with Google Tag Manager
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!