Misura le applicazioni con una sola pagina

Questo documento è rivolto agli sviluppatori che vogliono misurare le visualizzazioni di pagina nella loro applicazione a pagina singola utilizzando Google Analytics.

Le applicazioni a pagina singola (SPA) sono siti web che caricano un documento HTML una sola volta e recuperano eventuali contenuti aggiuntivi utilizzando le API JavaScript.

Esempio: supponiamo che tu abbia un modulo per acquisire alcuni lead. Il modulo ha tre schermate: > * La prima schermata per acquisire i dati del cliente. * Seconda schermata in cui i clienti indicano l'interesse per determinati servizi. * Terza pagina della schermata per registrarsi ai webinar correlati agli interessi del cliente.

La chiave per misurare correttamente le visualizzazioni di pagina dalle SPA è conteggiare le visualizzazioni di pagina per ogni schermata con cui un utente interagisce e ottenere il referrer della pagina corretto, in modo da poter monitorare correttamente il percorso dell'utente.

Prima di iniziare

Questa pagina presuppone che tu abbia già:

• Un account e una proprietà Google Analytics per il tuo sito web. Scopri come configurare Google Analytics.

• Un tag Google implementato sul tuo sito web che si attiva al caricamento iniziale della pagina. Scopri come configurare il tag Google.

Implementa la misurazione delle applicazioni a pagina singola

Per implementare una misurazione accurata delle SPA, utilizza uno di questi metodi per attivare una nuova visualizzazione di pagina virtuale:

• Modifiche alla cronologia del browser (consigliato): se la tua SPA utilizza l'API History, in particolare i metodi pushState() e replaceState() per aggiornare le schermate, utilizza questa opzione.

• Eventi personalizzati: se il tuo sito web utilizza l'oggetto DocumentFragment per eseguire il rendering di schermate diverse, utilizza questa opzione.

Implementazione della modifica della cronologia del browser

Se la tua SPA utilizza l'API History, puoi attivare la misurazione avanzata in Google Analytics per monitorare automaticamente le visualizzazioni di pagina in base agli eventi della cronologia di navigazione del browser.

Attiva la misurazione avanzata in Google Analytics

Per misurare automaticamente page_views in base alla cronologia di navigazione:

1. Apri Google Analytics

2. In Amministrazione, nella sezione Raccolta e modifica dei dati, fai clic su Stream di dati > Web.

3. In Misurazione avanzata, imposta l'opzione su On per abilitare tutte le opzioni.

4. Fai clic per modificare le singole opzioni. In Visualizzazioni di pagina, fai clic su Mostra impostazioni avanzate. Assicurati di attivare sia Caricamenti pagina sia Cambi di pagina in base agli eventi della cronologia di navigazione del browser.

   

5. Salva le modifiche.

Verifica la configurazione della misurazione

Per verificare che l'applicazione a pagina singola misuri correttamente le visualizzazioni di pagina:

1. Attiva la modalità di debug per ogni tag nella configurazione della misurazione della SPA. Scopri come monitorare gli eventi in DebugView.

2. Fai clic sulla tua applicazione a pagina singola. Quando fai clic su una nuova schermata virtuale, dovresti vedere un nuovo evento page_view in DebugView. Confronta i parametri evento page_view con l'evento page_view precedente per verificare se il referrer e la posizione della pagina sono stati aggiornati correttamente.

Ulteriori considerazioni per le SPA

Oltre a inviare eventi page_view, tieni presente questi aspetti aggiuntivi per un'integrazione efficace delle SPA con Google Analytics e una migliore esperienza utente:

Gestisci la posizione di scorrimento

Quando gli utenti navigano tra le visualizzazioni in una SPA, il browser in genere mantiene la posizione di scorrimento corrente. Ciò può significare che gli utenti non vedono la parte superiore della nuova pagina virtuale e può influire sul monitoraggio della profondità di scorrimento.

Consiglio: reimposta in modo programmatico la posizione di scorrimento nella parte superiore della pagina o nel contenitore dei contenuti principali dopo ogni transizione di pagina virtuale.

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

Con questa modifica, gli utenti inizieranno dalla parte superiore dei nuovi contenuti, il che consente al monitoraggio dello scorrimento di Google Analytics di misurare con precisione il coinvolgimento sulla nuova pagina virtuale.

Garantisci l'accessibilità dei contenuti per le funzionalità del browser

Se gli utenti segnalano problemi con le funzionalità del browser, ad esempio la ricerca sulla pagina (Ctrl+F) che non funziona dopo il caricamento di una pagina virtuale, ciò potrebbe indicare il modo in cui la SPA aggiorna il DOM.

Suggerimento: assicurati che il framework SPA e la logica di routing aggiornino in modo completo e sincrono le parti pertinenti del DOM con i contenuti della nuova pagina. Il rendering ritardato o i contenuti nascosti nell'albero DOM principale potrebbero non essere immediatamente indicizzabili dalla funzione di ricerca del browser. Testa la ricerca on-page dopo le navigazioni virtuali per verificare l'accessibilità dei contenuti.

Impatto sugli eventi automatici

Se implementi correttamente la misurazione delle visualizzazioni di pagina virtuali nella tua SPA, Google Analytics gestirà gli altri eventi automatici in modo appropriato. Se le visualizzazioni di pagina virtuali non vengono registrate per le modifiche alla schermata, Google Analytics tratta l'SPA come una singola pagina, il che porta a metriche distorte.

Ad esempio, l'evento user_engagement misura il tempo che un utente trascorre attivamente su una pagina. Senza le visualizzazioni di pagina virtuali, tutta la durata del coinvolgimento viene attribuita al caricamento pagina iniziale, il che rende impossibile analizzare il tempo trascorso sulle singole schermate.

Quando la misurazione delle visualizzazioni di pagina virtuali è implementata correttamente:

• L'evento user_engagement viene inviato quando l'utente passa da una pagina virtuale all'altra.
• La durata del coinvolgimento per la pagina virtuale precedente viene calcolata e inviata insieme all'evento user_engagement, in genere appena prima dell'elaborazione dell'evento page_view per la nuova pagina virtuale.
• Altri eventi, come i clic o gli scorrimenti, sono associati al parametro page_location della pagina virtuale che l'utente sta visualizzando.

In questo modo puoi analizzare il coinvolgimento degli utenti e altre metriche per singole schermate o sezioni della tua SPA, ottenendo una comprensione più accurata del percorso dell'utente.