Guida Avanzata: Capire se l’Utente ha la Scheda del tuo Sito in Primo Piano nel Browser con Google Tag Manager

Come ben saprai, conoscere il comportamento di un utente all’interno del tuo sito è fondamentale.

Perché più informazioni hai, più puoi migliorare il tuo tasso di conversione 🙂

E poi — diciamoci la verità — non ti senti un po’ 007 quando tracci i PDF scaricati o la percentuale di video visualizzata?

Io sì, non per niente ho inventato lo Spy Tool 😛

Scherzi a parte (no, in realtà non scherzo), in questa guida ti mostrerò come inviare a Google Analytics un evento con lo stato di visibilità del sito, per sapere se l’utente lo sta davvero visitando o semplicemente ha aperto 50 schede di navigazione e il tuo sito è fra una di queste.

In questo modo potrai effettivamente capire se l’utente sta interagendo o se sei solo una delle 50 schede in attesa di un segnale di vita.

Curioso? Vediamo insieme come fare.

STEP 1- CREA TAG HTML PERSONALIZZATO

Per prima cosa, abbiamo bisogno di una funzione che ci dica se l’utente sta visualizzando il sito o lo sta tenendo aperto solo come tab. Inoltre, questo Tag servirà per “pushare” nel Data Layer i valori della nostra Variabile e dell’Attivatore.

I passaggi sono molto semplici:

• Vai all’interno del tuo contenitore.
• Tag > Nuovo.
• Tipo di Tag: HTML personalizzato.
• Incolla questo script:
  

  <script>
  var hidden, visibilityChange; 
  if (typeof document.hidden !== "undefined") {  
   hidden = "hidden";
   visibilityChange = "visibilitychange";
  } else if (typeof document.msHidden !== "undefined") {
   hidden = "msHidden";
   visibilityChange = "msvisibilitychange";
  } else if (typeof document.webkitHidden !== "undefined") {
   hidden = "webkitHidden";
   visibilityChange = "webkitvisibilitychange";
  }
  
  var videoElement = document.getElementById("videoElement");
  function handleVisibilityChange() {
   if (document[hidden]) {
   dataLayer.push({
   'event':'visibilityChange',
   'visibility': 'hidden'
   });
   } else {
   dataLayer.push({
   'event':'visibilityChange',
   'visibility': 'visible'
   });
   }
  }
  
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
   if (document[hidden]) {
   dataLayer.push({
   'event':'visibilityChange',
   'visibility': 'hidden'
   });
   } else {
   dataLayer.push({
   'event':'visibilityChange',
   'visibility': 'visible'
   });
   };
  </script>

• Attiva su: All Pages
• Nomina il Tag: “Listener – Visibility”
• Salva

STEP 2 – CREA L’ATTIVATORE

L’obiettivo di questa guida è inviare a Google Analytics un evento con lo “stato di visibilità” del sito.

Il tuo utente sta leggendo il tuo articolo? Oppure il tuo sito è all’interno della 30° scheda? Quante volte switcha da una scheda all’altra?

Per avere queste informazioni, la prima cosa da fare è creare un Attivatore:

• Attivatori > Nuovo
• Tipo di Attivatore: Evento personalizzato
• Nome evento: visibilityChange
• Salva con il nome: “custom – visibilityChange”

STEP 3 – CREA LA VARIABILE

Ora dovrai creare una Variabile che registri se il sito sia “visible” o “hidden“:

• Variabili > Variabili definite dall’utente > Nuova
• Tipo di Variabile: Variabile di livello dati
• Nome Variabile livello dati: visibility
• Versione livello dati: Versione 2
• Nomina la Variabile: “dlv – visibility”
• Salva

STEP 4 – CREA IL TAG EVENTO

E ora non ti resta che inviare tutto a Google Analytics attraverso un Tag:

• Tag > Nuovo.
• Tipo di Tag: Universal Analytics.
• Tipo di monitoraggio: Evento.
• Categoria: Visibility.
• Azione: {{dlv – visibility}}.
• Etichetta: {{Page path}} (così potrai sapere quale pagina viene più “oscurata”).
• Hit da non interazione: True.

A questo punto possiamo selezionare la variabile di Google Analytics su Impostazioni di Google Analytics e abilitare l’override, mettendo come ID Monitoraggio la tua costante GA oppure il codice UA.

• Attivatori di azionamento:“custom – visibilityChange”.
• Nomina il Tag: “GA – Event – Visibility”.
• Salva.

STEP 5 – VERIFICA IL TAG

Dopo tutta questa fatica, almeno controlla che funzioni tutto, no? 😛
Con la funzione di Anteprima e Debug attiva, vai sul tuo sito: nella colonna a sinistra si attiverà l’evento “visibilityChange” e se ci cliccherai sopra, tra i Tags Fired On This Event troverai il Tag che hai appena creato.

Se è così, allora vuol dire che tutto funziona e non ti resta che pubblicare! Clicca sul pulsante blu “Invia” per pubblicare le modifiche ufficialmente.

Interessante come funzione, no? Che ne pensi?

P.S. Ovviamente potresti utilizzare l’Attivatore per far attivare qualsiasi altro tipo di Tag e non un semplice evento di Google Analytics 😉

Oh, questa guida ha già il template dedicato dentro il Progetto Andromeda e nel Club Tag Manager Italia 🙂

A presto e… Buon Tag!