Cosa è Google Tag Manager e a che cosa serve

Google Tag Manager è lo strumento più utilizzato per la gestione dei Tag, quelle porzioni di codice HTML che fanno funzionare Google Analytics, AdWords, Facebook Ads ecc…

Il ruolo e il funzionamento di Google Tag Manager è ben sintetizzato dall’immagine seguente, dove è possibile vedere lo stretto legame con Facebook Ads, Google Analytics, AdWords ecc…

Come si può vedere GTM (Google Tag Manager) viene visto come il gestore dei Tag, e si posiziona tra il tuo sito WEB e tutti gli strumenti che leggono ed elaborano i Tag.

Cosa sono i Tag ?

Un Tag è una porzione di codice che ha la capacità di raccogliere dei dati da una pagina web o da una app mobile. Dopo aver installato i Tag in una pagina WEB o in una app, permettono di misurare il traffico, le visite, il comportamento dei visitatori e molto altro.

A cosa servono i Tag ?

I Tag mandano informazioni verso applicazioni come Google Analytics, Google AdWords, Facebook Ads, Hotjar, DoubleClick ecc…  Le informazioni vengono inviate quando il tag stesso viene sollecitato, cioè viene attivato da uno specifico evento a cui il tag viene associato.

Arriviamo quindi agli attivatori…

Cosa sono gli attivatori ?

Gli attivatori sono dei trigger che definiscono un evento (o hit) che si deve verificare perchè una determinata azione venga eseguita. Questi eventi sono:

• una visualizzazione di pagina
• un click
• un timer
• un invio modulo
• una modifica della cronologia
• un errore JavaScript
• o altri eventi personalizzati…

Quindi, questi attivatori confrontano il valore di una variabile con il valore predefinito nel pannello di amministrazione di GTM.

Praticamente un Tag viene eseguito solo se l’evento associato all’attivatore si verifica.

Abbiamo detto che i Tag mandano informazioni, molte di queste informazioni sono contenute nelle variabili.

Cosa sono le variabili ?

Sono elementi che contengono valori, i quali possono essere modificati e personalizzati. Le variabili posso contenere informazioni come:

• URL del sito
• Javascript
• HTML
• codice di monitoragio
• …

Le variabili possono essere predefinite da GTM, o possono essere personalizzate a seconda delle esigenze.

Cosa è il Data Layer ?

Il Data Layer (o variabile di livello dati) è un particolare tipo di contenitore di oggetti che viene utilizzato per memorizzare più oggetti. Praticamente una array.

Gli oggetti contenuti dal Data Layer possono essere praticamente di ogni tipo: stringhe, costanti, variabili, o altre array

Modalità anteprima

In alto a destra abbiamo il pulsante di Anteprima (Debug/Visualizzazione in anteprima), che permette di verificare il corretto funzionamento dei Tag implementati prima che si pubblicano definitivamente.

In modalità anteprima, c’è la possibilità di visualizzare i Tag eseguiti nella pagina in cui ti trovi, i tag implementati ma non eseguiti, il valore delle variabili, e i dati presenti nel Data Layer.

Una volta che avrai cliccato sul pulsante in alto a destra, si aprirà una apposita schermata su sfondo arancione (vedi screen shot sopra).

Dopo aver attivato l’anteprima, sempre sullo stesso browser, vai sul sito su cui hai attivato l’anteprima, e vedrai una finestra in basse che ti permetterà di vedere i Tag, le Variabili e i valori presenti nel Data Layer:

In questo modo, avrai la possibilità di verificare il corretto funzionamento dei tuoi Tag e delle relative modifiche.

A sinistra trovi un elenco degli eventi che si sono scatenati sulla pagina che stai visualizzando. Come default ne avrai 3:

• Pageview
• DOM Ready
• Windows Loaded

Questi sono eventi che corrispondono a momenti temporali ben definiti nel caricamento della pagina HTML. Cliccando su ognuno degli eventi visualizzati, puoi vedere i Tag, le Variabili e i valori del Data Layer corrispondenti.

In particolare:

• nel tab Tags puoi vedere i Tag presenti sulla pagina, divisi fra quelli che si attivano in occasione dell’evento (Fired) e quelli che non si attivano con l’evento (not Fired);
• cliccando su tab Variables puoi vedere i dettagli aggiuntivi sulle Variabili che si attivano in corrispondenza dell’evento selezionato;
• infine nel Data Layer puoi vedere il valore che viene passato al Data Layer in corrispondenza dell’evento.
  

Strumenti utili per Google Tag Manager

Google Tag Assistant è un’estensione del browser Chrome che consente di rilevare e visualizzare in tempo reale la presenza di codici di monitoraggio nelle pagine visitate. Dopo averlo installato, e attivato, vedrai l’icona

in alto a destra, e potrai vedere facilmente se nella pagina in cui ti trovi sono installati dei Tag di:

• Analytics
• AdWords
• Google Tag Manager
• DoubleClick
• ecc…

Visitando una pagina che presenta dei Tag, l’icona cambierà colore e mostrerà il numero di Tag trovati. I colori possibili sono:

• Grigio: nessun Tag
• Verde: almeno un Tag, tutto OK
• Blu: almeno un Tag, e ci sono suggerimenti per migliorare i Tag presenti nella pagina
• Giallo: c’è un Tag con alcuni problemi
• Rosso: c’è un Tag con problemi gravi

E’ possibile avere maggiori dettagli su ogni Tag Rilevato semplicemente cliccandoci sopra.

Puoi inoltre utilizzare la modalità Record, con la quale l’estensione registra la sequenza di pagine visitate e crea un report relativo al tempo di caricamento delle pagine, ai Tag rilevati e alle informazioni di questi Tag.

Ad esempio, in un blog o in un sito istituzionale potrebbe risultare utile registrare la sequenza della operazioni di registrazione utente o registrazione newsletter.

Per utilizzare la modalità Record, è necessario cliccare su Record (nella parte bassa della finestra precedente), Visitare le pagine desiderate, e al termine tornare nella finestra Google Tag Assistant e cliccare su stop Recording. Per accedere al report, cliccare su Show full report

Cliccando l’Icona dell’estensione, avrai la possibilità di scegliere quale evento analizzare:

GTM Sonar

Dopo aver installato il plugin GTM Sonar, avrai la possibilità di tenere traccia delle variabili e del Data Layer, presenti nel debug, in fase di cambio pagina. Infatti GTM Sonar blocca il cambio pagina, mantenendo i dati nel debug.

Cliccando su Link Click Listener, il plugin traccierà tutti gli eventi che GTM automaticamente crea, cioè gtm.linkClick per gli eventi di tipo Click sui link, gtm.click per i click generici e gtm.formSubmit.

WASP inspector

WASP Inspector è un plugin del browser chrome, che consente di visualizzare un diagramma con tutti i tag e gli script installati sulla pagina corrente:

Cliccando su un qualsiasi Tag o Script, si apriranno a cascata tutti i relativi Tag, eventi o elementi JavaScript implementati.

Ercole Palmeri: Innovation addicted