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
- Guida Base: come gestire l'attivazione di Google Signals in…
- Case study: Università IULM
- Tag Manager Italia è Platinum Certified Partner ufficiale di…
- Novità Consent Mode GA4: arriva il Behavioral Modeling e il…
- Google Analytics e GDPR: tutte le novità dal nostro faccia a…
- Tag Manager Italia vince i Quanties Awards, il massimo…
Chiedi pure qui sotto, sarò pronto a risponderti!
Unisciti alla più grande community italiana dedicata alla Digital Analytics!
Iscrivendoti alla newsletter gratuita di Tag Manager Italia riceverai:
- guide (base/avanzate) passo passo
- news di approfondimento
- webinar gratuiti
- offerte esclusive
e altre risorse di 1°classe sul mondo della Digital Analytics!
- Caso studio: LUISAVIAROMA ottimizza il tracciamento dei dati Ecommerce e le performance Advertising grazie a GA4 e BigQuery
- Caso studio: Mondo Convenienza realizza +85% di vendite ecommerce e +100% di conversioni aggiuntive per le campagne Meta Ads grazie a GA4 e Server-Side Tracking
- Come creare un report in GA4 per analizzare il funnel di conversione di un sito web o ecommerce
- Seconda edizione del GA4 Summit: oltre 500 partecipanti per due giorni di formazione e confronti sul presente e futuro dell’Analytics per il Marketing e l’Advertising
- Attribuzioni errate in GA4: cause e soluzioni al problema
- Matteo Zambon su Come configurare il monitoraggio delle conversioni di Google Ads con Google Tag Manager
- Matteo Zambon su Come tracciare i click al link di contatto WhatsApp in Google Analytics 4 con Google Tag Manager
- Matteo Zambon su Come installare Google Analytics 4 (GA4) su WordPress
- Matteo Zambon su Come configurare il monitoraggio delle conversioni di Google Ads con Google Tag Manager
- Matteo Zambon su Guida Base: come rilevare automaticamente il traffico dei bot in Google Universal Analytics e GA4
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!
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!