L'analisi dei dati è un must se vuoi tenere traccia del numero di visitatori che sta ricevendo il tuo sito web. Esistono diversi modi per aggiungere analisi al tuo progetto, incluso Google Analytics. È un servizio gratuito ed è relativamente semplice da configurare.
Scopri come aggiungere Google Analytics al tuo sito utilizzando Next.js, un framework React per la creazione di siti Web SEO-friendly.
Impostazione di Google Analytics
Google Analytics fornisce approfondimenti nel comportamento delle persone che visitano il tuo sito web. Ti dice quali pagine ottengono il numero di visualizzazioni e ti fornisce dati sul pubblico come posizione, età, interesse e dispositivo che utilizzano. Questi dati possono aiutarti a prendere decisioni sulla direzione che la tua azienda dovrebbe prendere per avere successo.
Per iniziare, visita il dashboard di analisi e crea un nuovo account seguendo questi passaggi:
- Clicca il Creare un account pulsante nella scheda di amministrazione per creare un nuovo account.
- Aggiungi un nome account nella sezione Configurazione account.
- Crea la proprietà analytics fornendo un nome.
- Aggiungi i dettagli dell'attività. Seleziona le opzioni che si applicano al tuo sito web.
- Clicca il Creare pulsante per terminare la configurazione della proprietà.
- Fai clic sul flusso web per specificare il flusso di dati che Google Analytics dovrebbe tracciare.
- Specifica l'URL del tuo sito web e assegna un nome al flusso di dati.
- Fai clic sulle istruzioni di codifica e ottieni lo script che utilizzerai sul tuo sito web.
- Copia l'ID misurazione (il codice di monitoraggio) da utilizzare in seguito.
Una volta ottenuto il codice di monitoraggio, puoi configurare il progetto Next.js.
Impostazione del progetto Next.js
Se non hai già configurato un progetto Next.js, consulta il file Next.js guida ufficiale per iniziare.
Quando hai creato la proprietà Global site tag, hai ottenuto uno script come questo:
<!-- Tag di Google (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<copione>
finestra.dataLayer = finestra.dataLayer || [];
funzionetag(){dataLayer.push(argomenti);}
gtag('js', nuovoData());
gtag('config', 'G-NHVWK8L97D');
</script>
Devi aggiungere questo script al tag head del tuo sito web. In Next.js, utilizzi il componente Script di next/script. Questo componente è un'estensione del tag script HTML. Ti consente di includere script di terze parti nel tuo sito Web Next.js e impostare la loro strategia di caricamento, migliorando le prestazioni.
IL Script Next.js componente offre diverse strategie di caricamento. La strategia "afterinteractive" è adatta per uno script di analisi. Ciò significa che verrà caricato dopo che la pagina è interattiva.
importare Sceneggiatura da "successivo/copione"
<Script src="" strategia="dopoInterattivo" />
Apri il pagine/_app.js file e importare il componente Script in alto.
importare Sceneggiatura da 'successivo/copione'
Successivamente, modifica l'istruzione return del componente App per includere il tag script di Google Analytics.
importare '../styles/globals.css'
importare Disposizione da '../componenti/Layout/Layout'
importare Sceneggiatura da 'successivo/copione'funzioneMiaApp({Componente, pageProps}) {
ritorno (
<>
<Strategia di script="dopoInterattivo" sorgente="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Sceneggiatura
id='statistiche di Google'
strategia="dopoInterattivo"
pericolosamenteSetInnerHTML={{
__html: `
finestra.dataLayer = finestra.dataLayer || [];
funzionetag(){dataLayer.push(argomenti);}
gtag('js', nuovoData());
gtag('config', 'G-XXXXXXX', {
percorso_pagina: finestra.posizione.percorso,
});
`,
}}
/>
<Disposizione>
<Componente {...pageProps} />
</Layout>
</>
)
}
esportarepredefinito MiaApp
Tieni presente che questo tag è leggermente diverso da quello fornito da Google Analytics. Utilizza pericolosamenteSetInnerHTML e include una strategia di caricamento. Tuttavia, funzionano allo stesso modo.
Ricordati di sostituire G-XXXXXXX con il tuo codice di monitoraggio. Si consiglia inoltre di memorizzare il codice di tracciamento in un file .env per mantenerlo segreto.
Aggiunta di Google Analytics a un'applicazione a pagina singola
Puoi utilizzare il tag script sopra per un normale sito Web e lasciarlo lì. Tuttavia, per un'applicazione a pagina singola come un sito Web Next.js, è necessario eseguire alcuni passaggi aggiuntivi.
UN applicazione a pagina singola (SPA) è un sito Web che carica tutti i contenuti in anticipo, in risposta a una richiesta iniziale. Il browser carica il contenuto in modo dinamico mentre un utente fa clic sui collegamenti per navigare nel sito. Non effettua una richiesta di pagina, cambia solo l'URL.
Questo è diverso per le pagine Next.js che utilizzano getServerSideProps poiché il browser esegue il rendering su richiesta.
Il tag Google funziona registrando una visualizzazione di pagina quando viene caricata una nuova pagina. Quindi, per le SPA, il tag Google viene eseguito solo una volta, quando la pagina viene caricata inizialmente. Pertanto, è necessario registrare manualmente le visualizzazioni man mano che l'utente passa a pagine diverse.
Vedi la misura di una singola pagina Guida di Google Analytics per saperne di più.
Per registrare manualmente le visualizzazioni di pagina in Next.js utilizzando lo script gtag, crea una nuova cartella chiamatalib e aggiungi un nuovo file, gtag.js.
esportarecost GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;esportarecost visualizzazione di pagina = () => {
finestra.gtag("config", GA_MEASUREMENT_ID, {
percorso_pagina: URL,
});
};
esportarecost evento = ({ azione, categoria, etichetta, valore }) => {
finestra.gtag("evento", azione, {
event_category: categoria,
etichetta_evento: etichetta,
valore,
});
};
Successivamente, modifica /pages/_app.js per utilizzare queste funzioni e tenere traccia delle visualizzazioni di pagina nell'hook useEffect.
importare '../styles/globals.css'
importare Disposizione da '../componenti/Layout/Layout'
importare Sceneggiatura da 'successivo/copione'
importare {usaRouter} da 'prossimo/router';
importare {usaEffetto} da "reagire";
importare * COME tag da "../lib/gtag"funzioneMiaApp({ Component, pageProps }: AppProps) {
cost router = usaRouter();usaEffetto(() => {
cost handleRouteChange = (url) => {
tag.visualizzazione della pagina(URL);
};router.eventi.on("routeChangeComplete", handleRouteChange);
ritorno () => {
router.eventi.off("routeChangeComplete", handleRouteChange);
};
}, [router.eventi]);
ritorno (
<>
<Strategia di script="dopoInterattivo" sorgente="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Sceneggiatura
id='statistiche di Google'
strategia="dopoInterattivo"
pericolosamenteSetInnerHTML={{
__html: `
finestra.dataLayer = finestra.dataLayer || [];
funzionetag(){dataLayer.push(argomenti);}
gtag('js', nuovoData());
gtag('config', 'G-XXXXXX', {
percorso_pagina: finestra.posizione.percorso,
});
`,
}}
/>
<Disposizione>
<Componente {...pageProps} />
</Layout>
</>
)
}
esportarepredefinito MiaApp
Questo esempio utilizza gli hook useRouter e useEffect per registrare una visualizzazione di pagina ogni volta che l'utente passa a un'altra pagina.
Chiama il metodo useRouter da next/router e assegnalo alla variabile router. Nell'hook useEffect, ascolta l'evento routeChangeComplete sul router. Quando l'evento si attiva, registra una visualizzazione di pagina chiamando la funzione handleRouteChange.
L'istruzione return dell'hook useEffect cancella la sottoscrizione dall'evento routeChangeComplete con il metodo 'off'.
Utilizza Google Analytics per raccogliere i dati degli utenti
I dati sono estremamente utili per prendere buone decisioni e l'aggiunta di Google Analytics al tuo sito web è un modo per raccoglierli.
Puoi aggiungere Google Analytics a un progetto Next.js utilizzando gli hook per assicurarti di registrare tutte le visualizzazioni di pagina anche quando una pagina utilizza il routing lato client. Ora puoi vedere quante visualizzazioni ottiene il tuo sito sulla dashboard di Google Analytics.
