Misurare le applicazioni a pagina singola con Google Tag Manager

Questo tutorial mostra come configurare la misurazione di Google Analytics per un'applicazione a pagina singola (SPA) utilizzando Google Tag Manager. Scoprirai come configurare la proprietà Google Analytics, attivare le variabili GTM necessarie e creare tag che si attivano in caso di modifiche della cronologia.

Prima di iniziare

Questo tutorial presuppone che tu abbia:

• Un account e una proprietà Google Analytics.
• Un contenitore di Google Tag Manager installato sulla tua SPA.
• Il ruolo Editor (o superiore) sia per Google Analytics sia per Google Tag Manager.

Passaggio 1: prepara lo stream di dati GA4

Per monitorare manualmente gli eventi page_view in una SPA, devi prima disattivare le visualizzazioni di pagina automatiche basate sulla cronologia in GA4 per evitare di conteggiarle due volte.

1. Apri Google Analytics.
2. In Amministrazione, fai clic su Stream di dati in Raccolta e modifica dei dati.
3. Seleziona lo stream di dati web.
4. In Misurazione avanzata, fai clic sull'icona delle impostazioni .
5. In Visualizzazioni di pagina > Mostra impostazioni avanzate, deseleziona Modifiche della pagina in base agli eventi della cronologia del browser.
6. Fai clic su Salva.

Passaggio 2: attiva le variabili della cronologia integrate in Tag Manager

Per utilizzare trigger o variabili basati sulla cronologia in GTM, devi prima attivare le variabili della cronologia integrate.

1. Apri Google Tag Manager.
2. Nell'area di lavoro, vai a Variabili.
3. In Variabili integrate, fai clic su Configura.
4. Nella sezione Cronologia, attiva le seguenti variabili:
   • History New URL Fragment
   • History Old URL Fragment
   • History New State
   • History Old State
   • History Source
5. Chiudi il riquadro di configurazione.

Nota: queste variabili non sono strettamente necessarie per la configurazione di base della visualizzazione di pagina. Vengono utilizzate solo se vuoi filtrare il trigger o implementare una logica personalizzata, ad esempio la logica della pagina precedente menzionata nella nota finale di questa pagina.

Nota: alcune documentazioni meno recenti potrebbero fare riferimento a Old History URL o New History URL. Queste non sono variabili integrate standard. Utilizza invece le variabili elencate.

Passaggio 3: crea il trigger Modifica cronologia

Poi, crea un trigger che si attivi ogni volta che si verifica un evento di modifica della cronologia (ad esempio pushState o replaceState) nella tua SPA.

1. Nel workspace di Tag Manager, vai al menu Trigger.
2. Fai clic su Nuovo.
3. In Configurazione trigger, scegli il trigger Modifica cronologia.
4. (Facoltativo) Se vuoi monitorare solo determinate modifiche dello schermo, aggiorna il trigger in modo che si attivi in caso di alcune modifiche della cronologia.
5. Assegna un nome al trigger (ad es. "Modifica cronologia") e fai clic su Salva.

Passaggio 4: crea il tag Google

Ora, crea un tag Google che aggiorni il parametro page_location ogni volta che si verifica una modifica della cronologia.

1. Nel menu Tag, fai clic su Nuovo.
2. In Configurazione tag, scegli il tag Google.
3. Inserisci l'ID tag (lo stesso ID utilizzato per il tag Google iniziale).

4. In Impostazioni di configurazione, aggiungi i seguenti parametri:

   • page_location: {{Page URL}}
   • page_title: {{Page Title}}
   • update: true
   Nota: Il parametro update unisce i valori di configurazione alla configurazione del tag esistente e sopprime un evento page_view duplicato immediato. page_referrer non è incluso qui perché Google Analytics monitora automaticamente il referrer esterno originale al caricamento iniziale della pagina e, se lo ometti, Google Analytics può popolare automaticamente l'URL della pagina virtuale precedente come referrer per il percorso di navigazione nei report.

5. Assegna un nome al tag (ad es. "Tag Google - Aggiornamento SPA") e fai clic su Salva.

   Nota: non aggiungere un trigger nella sezione Attivazione per questo tag Google tag. Viene attivato come tag di configurazione utilizzando la sequenza tag nel passaggio 5.

Passaggio 5: invia l'evento page_view virtuale

Infine, crea un tag evento GA4 per inviare l'evento page_view effettivo per ogni caricamento di pagina virtuale.

1. Fai clic su Nuovo nel menu Tag.
2. In Configurazione tag, scegli Google Analytics: evento GA4.
3. Inserisci l'ID misurazione.
4. Imposta Nome evento su page_view.
5. In Impostazioni avanzate > Sequenza tag, seleziona Attiva un tag prima dell'evento GA4 - Visualizzazione di pagina virtuale e seleziona il tag Tag Google - Aggiornamento SPA che hai creato nel passaggio 4.
6. In Attivazione, seleziona il trigger Modifica cronologia che hai creato nel passaggio 3.
7. Assegna un nome al tag (ad es. "Evento GA4 - Visualizzazione di pagina virtuale") e fai clic su Salva.

Passaggio 6: verifica la configurazione

Per assicurarti che le visualizzazioni di pagina virtuali vengano registrate correttamente:

1. In Tag Manager, fai clic su Anteprima per accedere alla modalità Anteprima .
2. Naviga nella tua SPA.
3. In Google Analytics DebugView, verifica che venga visualizzato un nuovo page_view evento per ogni modifica dello schermo.
4. Verifica che i valori di page_location corrispondano alle tue aspettative.

Nota: l'utilizzo di {{Referrer}} standard acquisisce la sorgente iniziale che ha portato l'utente al tuo sito. Per monitorare la pagina virtuale precedente all'interno della tua SPA come referrer, dovrai implementare una variabile GTM personalizzata per memorizzare la posizione della pagina precedente.