Come tracciare le conversioni con Google Tag Manager e l’attivatore Visibilità di un Elemento

Se sei un lettore del mio blog probabilmente ti sarà capitato di leggere i miei articoli dedicati al tracciamento delle conversioni grazie all’utilizzo di Google Tag Manager. Da quando è nato lo strumento di Google ho affrontato questo argomento varie volte:

• Come tracciare le conversioni con GTM: guida base al tracciamento di vari tipi di conversione come form, click e download di documenti;
• Tracciamento avanzato dei form con GTM: come tracciare la compilazione di form di contatti quando il listener nativo di Google Tag Manager non si può utilizzare;
• Tracciare l’invio di Form con WordPress, Contact Form 7 e Google Tag Manager: guida specifica per WordPress su come utilizzare Contact Form 7 e Google Tag Manager per tracciare i form di contatti.

A questo punto ti chiederai: a cosa serve l’ennesima guida sull’utilizzo di Google Tag Manager per il tracciamento?

La risposta è semplice: da quando è stato rilasciata la prima versione di GTM, il tool di Google ha subito varie evoluzioni che hanno reso semplice quello che all’inizio era meno semplice. Visto che lo scopo di un sistema di tag management, tra le altre cose, è quello di gestire con semplicità alcuni processi, ho voluto realizzare questo articolo con l’obiettivo di mostrarvi un nuovo modo per sfruttare al meglio lo strumento.

Il sistema di analisi delle conversioni di cui vi parlo oggi si basa su un attivatore, introdotto ad ottobre 2017, che si chiama Visibilità di un elemento.

Che cos’è l’attivatore Visibilità di un elemento

L’attivatore Visibilità di un elemento, come spiega la guida ufficiale di Google, permette di attivare un tag solo quando un elemento specifico diventa visibile nella pagina. L’attivatore si innesca quando un determinato elemento appare nell’area visibile dello schermo (viewport) o diventa visibile in base allo stile (ad es. da nascosto passa a non nascosto).

Questa tipologia di attivatore è molto utile per tracciare quando un utente vede, realmente, una sezione del sito come ad esempio un banner o un box. In questo modo si può monitorare in modo più puntuale la reale efficacia dei nostri contenuti.

Con l’attivatore Visibilità di un elemento è possibile impostare anche una percentuale di visibilità, dall’1 al 100% ed un tempo di permanenza minima dell’elemento sullo schermo dell’utente (così da decidere non solo quale porzione dell’elemento l’utente deve vedere ma anche per quanto tempo).

Grazie alla flessibilità di questo attivatore è possibile utilizzarlo in tante diverse casistiche. In questo articolo, ad esempio, ti spiego come sfruttarlo per tracciare la compilazione di un form di contatti su un sito quando altre soluzioni (come il listener di invio moduli nativo di GTM) non funzionano.

Per fare ciò sfrutteremo l’opzione avanzata Rileva modifiche nel DOM che permette all’attivatore di funzionare in corrispondenza di modifiche del DOM.

Come utilizzare l’attivatore Visibilità di un elemento per tracciare i form

Abbiamo appena visto che l’attivatore Visibilità di un elemento permette di monitorare la reale visibilità di un elemento sulla pagina. Questa visibilità può derivare dalla comparsa dell’elemento quando, ad esempio, l’utente scrolla in basso sulla pagina e vede l’elemento che prima era below the fold ma anche quando l’elemento, di partenza, è nascosto nella pagina (es. tramite css) e diventa visibile successivamente all’interazione dell’utente.

Questo secondo caso, se ci pensi, si adatta perfettamente alla situazione in cui nel tuo sito utilizzi un form di contatti basato su tecnologia AJAX (o similare) che una volta compilato il modulo non reindirizza ad una nuova pagina (situazione facile da tracciare con Google Analytics) ma fa comparire nella stessa pagina un messaggio di Thank You.

Requisiti

Per poter utilizzare il sistema di tracciamento con l’attivatore Visibilità di un elemento devi prima verificare che il form, successivamente all’invio da parte dell’utente, faccia comparire sulla pagina un messaggio di ringraziamento che abbia un identificatore specifico (id o classe) “agganciabile” tramite un selettore css.

Vediamo un esempio.

Nell’immagine sopra il form, dopo essere stato compilato, fa comparire un messaggio di ringraziamento all’utente con un bordo verde.

Analizzando il codice sorgente del box di ringraziamento ho identificato una classe univoca associata al solo messaggio di Thank You: wpcf7-mail-sent-ok. Appoggiandoci a questa classe è possibile utilizzare l’attivatore in corrispondenza del messaggio inviato.

Step 1 – Creazione dell’Attivatore

1. Andiamo in Google Tag Manager sezione Attivatori -> Nuovi Attivatori;
2. Selezioniamo come Tipo di Attivatore -> Visibilità di un elemento;
3. Come metodo di selezione impostiamo ID (se esiste un id univoc) o Selettore CSS (negli altri casi) e inseriamo il nostro identificatore dell’elemento;
4. Nella sezione Quando attivare questo attivatore selezionare quante volte deve essere attivato l’attivatore (nel caso di un form di contatti si può impostare Ogni volta che un elemento appare sullo schermo;
5. Nella sezione Percentuale minima visibilità impostiamo 100%;
6. Spuntiamo la casella Rileva modifiche nel DOM;
7. Impostare un eventuale pagina o gruppo di pagine dove far attivare l’attivatore.

Step 2 – Creazione del Tag Evento Google Analytics

1. Andiamo in Tag -> Nuovo Tag;
2. Selezioniamo come Tipo di Tag-> Universal Analytics e come Tipo di Monitoraggio -> Evento;
3. In Parametri del monitoraggio eventi impostiamo Categoria, Azione ed Etichetta;
4. Come Attivazione selezioniamo l’Attivatore precedentemente creato.

Step 3 – Anteprima e controllo del tag

Per verificare che l’attivatore funzioni correttamente andiamo in modalità anteprima e compiliamo un form di test.

Per un ulteriore controllo proviamo a compilare con un errore il form di contatti e accertiamoci che in corrispondenza di un messaggio diverso dal Thank You non si attivi l’evento.

Infine verifichiamo nella sezione Tempo Reale di Google Analytics che il nostro evento venga registrato correttamente.

Stefano Salustri

Sono un Consulente in Digital Marketing con oltre 10 anni di esperienza. Mi occupo di progettare e sviluppare strategie digitali per Piccole e Medie Imprese per aiutare le aziende ad ottenere il massimo ritorno dagli investimenti nei canali online.