Google Tag Manager

Single Page Application e Google Tag Manager

Si stanno sempre più diffondendo siti web chiamati Single Page Application (SPA). Questi siti web hanno diversi vantaggi lato utente e quindi a livello di UX, ma possono creare non pochi problemi nel tracciamento web.

Come funzionano

Al primo caricamento della pagina, le SPA caricano tutte le risorse necessarie durante la navigazione del sito web. Ogni volta che l’utente naviga sul sito e clicca sui diversi contenuti dello stesso, il contenuto successivo viene caricato in maniera dinamica. Quindi, tecnicamente, la pagina non si ricarica anche se i contenuti sono differenti.

Web tracking

Il tag di Google Analytics opera perfettamente per i siti web tradizionali , in quanto lo snippet di codice si attiva in ogni singola pagina visitata dall’utente. Per le Single Page Application invece, il codice si attiva una volta sola, proprio perché i contenuti sono caricati in maniera dinamica.

A livello pratico, all’interno di Google Analytics vedremo solamente una pagina vista. Sarà quindi necessario catturare manualmente le pagine viste, virtuali, quando un nuovo contenuto si carica sul sito.

Come sapere se sto lavorando su una SPA?

Il sito web su cui sto lavorando è una Single Page Application? Per rispondere a questa domanda, puoi osservare come si comporta la modalità Preview and Debug (P&D) di Google Tag Manager.

preview and debug mode gtm

Se al caricamento di una nuova pagina, la modalità P&D si ricarica, allora non stai lavorando con una SPA.

Al contrario, se, durante la navigazione da una pagina all’altra, la modalità P&D di GTM rimane invariata o, comunque, traccia le tue interazioni ma non le pageviews, allora sei su una Single Page Application.

preview google tag manager

Questo accade proprio perché nelle SPA non viene caricato il documento della pagina e dunque non verrà caricato il codice di tracciamento in JavaScript. Proprio per questo motivo, né GA né GTM tracceranno queste pagine dinamiche.

Nel concreto, con il semplice tag di Google Analytics, quello che vedremo all’interno del Rapporto in Tempo Reale sarebbe:

  • una visualizzazione di pagina (la landing page o la pagina che subisce un refresh manuale)
  • l’URL in cui avviene la prima hit
hit google analytics

Il problema è che, pur continuando la navigazione sul sito, non verranno inviate a GA tutte le interazioni che continuano ad avvenire e, dopo poco tempo, vedremo una situazione del genere:

real time report google analytics

Solo se l’utente effettua un refresh (il classico F5) ad ogni visualizzazione di un nuovo contenuto, allora i dati saranno processati come un classico sito web. Ovviamente l’F5 ad ogni visualizzazione di pagina è inimmaginabile!

E’ comunque possibile tracciare le Single Page Application, aggiungendo alcune configurazioni specifiche in Google Tag Manager.

Ci sono però due opzioni:

  1. attraverso il solo aiuto di GTM (come descritto di seguito fino allo Step 5)
  2. attraverso GTM e lo sviluppatore

Come tracciare le Single Page Application con Google Tag Manager

Step iniziali

La prima domanda da porsi è: cambia l’URL durante la navigazione?

Se la risposta è sì, allora posso usare l’attivatore History Change.

STEP 1 – CREARE UN TRIGGER

Dobbiamo creare un nuovo trigger di tipo History Change.

In GTM, clicca su Trigger – New e imposta come nell’immagine:

Trigger Type: History Change

Trigger fires on: All History Changes

all history change trigger

Salva il trigger.

STEP 2 – ATTIVARE LE VARIABILI BUILT-IN

Vai su Variables – Built-in Variables – Configure e attiva tutte le voci che trovi sotto ”History”:

built-in variables history tag manager
STEP 3 – CONTROLLO DEL TRIGGER

Controlliamo ora se il trigger creato funziona sul sito. Fai un Refresh alla modalità Preview&Debug (P&D) di GTM e un refresh al sito.

Ora, navigando sui contenuti, dovresti vedere l’attivazione di diversi Eventi History :

history event google tag manager
STEP 4 – CONTROLLARE I VALORI ALL’INTERNO DELLE VARIABILI PER RACCOGLIERE LE GIUSTE INFORMAZIONI

Cliccando all’interno dell’Evento History e selezionando poi la voce Data Layer posso ritrovare alcune informazioni che mi saranno utili per tracciare le pageviews successivamente.

data layer history

A questo punto potrai incontrare diverse opzioni, in base al sito sul quale stai lavorando. Per ogni possibile opzione c’è una soluzione di tracciamento 😉

Di seguito trovi le possibili situazioni che puoi incontrare e la guida per tracciare ogni caso.

SPA con cambio di URL durante la navigazione

STEP 4.1 – SITO WEB CON CAMBIO URL ‘NORMALE’

Ci sono Single Page Applications, il cui URL si modifica come su un sito normale quando si naviga da un contenuto all’altro.

Per esempio, quando sono in home page ho questo link: ‘www.esempio.com’ ma quando mi sposto su un altro contenuto ne ho uno diverso: ‘www.esempio.com/categoria1’ e così via.

Dopo aver seguito tutti gli Step precedenti, è necessario controllare il contenuto raccolto dalle Variabili.

Cliccando sull’Evento History ecco cosa appare e nel dettaglio la descrizione di ogni punto:

history event gtm
  1. Trovi gli Eventi History che appaiono dopo aver creato il trigger dello Step 1
  2. Clicca su Data Layer per vedere quali informazioni vengono raccolte
  3. sotto la voce ‘gtm.oldUrl’ appare il primo link in cui mi trovavo e nella voce ‘gtm.newUrl’ il secondo link che ho cliccato (in pratica viene salvata la cronologia della mia visita)
  4. il nome dell’Evento History che raccoglie queste informazioni

Ho le informazioni che mi interessano. Procedo a modificare il trigger.

Step 4.1.1 – Modificare il trigger creato allo Step 1

Dopo aver osservato le informazioni che vengono raccolte, devo modificare l’attivazione del mio trigger.

Non sarà più necessario che si attivi su tutti gli eventi History Change ma solo su alcuni. Quali? Come visto sopra, mi interesserà quello che raccoglie la mia ‘cronologia’ di navigazione ossia pushState.

Clicca sul trigger creato allo step 1 e modificalo così:

Trigger fires on: Some History Changes

Tipo di Evento: History Source – equals – pushState

pushState google tag manager

Ho cambiato il nome del trigger, chiamandolo ora ‘All History Change – pushState‘.

Il nome della variabile inserita è History Source perché è quella che contiene il valore che mi interessa:

SPA con cambio di URL durante la navigazione con hash #

STEP 4.2 – SITO WEB CON CAMBIO URL CON HASH #

Esistono diverse SPA in cui, ad ogni visualizzazione di nuovi contenuti, l’URL si modifica e appare l’hash #.

Ad esempio: ‘www.esempio.com/#foto’ per poi passare a ‘www.esempio.com/#gallery‘ etc.

Grazie alle Built-in Variables attivate allo Step 2, possiamo raccogliere questa informazione che viene salvata sotto la Variabile New History Fragment:

Di norma, il tag di Google Analytics raccoglie i valori all’interno dell’URL per trasferirli a GA. Tuttavia, se all’interno dell’URL si trova un frammento, cioè una stringa di testo, che appare dopo il simbolo hash #, i valori dopo l’ # non saranno raccolti automaticamente.

Per questo motivo dobbiamo modificare la GA Settings Variable.

4.2.1 – Modificare la GA Settings Variable

Vai sulla GA Settings Variable e nella voce Fields to Set inserisci:

Field Name: page

Value: {{New History Fragment}}

ga settings variable

Salva, poi dai un Refresh alla modalità P&D di GTM e infine controlla su GA nel rapporto Real-Time.

real time report ga

SPA con cambio di URL durante la navigazione con hash # e Page Path

STEP 4.3 – SITO WEB CON CAMBIO URL CON HASH # e PAGE PATH

Ci sono delle Single Page Application che sono simili allo Step 4.2 ma che, oltre ad avere nell’URL l’hash #, hanno anche la variabile Page Path. Ecco un esempio:

www.esempio.it/pagina-uno/categoria-2/#foto

In questi casi, se lasciamo le regole impostate nello Step 4.2, l’unica informazione che verrà raccolta sarà ‘#foto‘. Perderai tutto il resto del valore ‘/pagina-uno/categoria-2/‘.

Per evitare questa situazione bisogna aggiungere un valore all’interno della GA Settings Variable.

Nella voce Fields to Set vista al punto 4.2.1 inserisci due valori:

Field: page

Value: {{Page Path}}{{New History Fragment}}

gtm ga settings variable page path

Salva il tutto.

SPA con cambio di URL durante la navigazione con hash # e parametri query (query parameters)

STEP 4.4 – SITO WEB CON CAMBIO URL CON HASH # e PARAMETRI QUERY

E’ possibile incontrare Single Page Application nel cui URL siano presenti sia l’hash # sia i query parameters.

Esempio: www.esempio.com/?q=categoria#foto

Per raccogliere questa informazione, devo aggiungere una Variabile in più nella Ga Settings Variable rispetto al punto precedente.

4.4.1 – Creazione della variabile per raccogliere i parametri query

Vai in Variables – New e seleziona Java Script Variable.

Il nome da inserire all’interno sarà: window.location.search

4.4.2 – Inserire la variabile creata nella GA Settings Variable

A questo punto dobbiamo aggiornare la GA Settings Variable , inserendo la variabile Javascript del punto precedente.

All’interno di Fields to Set i valori saranno i seguenti:

Field: page

Value: {{Page Path}}{{js – window.location.search}}#{{New History Fragment}}

ga settings variable with hash

Salva il tutto e verifica su GA.

hash real time

Caso: New History Fragment vuota ma New History State con valore Path

STEP 4.5 – CASO DI VARIABILE New History Fragment VUOTA MA VARIABILE New History State CON IL CAMPO Path

Nello Step 4.2 abbiamo visto che la variabile New History Fragment raccoglie i valori presenti dopo l’hash #.

Può capitare che, ispezionando l’evento History sia nel Data Layer sia nelle Variabili che raccolgono le informazioni, proprio la variabile New History Fragment sia vuota:

new history fragment variable gtm

ma la variabile New History State contenga al suo interno diversi valori. In questo caso, mi interessa una cosa nello specifico, ossia la voce path che raccoglie il valore dell’URL:

new history state gtm path

Per raccogliere solo la chiave path devo creare una nuova variabile.

Step 4.5.1 – Raccogliere il valore path con una Variabile Data Layer

Creiamo una nuova Variabile di tipo Data Layer per raccogliere il campo path all’interno della Variabile New History State.

Vai su Variables – New.

Seleziona come tipologia la variabile Data Layer e inserisci i campi:

Data Layer Variable Name: gtm.newHistoryState.path

gtm newHistoryState path
4.5.2 – Inserire la variabile creata nella GA Settings Variable

Ora modifichiamo la GA Settings Variable per inviare il dato raccolto nello step precedente a Google Analytics.

Apri la GA Settings Variable e all’interno di Fields to Set inserisci questi valori:

Field name: page

Value: {{dlv – gtm.newHistoryState.path}}

ga settings variable history path

Salva e verifica sul Rapporto in tempo reale di Google Analytics.

STEP 5 – CONTROLLO DEL TRIGGER

Verifica che ci sia il giusto trigger per far scattare le Visualizzazioni di pagina.

Il tag GA – Pageview dovrà avere associato il trigger: All History Changes (ad eccezione che il tuo caso sia come quello descritto nello Step 4.1.1).

trigger all history change gtm

ATTENZIONE al tipo di trigger. Non inserire l’attivatore All Pages con l’attivatore All History Changes.

Rischi che la prima pagina del sito che si carica venga conteggiata una volta, attraverso All Pages appena scatta l’evento Page View e una seconda volta con All History Changes appena scatta l’evento History.

UNA DRITTA: ci sono dei siti web nei quali si attiva più di un evento History anche se l’utente non ha navigato su una nuova pagina. L’attivazione di un nuovo evento History porterebbe alla visualizzazione di una nuova pagina (pageviews). Per evitare questo rischio si può strutturare il trigger in questo modo:

history source does not contain replace gtm

Simo Ahava ha scritto un post tecnico in merito che puoi trovare qui.

Come tracciare le Single Page Application con Google Tag Manager e l’aiuto di uno sviluppatore

4.6 – TRACCIARE LE SPA CON GTM E L’AIUTO DI UNO SVILUPPATORE

Se hai avuto la pazienza di leggere la guida fino qui, può essere che tu abbia risolto il problema di tracciare la Single Page Application sulla quale stai lavorando.

In questo capitolo ti spiego invece come tracciare le SPA nel caso in cui le soluzioni proposte in precedenza non si adattassero al tuo caso.

Dovrai chiedere l’aiuto ad uno sviluppatore e chiedergli di inserire, nel sito, un codice per pushare, per iniettare delle informazioni in più nel Data Layer, usando il dataLayer.push.

Forzando queste informazioni sul sito web, sarà quindi possibile ritrovare una serie di valori che possono essere raccolti come abbiamo fatto in precedenza e inviati a Google Analytics attraverso gli strumenti che ci mette a disposizione Google Tag Manager.

STEP 4.6.1 – Fornire il codice allo sviluppatore

Lo script, di tipo dataLayer.push è il seguente:

<script> 
window.dataLayer = window.dataLayer || []; 
window.dataLayer.push({
'event': 'Pageview',
'pagePath': 'https://www.sito.it/categoria/chi-sono',
'pageTitle': 'Chi Sono' 
}); 
</script>

Vediamo le voci che lo compongono:

  • ‘event’: ‘Pageview’: è il nome dell’evento che vuoi pushare nel Data Layer
  • ‘pagePath’:’https://www.sito.it/categoria/chi-sono’ : è il percorso della pagina che verrà raccolto. Devi chiedere allo sviluppatore di rendere questo parametro dinamico, in modo che cambi ogni volta che cambia l’URL
  • ‘pageTitle’:’Chi Sono’ : il parametro che raccoglie il titolo della pagina

Ricorda che il tuo scopo, in questo caso è quello di fornire il codice allo sviluppatore in modo che ci siano le informazioni corrette che puoi recuperare con Google Tag Manager. Sarà lo sviluppatore a sapere dove inserire il codice nel sito e come raccogliere dinamicamente alcuni valori attraverso lo script.

STEP 4.6.1 – Raccogliere i parametri con GTM

Ora dobbiamo recuperare i valori inseriti nel Data Layer attraverso l’uso di Google Tag Manager.

Creiamo due Variabili di tipo data layer per raccogliere il campo ‘pagePath’ e ‘pageTitle’

VARIABILE pagePath

Crea una nuova variabile e inserisci i seguenti campi (il nome deve essere lo stesso inserito nello script, quindi attenzione al maiuscolo/minuscolo):

Data Layer Variable Name: pagePath

data layer variable pagepath

VARIABILE pageTitle

Ora creiamo un’altra variabile per raccogliere il parametro pageTitle, inserendo i seguenti valori:

Data Layer Variable Name: pageTitle

data layer variable pageTitle
STEP 4.6.2 – Creazione del Trigger

Infine creiamo un trigger per attivare il tag di Google Analytics.

Crea un Trigger di tipo Custom Event con i seguenti campi:

Event name: Pageview

STEP 4.6.3 – Aggiornare la GA Settings Variable

Infine, per passare tutte le informazioni a GA, dobbiamo inserire i seguenti campi nella GA Settings Variable.

All’interno di Fields to Set i valori saranno i seguenti:

Field Name: page – Value: {{dlv – pagePath}}

Field Name: title – Value: {{dlv – pageTitle}}

google analytics settings variable gtm
STEP 4.6.4 – Associa il trigger al tag di Google Analytics

Associa il trigger creato in precedenza al tag di Google Analytics.

Salva e verifica tutto nel rapporto in Tempo reale di Google Analytics.

Il problema del ‘rouge referral’

C’è un’ultima ma importante cosa da sapere se implementi il tracciamento con l’aiuto di uno sviluppatore.

Nel caso in cui avessi traffico a pagamento sul sito SPA su cui stai lavorando, la soluzione appena proposta negli step 4.6, non sarà adatta al 100%.

Il problema: se hai del traffico a pagamento che porta alla Single Page Application sulla quale stai lavorando, quello che accade è che, quando un utente atterra sul sito da un annuncio e continua a navigare sul sito, il traffico a pagamento diventa organico. Esatto! Hai letto bene.

Se non viene risolto questo problema, Analytics effettua un calcolo sbaglio sulle attribuzioni delle sessioni tra Paid e Organico e quindi i dati di sessioni ma anche di Frequenza di rimbalzo e tempo sul sito sono tutti sfalsati e non utili alle tue analisi.

Questo problema è chiamato ‘rouge referral’ e ben descritto nel dettaglio da Simo.

Per risolverlo bisogna sempre inserire il seguente codice nel sito web, nella parte <head> e prima dello snippet di codice di GTM:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ 
originalLocation: document.location.protocol + '//' +
                                document.location.hostname +
                                document.location.pathname + 
                                document.location.search 
});

In questo modo possiamo passare alla Ga Settings Variable due parametri:

  • location: che recupererà le informazioni dal data layer, rimanendo costante;
  • page: che recupererà la URL in cui si trova l’utente

Gli step da fare saranno come nel punto precedente ossia:

  • creare una variabile di tipo data layer il cui name sarà: ‘originalLocation’
  • creare una variabile di tipo custom Java Script con all’interno il seguente codice:
function() { 
return document.location.pathname + document.location.search; 
}
current location gtm

Salva e controlla che sia tutto funzionante 😉


Conclusioni

Se sei arrivato alla fine di questo articolo sano e salvo avrai visto che ci sono diverse soluzioni per tracciare le Single Page Application.

Due sono le strade:

  1. da solo
  2. tu e uno sviluppatore

Il tutto è possibile farlo grazie a Google Tag Manager che ti permetterà di inviare tutte le informazioni a Google Analytics per poter analizzare al meglio il sito web e prendere le migliori decisioni Data-Driven.

Se ti è piaciuto il post condividilo!

Buone analisi 🙂


Potrebbero interessarti anche i seguenti articoli:

Cosa significa la voce (other) in Google Analytics?

Scroll tracking in Google Tag Manager

Come superare 5 milioni di celle con i Fogli di Google

Come creare un Rapporto Personalizzato per controllare la presenza di Transazioni Duplicate in Google Analytics?

Query Parameters in Google Analytics

Le scorciatoie da tastiera più usate per lavorare con Google Spreadsheet

Cosa sono e come utilizzare i Parametri UTM ?

Cosa sono le Visualizzazioni di Pagina Uniche in Google Analytics e perché sono diverse dalle Visualizzazioni di Pagina ?

Come si crea il tag di Google Analytics in Google Tag Manager ?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *