Come integrare Google Analytics 4 sulle pagine Amp

Che cos’è Google Analytics 4?

Aggiornamento del 21 aprile 2023

Sembra che il metodo descritto sotto non funziona come ci si aspetta. Cercando di trovare comunque una soluzione ho studiato un plugin per WordPress che funziona correttamente nel tracciamento e ho visto che aggiunge il seguente codice all’interno della pagina amp: quindi dovrebbe bastare fare la stessa cosa per ottenere lo stesso effetto.

<!-- Includi il codice di inizializzazione di GA4 nell'head della pagina -->
	<meta name="amp-google-client-id-api" content="googleanalytics">

<!-- Includi l'elemento di tracking GA4 nell'amp-analytics -->
		<amp-analytics type="googleanalytics" config="https://amp.analytics-debugger.com/ga4.json" data-credentials="include">
		<script	type="application/json">
			{"vars":{
				"GA4_MEASUREMENT_ID":"GA-MEASUREMENT_ID",
				"GA4_ENDPOINT_HOSTNAME":"www.google-analytics.com",
                "DEFAULT_PAGEVIEW_ENABLED": true,    
                "GOOGLE_CONSENT_ENABLED": false,
                "WEBVITALS_TRACKING": false,
                "PERFORMANCE_TIMING_TRACKING": false,
                "SEND_DOUBLECLICK_BEACON": false
				}
			}  
		</script>

Google Analytics 4 (GA4) è la nuova versione di Google Analytics, lanciata nel 2020. GA4 è una piattaforma di analisi dei dati avanzata e unificata che sostituisce l’analisi di Google Analytics Universal. Rispetto alla versione precedente, GA4 fornisce una maggiore flessibilità nella raccolta dei dati, una maggiore integrazione con le app e una maggiore analisi predittiva. Tra le principali caratteristiche di GA4 ci sono la raccolta automatica dei dati, la possibilità di creare eventi personalizzati, la possibilità di utilizzare modelli di analisi predittiva e la possibilità di integrare i dati delle app con i dati del sito web. Inoltre, GA4 offre un’interfaccia utente più intuitiva e facile da usare rispetto alla versione precedente.

[ndr] A me non sembra che l’interfaccia sia così intuitiva: i report della versione precedente mi sembravano molto più immediati, ma magari è perché mi ci ero abituato negli anni.

Mentre il codice da utilizzare per monitorare il sito web e raccogliere i dati statistici delle visite viene fornito direttamente dal processo di configurazione, per le pagine amp si viene lasciati a se stessi.

Alla fine la soluzione è piuttosto semplice e immediata: se avete già installato il procedete Google Analytics Universal, basta sostituire il nuovo id alla variabile account. Il codice completo è qui di seguito.

<!-- Includi il codice di inizializzazione di GA4 nell'head della pagina -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

<!-- Includi l'elemento di tracking GA4 nell'amp-analytics -->
<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "GA-MEASUREMENT_ID"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

Assicurati di sostituire “GA-MEASUREMENT_ID” con il tuo ID di misurazione di Google Analytics 4.

Inoltre, è importante notare che questo esempio utilizza l’opzione “on = visible” per il trigger delle visualizzazioni della pagina, il che significa che l’evento di visualizzazione della pagina verrà inviato solo quando la pagina diventa visibile per l’utente. Puoi personalizzare questo trigger in base alle tue esigenze specifiche.