Sommario
Cos’è Google Tag Manager?
Google Tag Manager è un sistema di gestione dei Tag messo a disposizione da Google. È accessibile qui con un account Google.
Cosa è un sistema di gestione dei tag?
Un esempio di cosa sia un Tag è il codice di monitoraggio che vi fornisce Google Analytics da installare sul vostro sito per monitorarne il traffico.
Google Analytics è un tool che permette di controllare il traffico ricevuto su un sito. Esistono altri strumenti simili e spesso su un sito convivono diversi di questi strumenti ognuno col suo diverso Tag.
Di seguito vedete un esempio di Tag di Analytics:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=CODICE_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'CODICE_ID');
</script>
Esistono altri strumenti per analizzare il traffico ricevuto da un sito web come ad esempio Yandex Metrica, Facebook Pixel e Hotjar ognuno di questi offre diverse funzionalità di raccolta ed analisi statistica oltre al banale controllo del traffico.
Inoltre questi snippet di codice javascript che in gergo vengono chiamati Tag sono utilizzati anche dalle varie piattaforme di distribuzione della pubblicità come ad esempio Google AdManager, Google Ads, Google Adsense.
Cosa si può fare con il Tag Manager?
Come avrete capito dall’elenco precedente questi Tag possono affollare le pagine di un sito web e richiedere l’intervento di un programmatore per inserirne di nuovi o modificare quelli vecchi.
Con il Tag Manager potrete installare tutti questi Tag ed altri ancora, aggiornarli e provarli in modalità protetta.
In pratica installerete sul vostro sito un unico Tag quello del Tag Manager
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','CODICE-ID');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=CODICE-ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->Tramite questo potrete inserire gli altri Tag da un comodo pannello Web; non solo, prima di pubblicarli potrete provare in un ambiente protetto.
Per ambiente protetto si intende una modalità di anteprima in cui solo voi potrete vedere se il nuovo tag che avete installato funziona correttamente e non interagisce in maniera scorretta con gli altri tag installati sul vostro sito. Finite le verifiche potete pubblicare la modifica e rendere pubblico il nuovo ambiente.
Gli elementi principali del Tag Manager
Nel Tag Manager sono presenti tre concetti fondamentali:
- Tag
- Attivatori
- Variabili
I Tag
I Tag sono degli snippet di codice javascript, come quello che vi ho mostrato più sopra. Sono l’elemento che viene incluso nelle pagine per attivare le varie funzionalità richieste.
L’esecuzione dei Tag può essere condizionata ad eventi lanciati al click su elementi; ma vedremo che i Tag possono essere attivati su diversi tipi di azione sia legate al browser che legate a specifiche azioni degli utenti.
Gli attivatori
Gli attivatori sono delle condizioni a cui è possibile collegare i Tag. Al realizzarsi delle condizioni i Tag vengono attivati.
Gli attivatori possono essere sia eventi legati al browser i classici Visualizzazione, DOM Ready e Load.
Ad esempio un attivatore può essere lanciato solo con la presenaz di una specifica immagine o di un elemento del DOM con classi specifiche.
Il lancio di un attivatore potrebbe essere anche legato al click su ancora con un link specifico o con una classe specifica. Insomma vengono offerti dal pannello molte opzione per attivare i Tag in ogni modo possa esservi utile.
Le variabili
Per quanto riguarda le variabili sono semplicemente dei valori che possono essere prelevati o impostati all’interno dell’ambiente javascript ed utilizzati negli Attivatori o nei Tag
Un esempio: il Cookie Banner
Quello che vi vado a presentare è un esempio di cosa è possibile fare con il Tag Manager.
E’ un abuso del Tag Manager, nel senso che il Tag Manager non è pensato per questo uso. Tuttavia prendendo spunto dalla libreria js Cookie Enabler è possibile realizzare un semplicissimo cookie banner bloccando javascript e iframe e gestire così i cookie obbligatori.
Va detto che il Javascript base caricato dal Tag Manager non crea alcun cookie tranne quando passate alla modalità debug.
Mi rendo conto che non è una cosa utilizzabile in maniera semplice ma volevo realizzare un prototipo e vedere se riuscivo a bloccare il caricamento degli iframe e degli script per impedire la creazione di cookie fino al momento in cui l’utente abbia acconsentito al loro utilizzo.
Questo prototipo inoltre ci permette di capire le dinamiche di funzionamento di Tag e Attivatori.
Il prototipo
Immaginiamo di volere realizzare un semplice cookie banner che sblocchi gli iframe in una pagina e lanci il caricamento degli script presenti nella pagina.
Per quanto riguarda gli iframe intervenendo presto tramite javascript è possibile bloccare il caricamento e posticiparlo a quando l’utente ha deciso se vuole concedere il permesso all’installazione dei cookie.
Tuttavia ho scelto per semplicità di usare lo stesso meccanismo che uso per gli script, sostituire la proprietà src del tag script con la proprietà data-src e quindi farli caricare o mostrare un messaggio alternativo.
Per quanto riguarda i Javascript questi se necessario vanno gestiti e bloccati direttamente nel html perché ovviamente il Javascript del Tag Manager non è in grado di bloccarli preventivamente.
Quello che possiamo fare è bloccarli preventivamente al livello HTML e sbloccarli selettivamente in funzione degli eventi generati.
Il primo Tag viene attivato alla prima visualizzazione della pagina che di base avviene successivamente al caricamento del Javascript:
<script>
(function(){
if ( ! window.$ || ! window.jQuery ) {
var script = document.createElement('script');
script.async=true;
script.src='https://zeptojs.com/zepto.min.js';
script.addEventListener(
'load',
function(e) {
dataLayer.push({event: 'ZeptoLoaded'});
}
);
document.body.appendChild(script);
} else {
dataLayer.push({event: 'ZeptoLoaded'});
}
})();
</script>Lo snippet verifica la presenza di jQuery e se non presente carica Zepto.js che è una libreria minimale che offre le funzionalità base offerte da jQuery. L’attivazione del Tag genera un Evento ZeptoLoaded che scatena il caricamento dei Tag successivi.
Un evento in Tag Manager si genera semplicemente con l’istruzione seguente:
dataLayer.push({event: 'ZeptoLoaded'});Per bloccare l’esecuzione del Javascript utilizziamo una tecnica che viene utilizzata anche da Cookie Enabler e che ho già spiegato in precedenza, ne vedete un esempio nel seguente snippet:
<!-- Script -->
<script data-src="/scripts.js"></script>
<script type="text/plain">
document.cookie = 'session_cookie_text=session_cookie_text';
document.cookie = 'expiring_cookie_text=expiring_cookie_text; expires=Sat, 9 May 2022 12:00:00 CET';
</script>I tag script che caricano dei file vengono bloccati sostituendo il tag src con quello data-src. mentre l’esecuzione di quelli scritti direttamente vengono bloccati impostando la proprietà type a text/plain.
Per differenziare l’abilitazione dei tag script potremmo usare delle classi e riattivarli tramite queste classi selettivamente secondo le decisioni degli utenti. Per esempio per abilitare selettivamente i cookie tecnici o quelli di Analytics o quelli di Profilazione potremmo usare delle classi differenti come ad esempio .tm-technical, .tm-profile.
Lo script bloccato contiene:
;(function(){
document.cookie = 'session_cookie=session_cookie';
document.cookie = 'expiring_cookie=expiring_cookie; expires=Sat, 9 May 2020 12:00:00 CET';
})();Per quanto riguarda invece gli iframe:
<!-- iframe -->
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/C2uTJsjJSfo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="840" height="472" data-src="https://www.youtube.com/embed/C2uTJsjJSfo"></iframe>Anche per gli iframe potremmo utilizzare una classe diversa. Nelle mie intenzioni originali c’era quella di filtrare gli iframe e nel caso fosse necessario e sostituire www.youtube.com con www.youtube-nocookie.com che è il sito che Youtube mette a disposizione per gli utenti che non vogliono configurare cookie nei propri browser.
Dopo il caricamento di Zepto.js viene caricato il banner dei cookie.
Questo banner è completamente creato in javascript tramite la libreria ma potremmo modificare il codice per usare un template nascosto presente nella pagina.
<script>
(function($) {
var $main_box = $('<div>');
$main_box.css({
width: '50vw',
margin: '1rem auto',
position: 'absolute',
top: '2rem',
left: '25vw',
'text-align': 'center',
'background-color': '#99999999',
'padding-bottom': '1rem'
});
var $main_title = $('<h1>Il Banner dei cookie</h1>');
var $technical = $('<button>');
$technical.on(
'click',
function() {
$main_box.hide(3000);
dataLayer.push({event: 'TechnicalCookie'});
}
);
$technical.text('Accetta');
$('body').append($main_box);
$main_box.append($main_title);
$main_box.append($technical);
})(window.jQuery || window.$ || window.Zepto);
</script>Il banner dei cookie è un semplice div grigio semitrasparente con un bottone per accettare i cookie.
Dopo aver accettato viene sbloccata l’esecuzione del javascript e degli iframe.
Lo sblocco avviene quando si clicca il bottone accetta, il click nasconde il banner e sblocca l’esecuzione con l’esecuzione del seguente Tag:
<script>
;(function($) {
$('[data-src]').each(
function(i, el) {
$(el).prop('src', $(el).data('src'));
}
);
$('script[type="text/plain"]').each(
function(i,el){
$(el).prop('type','text/javascript');
eval($(el).text());
}
);
})(window.$ || window.jQuery || window.Zepto);
</script>Come vedete da questo semplice prototipo il Tag Manager offre un mondo di possibilità nella gestione dei Tag javascript.