Guida Base: Utilizzare l’Attivatore Visibilità di un Elemento in Google Tag Manager

[Aggiornata 11 Aprile 2021]

Spesso ci affidiamo alla metrica “Pageview” per sapere se il nostro utente ha visualizzato davvero la nostra pagina, non sapendo che tra tutte le metriche è quella meno affidabile.

Sorpreso?

In questa guida, ti mostrerò come utilizzare la visibilità di un elemento per tracciare il comportamento di un utente.

Conoscere la percentuale di scrolling del visitatore non ti basterà più, perché con l’Attivatore che utilizzeremo potrai tracciare quando l’utente visualizza un elemento specifico della pagina, come ad esempio, un’immagine promozionale.

Roba suuuuuuperfiga, insomma 😉

STEP 1 – CONFIGURA L’ATTIVATORE

• Entra nella sezione Attivatori.
• Clicca su: Nuovo.
• Selezione l’Attivatore: Visibilità di un elemento.

Ora hai davanti a te una miriade di opzioni, ma non ti preoccupare, cercherò di spiegartele tutte 🙂

Metodo di Selezione

Puoi fare in modo che l’Attivatore si attivi quando all’interno della porzione visibile del browser compare un specifico attributo ID o una classe CSS.

Quando attivare questo Attivatore

1. Una volta per pagina: se ci sono più elementi con lo stesso ID o classe CSS, selezionando questa opzione l’Attivatore si attiverà solo la prima volta che l’elemento sarà visibile nella finestra del browser.
2. Una volta per evento: l’Attivatore si scatenerà una volta sola nel caso appaia un attributo con ID specifico, più volte per ogni classe CSS corrispondente.
3. Ogni volta che un elemento appare sulle schermo: l’Attivatore si attiverà sempre e comunque, ogni volta che l’elemento selezionato compare.

Opzioni Avanzate

1. Percentuale minima visibilità: qui puoi inserire la percentuale minima in cui un elemento deve essere visibile, prima che si scateni l’Attivatore.
2. Imposta il tempo minimo sullo schermo: puoi inserire il tempo minimo che un elemento selezionato deve essere visibile sullo schermo, prima che l’Attivatore venga attivato.
3. Rileva modifiche nel DOM: uuuhhh, questa è roba forte! Questa opzione va a monitorare gli elementi corrispondenti che appaiono come modifiche nel DOM.

Ora che hai la panoramica generale delle opzioni presenti in questo Attivatore, andiamo a configurarlo per attivarsi quando l’utente visualizza un banner promozionale.

• Metodo di selezione: ID.
• ID elemento: 75euro (nel tuo caso l’ID sarà sicuramente diverso 😉 ).
• Attiva: Una volta per pagina.
• Percentuale minima visibilità: 50.
• Spunta l’opzione: Imposta il tempo minimo sullo schermo.
• Inserisci: 20000 ( io ho messo questo tempo, tu puoi cambiare).
• Attiva su: Tutti gli eventi di visibilità.
• Nomina l’Attivatore: “Banner Visibility”.
• Salva.

STEP 2 – CREA IL TAG EVENTO

Non ti resta che inviare a Google Analytics un evento che segnali quando il banner è stato visualizzato 🙂

• Tag > Nuovo > Universal Analytics
• Tipo di monitoraggio: Evento.
• Categoria: Element Visibility.
• Azione: {{Page Path}}.
• Etichetta: {{Form ID}}.
• Hit da non interazione: false.
• 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 “Banner Visibility”.
• Nomina il Tag: “GA – Event – Banner Visibility”.

Verifica che il Tag funzioni e dopo potrai pubblicare le tue modifiche, cliccando sul pulsante blu “Invia”!

Questo Attivatore è davvero una figata, ti permette di tracciare nel dettaglio il comportamento dell’utente, senza utilizzare del codice 🙂

A presto e… Buon Tag!