Come ti ho già spiegato nel mio bellissimo glossario, la CRO, ovvero la Convertion Rate Optimization, è indispensabile per migliorare la performance del tuo sito.
Ad esempio, puoi capire come gli utenti navigano (con quali dispositivi, quali browser, eccetera) per migliorare la loro User Experience e rendere le pagine sempre più convincenti e ottimizzate, con l’obiettivo di aumentare il tasso di conversione.
Dato che queste informazioni non sono presenti di default in Google Analytics, possiamo implementare il tracciamento della posizione dello schermo mobile con Google Tag Manager! Lo faremo usando due Tag differenti, quindi scegli tu se eventualmente te ne interessa solo uno 😉 Questa implementazione ti aiuterà a decidere se e quali miglioramenti apportare al tuo sito.
STEP 1 – CREA IL TAG HTML PERSONALIZZATO
Innanzitutto, creiamo lo script per capire se il browser usato è per mobile o meno.
Nota: Questo script potrebbe non funzionare su alcuni dispositivi o browser.
STEP 2 – CREA IL TAG HTML PERSONALIZZATO
Pusha nel Data Layer i valori riguardanti l’orientamento dello smartphone (Portrait, verticale; Landscape, orizzontale) e quelli relativi al cambio di posizione, tramite una funzione JavaScript.
Tag > Nuovo > Configurazione tag
Tipo di tag:HTML Personalizzato
Incolla lo script:
<script>
if (isMobile()) {
var isPortrait = window.matchMedia("(orientation: portrait)");
// if is portrait
if(isPortrait) {
dataLayer.push({'event':'orientation','position':'Portrait'})
} else {
dataLayer.push({'event':'orientation','position':'Landscape'})
}
// on orientation change
isPortrait.addListener(function(event) {
if(event.matches) {
dataLayer.push({'event':'changeOrientation','oldPosition':'Landscape','newPosition':'Portrait'})
}
else {
dataLayer.push({'event':'changeOrientation','oldPosition':'Portrait','newPosition':'Landscape'})
}
});
}
</script>
Attiva su:All Pages
Per essere sicuri di non generare errori durante l’esecuzione, è bene aggiungere un tag di attivazione per caricare prima la nostra funzione isMobile(). Per impostarlo vai su Impostazioni avanzata, sulla voce Sequenza tag > Attiva un tag prima dell’attivazione di, seleziona la casella e successivamente il tag appena creato “cHTML – Is Mobile”
Nomina il Tag “cHTML – Mobile Orientation”
Salva
STEP 3 – CREA LE VARIABILI
In questa fase, andremo a creare 3 Variabili di Livello Dati che ci serviranno nei Tag successivi, per tracciare l’orientamento dello smartphone oppure il cambio di posizione dello schermo.
VARIABILE POSITION
Equivale all’orientamento dello schermo al momento dell’accesso al sito. Configurala così:
Variabili > Nuova > Configurazione variabile
Tipo di variabile:Variabile di livello dati
Nome della variabile:position
Versione livello dati: lascia Versione 2
Nomina la Variabile semplicemente “position” e salva
VARIABILE OLD POSITION
Questa Variabile invece recupera la posizione originaria dello schermo prima di cambiare orientamento. Serve per il Tag del tracciamento cambio posizione.
Variabili > Nuova > Configurazione variabile
Tipo di variabile:Variabile di livello dati
Nome della variabile:oldPosition
Versione livello dati: lascia Versione 2
Nomina la Variabile “oldPosition” e salva
VARIABILE NEW POSITION
L’ultima Variabile recupera la posizione dello schermo dopo il cambio orientamento.
Variabili > Nuova > Configurazione variabile
Tipo di variabile:Variabile di livello dati
Nome della variabile:newPosition
Versione livello dati: lascia Versione 2
Nomina la Variabile “newPosition” e salva
STEP 4 – CREA L’ATTIVATORE PER IL TAG POSIZIONE
Questo Attivatore andrà implementato sul Tag per tracciare l’orientamento dello schermo al momento dell’accesso al sito.
Attivatore > Nuovo > Configurazione Attivatore
Tipo di attivatore:Evento personalizzato
Nome evento:orientation
Attiva su:Tutti gli eventi personalizzati
Dai un nome all’attivatore, per esempio “Orientamento”
Salva
STEP 5 – CREA IL TAG POSIZIONE
Andiamo a creare il Tag che servirà a tracciare l’orientamento dello schermo quando l’utente entra nel sito.
Attiva su: l’Attivatore creato prima, ovvero “orientation”
Rinomina il Tag “GA – Event – Starting Orientation” e salvalo
STEP 6 – ATTIVATORE TAG CAMBIO POSIZIONE
Adesso creeremo l’Attivatore per il Tag che traccerà il cambiamento dell’orientamento dello schermo.
Attivatore > Nuovo > Configurazione Attivatore
Tipo di attivatore:Evento personalizzato
Nome evento:changeOrientation
Attiva su:Tutti gli eventi personalizzati
Dai un nome all’attivatore, per esempio “changeOrientation”
Salva
STEP 7 – TAG CAMBIO POSIZIONE
L’ultimo Tag, invece, serve a tracciare gli utenti che cambiano posizione dello schermo mobile, passando da verticale a orizzontale, e viceversa.
Tag > Nuovo > Configurazione Tag
Tipo di tag:Universal Analytics
Tipo di monitoraggio:Evento
Categoria:Mobile
Azione: Change orientation
Etichetta:From:{{oldpos}} To:{{newpos}}
Come nell’altro Tag, implementa un set di Impostazioni di GA oppure abilita l’Override delle impostazioni inserendo la Costante di Google Analytics o direttamente il codice UA di Google Analytics
Attiva su: l’Attivatore creato prima “Cambio Orientamento”
Rinomina il Tag “GA – Event – Change Orientation” e salvalo
STEP 8 – VERIFICHIAMO IL FUNZIONAMENTO
Perfetto abbiamo configurato tutto!!
Ma come faccio a testarlo dal mio computer? Nessun problema, con la console del tuo browser puoi simulare di navigare un sito da mobile.
Avvia l’anteprima del contenitore e apri il tuo sito. Ora premi F12 per accedere alla console del tuo browser, successivamente clicca l’icona per cambiare dispositivo. Una volta fatto ricarica la pagina per visualizzare gli eventi relativi all’orientamento del dispositivo.
Ora clicca l’icona per cambiare l’orientamento per testare anche il cambio di orientamento della pagina.
Ora non ti resta che tracciare 🙂
Bene direi che anche questa volta siamo riusciti a tracciare che diavolo sta facendo l’utente con il suo cellulare 🙂
Tu cosa ne pensi? Ti è stata utile questa guida? Lasciami un commento 🙂
