Monitorare le applicazioni a pagina singola (SPA) può essere complicato, poiché non ricaricano le pagine complete, rendendo più difficile il monitoraggio standard. Google Tag Manager (GTM) lato server permette di risolvere questo problema gestendo i dati sul lato server e migliorando l’accuratezza del monitoraggio e le prestazioni.
In questa guida spiegheremo come configurare GTM lato server per le SPA e illustreremo i modi migliori per gestire le pageviews, gli eventi e le interazioni.
Un’applicazione a pagina singola (SPA) è un’applicazione web che inizialmente carica una pagina HTML e aggiorna il suo contenuto in modo dinamico man mano che gli utenti interagiscono, anziché ricaricare nuove pagine per ogni azione o navigazione.
Le SPA sono diventate popolari perché offrono vantaggi fondamentali rispetto ai siti web tradizionali a più pagine:
Esempi di SPA sono Gmail, dove i contenuti si aggiornano senza ricaricare la pagina; Facebook, che permette di scorrere, postare e commentare senza aggiornare; Trello, dove le attività vengono gestite all’interno della stessa pagina. Le SPA offrono un’esperienza veloce e senza interruzioni per le applicazioni che prevedono una forte interazione con l’utente.
Il monitoraggio delle applicazioni a pagina singola (SPA) con GA4 e GTM è più complesso di quello dei normali siti web, a causa del funzionamento delle SPA. Siamo consapevoli di questa complessità e siamo qui per guidarvi in questo percorso.
Ecco perché:
- A differenza dei siti web tradizionali, non ci sono ricariche di pagine complete, in cui ogni clic carica una nuova pagina (e fa scattare le “Pageviews” di GA4). Le SPA caricano i contenuti in modo dinamico. Questo significa che il trigger “Pageview” standard non funziona allo stesso modo.
- Sono necessari trigger di eventi personalizzati. Dal momento che non ci sono ricariche di pagina, è necessario creare trigger personalizzati che rilevino interazioni specifiche dell’utente, come i clic sui pulsanti o le modifiche all’URL, per monitorare le azioni significative.
- Complessità nel monitorare i flussi di utenti. Con le SPA, gli utenti possono rimanere sulla stessa pagina mentre interagiscono con sezioni diverse. Il monitoraggio di queste interazioni richiede l’impostazione di un monitoraggio degli eventi più dettagliato per catturare queste transizioni di pagina.
- Potenziali lacune nei dati. Senza un monitoraggio adeguato, si rischia di perdere dati cruciali sull’engagement, dal momento che GA4 non tiene automaticamente traccia delle modifiche ai contenuti delle SPA. Sono necessarie configurazioni personalizzate in GTM per garantire che non si perda nulla.
La complessità deriva in gran parte dal comportamento dinamico delle SPA, che richiede un’impostazione più manuale per garantire una raccolta precisa dei dati. Anche se Google Analytics 4 include il monitoraggio integrato per queste pagine, non sempre funziona perfettamente e in modo immediato. Inoltre, alcuni siti web possono essere complicati da monitorare in modo efficace.
Per risolvere questo problema, è necessaria una configurazione aggiuntiva per monitorare efficacemente questi siti o applicazioni web. Ma non preoccupatevi: vi mostreremo come monitorare le applicazioni a pagina singola utilizzando Google Analytics 4 e Google Tag Manager.
3 modi per monitorare le applicazioni a pagina singola (SPA):
1. Misurazione potenziata di GA4 per le pageviews
GA4 ha una funzione integrata che monitora automaticamente le pageviews nelle SPA. Funziona rilevando le modifiche dell’URL, ma potrebbe essere necessario apportare alcune modifiche per monitorare tutto correttamente, a seconda di come è impostato il sito. È un buon punto di partenza, ma può essere migliore per alcuni siti.
2. Trigger di modifica della cronologia di GTM
Google Tag Manager può monitorare la navigazione degli utenti in una SPA utilizzando il trigger di modifica della cronologia. Questo trigger ascolta i cambiamenti nella cronologia del browser (come quando gli utenti si spostano tra le sezioni), permettendo di monitorare le interazioni anche se la pagina non viene ricaricata completamente.
3. Spinta del data layer con GTM
Con questo metodo, potete inviare eventi personalizzati o modifiche alla pagina al data layer all’interno del vostro SPA. A questo punto, GTM è in grado di rilevare questi push e di inviare i dati corretti a GA4. Questo approccio offre un maggiore controllo e consente di monitorare in modo più accurato interazioni specifiche.
Se avete la possibilità di implementare tutte e tre le opzioni di monitoraggio, è meglio scegliere l’ultima, che utilizza l’assistenza dello sviluppatore e il dataLayer.push. Questo metodo offre il massimo controllo e la massima flessibilità, rendendolo la soluzione più affidabile. L’invio di eventi specifici direttamente al data layer assicura che le interazioni chiave siano catturate con precisione, anche nelle SPA più complesse. Anche se può richiedere un certo impegno da parte dello sviluppatore, la precisione e la solidità di questo approccio ne valgono la pena. Sul nostro blog è disponibile una guida completa sul data layer in Google Tag Manager.
Vediamo nel dettaglio le varie opzioni.
Per monitorare le applicazioni a pagina singola utilizzando la misurazione avanzata di Google Analytics 4 per le pageviews, seguite questi semplici passaggi:
1. Andate su Impostazioni del flusso.
Accedete al vostro account GA4 e trovate le impostazioni del flusso di dati.
2. Aprite Flussi di dati in Amministrazione.
Cliccate sull’icona Amministrazione (in basso a sinistra), poi nella sezione Proprietà scegliete Flussi di dati e selezionate il flusso che volete monitorare.
Questo vi aiuterà a impostare il monitoraggio delle pagine per la vostra SPA.
3. Verranno visualizzati i dettagli del flusso Web. Cliccate sull’ingranaggio delle impostazioni sotto la voce Misurazione avanzata.
4. Cliccate su Mostra impostazioni avanzate.
5. Controllate le modifiche alla pagina in base agli eventi della cronologia del browser.
Gli eventi di Misurazione avanzata come gli Scroll, i Clic in uscita e le Ricerche sul sito devono essere monitorati con precisione, il che porta a dati sottostimati o sovrastimati. Per garantire un monitoraggio accurato, è meglio disattivarli o configurarli con GTM.
6. Al termine, cliccate sul pulsante Salva nell’angolo in alto a destra.
Per verificare che tutto funzioni correttamente, utilizzate la modalità di anteprima di GTM. Accedete a GTM, quindi cliccate su Anteprima nell’angolo in alto a destra.
Si aprirà una nuova finestra in cui inserire l’URL del sito web. Dopo aver cliccato su Connetti, la pagina si aggiorna e mostra i dettagli di monitoraggio del sito.
Al momento di selezionare il contenitore GTM in alto, dovreste vedere l’evento di modifica della cronologia, noto come Gtm.historyChange-v2.
Successivamente, cliccate sull’ID di misurazione GA4 in alto per verificare se l’evento pageview viene monitorato e inviato correttamente.
Se gli eventi non vengono inviati a GA4, non preoccupatevi: potrebbe indicare che la configurazione attuale non sta catturando tutto correttamente.
Se gli eventi non vengono inviati a GA4, non preoccupatevi: potrebbe indicare che la configurazione attuale non sta catturando tutto correttamente.
Questo metodo monitora anche i cambiamenti nella cronologia del sito web, analogamente a quanto accade con la funzione di misurazione avanzata di GA4.
Rilevando queste modifiche alla cronologia, potete utilizzarle per attivare eventi di pageview e inviarli a GA4.
Ecco come monitorare le applicazioni a pagina singola utilizzando il trigger delle modifiche alla cronologia di Google Tag Manager:
1. Accedete a Google Tag Manager.
2. Andate su Trigger e cliccate su Nuovo per creare un nuovo trigger.
3. Scorrete verso il basso e selezionate Modifica della cronologia come tipo di trigger.
4. Impostate il trigger su Tutte le modifiche alla cronologia, quindi cliccate su Salva.
Ora dovrebbe essere tutto pronto, ma facciamo una prova per verificare. Accedete alla modalità di anteprima di GTM, come abbiamo fatto con il primo metodo.
Come potete vedere, il tag di configurazione GA4 si sta attivando, ma potreste anche notare più eventi Cronologia, che possono verificarsi con alcune SPA.
Attenzione: il nuovo tag di Google ha sostituito il tag di configurazione GA4.
Se si verifica questo problema, occorre rivedere e regolare i trigger in modo che si attivino su modifiche specifiche anziché su tutte le modifiche, per garantire che i dati rimangano puliti e accurati.
Quando i primi due metodi non funziona, ne entra in gioco un terzo. Questo approccio richiede che lo sviluppatore inserisca un data layer nel codice del sito web. Il data layer memorizza i valori e attiva le pageview all’interno di Google Tag Manager.
Ecco un esempio di come potrebbe apparire il codice:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘event’: ‘virtualPageview’,
‘pageUrl’: ‘https://www.measureschool.com/learnga4/?why#ua-vs-ga4’,
‘pageTitle’: ‘Learn GA4’ // Un nome descrittivo per differenziare la pagina o il contenuto
});
</script>
Questo permette di catturare direttamente le pageviews delle pagine e altri eventi critici, integrandoli nel codice del sito.
Una volta creato il data layer, potete completare l’impostazione in GTM con i seguenti tre passaggi:
1. Impostazione di due variabili del data layer.
2. Creazione di un trigger di evento personalizzato
3. Configurazione di un tag evento page_view GA4
Iniziamo creando le variabili del data layer per pageUrl e pageTitle:
1. Andate su Variabili.
2. Cliccate su Nuovo.
3. Selezionate la Variabile data layer come tipo e successivamente configurate le variabili per pageUrl e pageTitle.
4. Ora che abbiamo memorizzato i valori dell’URL della pagina e del titolo della pagina nelle variabili del data layer, il passo successivo è creare un trigger basato sull’evento personalizzato (virtualPageview) che abbiamo definito in precedenza nel data layer.
Ecco come impostare il trigger dell’evento personalizzato:
Questo trigger si attiverà ogni volta che l’evento virtualPageview viene inviato al data layer.
5. Successivamente, creeremo il tag evento GA4 per inviare i dati a GA4. Ecco come configurarlo:
Configurate il tag come segue:
- Nome dell’evento: page_view
- Parametri e valori dell’evento:
- Trigger: Impostate il trigger ogni volta che viene rilevato l’evento personalizzato virtualPageview.
Questo invierà i dati della pagina visitata, compresi l’URL dinamico e il titolo, a GA4.
Assicuratevi di testare il terzo metodo nella modalità di anteprima di GTM e nella DebugView di GA4 per assicurarvi che vengano raccolti i dati giusti, in particolare per i parametri page_location (URL) e page_title.
Non abbiamo aggiunto questi parametri al tag di configurazione di GA4 perché GA4 li legge solo una volta durante il caricamento iniziale della pagina. Questo significa che non si accorgerebbe delle modifiche successive su una SPA, in quanto la pagina non viene ricaricata completamente.
Anche se alcuni di questi metodi possono essere impegnativi, in genere è possibile eseguirli con una configurazione meticolosa.
Comprendere le sfide delle SPA non è fondamentale, ma può rendere più facile la gestione dei problemi di monitoraggio quando si presentano. Ecco un paio di sfide comuni:
1. Dipendenza da JavaScript: per il loro funzionamento, le SPA si basano in larga misura su JavaScript. Se JavaScript è disabilitato, nessuna delle interazioni verrà monitorata e l’applicazione non funzionerà. Il rendering lato server può offrire una soluzione, ma può complicare le cose, poiché altre funzioni dinamiche potrebbero non funzionare nel modo previsto.
2. Tracking URLs with parameters or fragments: gli URL che contengono parametri come hashtag o punti interrogativi non vengono monitorati automaticamente. Per gestire questo problema, è necessario catturare l’URL completo utilizzando window.location.href in una variabile JavaScript e sovrascrivere il parametro page_location con questo valore per ogni tag evento GA4, assicurandosi che l’intero URL venga catturato con precisione.
3. Se nella modalità di anteprima di GTM compaiono più eventi di modifica della cronologia, occorre indagare ed eliminare i dati duplicati. Potete farlo regolando il trigger in modo che si attivi solo su specifici eventi di modifica della cronologia, anziché su tutti.
4. Se utilizzate il metodo del data layer e vedete che l’evento virtualPageview si attiva ogni volta che il sito web viene caricato, dovreste disabilitare l’opzione Invia un evento di pageview quando questa configurazione viene caricata, per evitare eventi di pageview non necessari.
5. È fondamentale risolvere il problema del rogue referral, in cui Google attribuisce erroneamente il traffico a pagamento come organico. Per maggiori dettagli, consultate l’articolo di Simo Ahava sull’argomento. Purtroppo, al momento questa soluzione specifica non è compatibile con GA4.
Ricordate: questo è un elenco parziale di sfide, in quanto se ne possono presentare altre a seconda dell’impostazione del vostro sito web. Tuttavia, questi punti dovrebbero darvi un’idea di cosa potete aspettarvi.
Per monitorare efficacemente le SPA, occorre seguire le seguenti buone pratiche:
Seguire queste buone pratiche può aiutarvi a evitare i problemi più comuni e a raccogliere dati accurati e affidabili quando monitorate le SPA con GA4 e GTM.
Il monitoraggio delle applicazioni a pagina singola (SPA) può essere complicato, ma Google Tag Manager (GTM) lato server rende più facile ottenere dati precisi. Che si utilizzino gli strumenti di GA4, il trigger della cronologia di GTM o il metodo del data layer, queste opzioni consentono di monitorare correttamente i contenuti dinamici.
Noi di Stape.io siamo esperti di monitoraggio lato server e forniamo strumenti come l’integrazione del data layer e la modalità di anteprima per garantire che la vostra configurazione funzioni senza problemi.
Volete migliorare il vostro monitoraggio? Iscrivetevi gratuitamente a Stape e permetteteci di aiutarvi a ottenere i risultati più accurati per le vostre SPA! Dopo l’iscrizione, potete utilizzare le nostre guide di testo e video dettagliate sull’impostazione del monitoraggio lato server con Stape.
Stape has lots of tags for server GTM! Click on Try for free to register and check them all.
Commenti