Condivido questa guida su come utilizzare Google Analytics con la proprietà Universal Analytics su ReactJS . Una piccola introduzione relativa a due prodotti di cui parleremo:

ReactJS è una libreria Javascript SPA (Single Page Application) per la creazione e la manutenzione di interfacce utente, il che significa che l'applicazione scriverà dinamicamente la pagina corrente in base ai nuovi dati dal server o dallo stato locale, invece del metodo predefinito del browser che carica intere nuove pagine come in applicazione multipagina.

Google Analytics (GA) è uno strumento di analisi di Google in cui puoi facilmente tenere traccia di importanti informazioni sugli utenti quando visitano il tuo sito web. A partire dal quarto trimestre del 2020, Google ha introdotto la nuova proprietà Google Analytics 4 (GA4) con funzionalità di monitoraggio più avanzate e dashboard migliore. Per questo articolo, stiamo esplorando in modo specifico la proprietà Universal Analytics (UA), che è una versione precedente di Google Analytics.

Preparazione

Innanzitutto, devi ottenere l'ID di tracciamento per il tuo sito web seguendo questi semplici passaggi.

1. Vai al sito web di Google Analytics e se sei il primo utente, ti verrà chiesto di configurare un account che includa le impostazioni di condivisione dei dati.
2. Crea una nuova proprietà: ricorda di selezionare l'opzione della proprietà Universal Analytics. Hai le opzioni per creare UA, GA4 o entrambe le proprietà.
3. Riempi le informazioni rimanenti per configurare il tuo account e le tue proprietà; e quindi otterrai l'ID di tracciamento (ad esempio UA-123456789–1).

Quando utilizzo la proprietà UA su Google Analytics e ReactJS, mi sento più a mio agio nell'usare la libreria React-GA . Al momento della stesura di questo articolo, ha più di 450.000 download settimanali su NPM. Puoi installarlo facilmente eseguendo questo codice sulla tua applicazione ReactJS.

# npm
npm i -s react-ga
# yarn
yarn add react-ga

Implementazione

Esistono due semplici implementazioni di GA che puoi utilizzare sul tuo sito web.

Monitoraggio delle visualizzazioni di pagina: puoi monitorare il percorso dell'utente quando visita il tuo sito Web per saperne di più su determinati obiettivi, semplicemente utilizzando questa riga di codice su componentDidMount di ogni pagina che desideri monitorare.

ReactGA.pageview(window.location.pathname);

Monitoraggio degli eventi: puoi tenere traccia di eventi importanti sul tuo sito Web in linea con gli obiettivi della tua campagna, ad esempio checkout riuscito, condivisione sui social, clic su determinati pulsanti, ecc.

Come fai a sapere di aver implementato correttamente Google Analytics sulla tua applicazione ReactJS?

Semplice ! Devi solo aprire la tua applicazione ReactJS o eseguirla localmente e aprire la scheda Panoramica del rapporto in tempo reale sul dashboard GA. Vedrai che hai un visitatore attivo corrente sul tuo sito web che sei TU!

…e voilà!

Questo è tutto ! Sei stato abilitato con successo a GA per tenere traccia delle visualizzazioni di pagina visitate dal tuo utente e degli eventi importanti che desideri monitorare sulla tua applicazione ReactJS.

Se sei interessato a saperne di più su Google Analytics, ti suggerisco di impararlo dalla seguente fonte:

Google Analytics Academy: Google Analytics per principianti

Google Analytics Academy: Google Analytics avanzato

Google Analytics Academy: Google Analytics per utenti esperti

Si spera che questo breve articolo sia in grado di rispondere ad alcune delle tue domande o di suscitare il tuo interesse nell'imparare a implementare l'analisi sul tuo sito web. Grazie per aver letto il mio articolo !