Analiza datelor este o necesitate dacă doriți să urmăriți numărul de vizitatori pe care site-ul dvs. îl primește. Există diferite moduri în care puteți adăuga analize la proiectul dvs., inclusiv Google Analytics. Este un serviciu gratuit și este relativ simplu de configurat.
Aflați cum să adăugați Google Analytics pe site-ul dvs. folosind Next.js, un cadru React pentru construirea de site-uri web prietenoase cu SEO.
Configurarea Google Analytics
Google Analytics oferă informații în comportamentul persoanelor care vă vizitează site-ul web. Vă spune ce pagini au numărul de vizionări și vă oferă date despre public, cum ar fi locația, vârsta, interesul și dispozitivul pe care îl folosesc. Aceste date vă pot ajuta să luați decizii cu privire la direcția pe care ar trebui să o ia afacerea dvs. pentru a avea succes.
Pentru a începe, vizitați tabloul de bord analitic și creați un cont nou urmând acești pași:
- Apasă pe Creează cont butonul din fila admin pentru a crea un cont nou.
- Adăugați un nume de cont în secțiunea Configurare cont.
- Creați proprietatea de analiză furnizând un nume.
- Adăugați detaliile companiei. Selectați opțiunile care se aplică site-ului dvs.
- Apasă pe Crea butonul pentru a finaliza configurarea proprietății.
- Faceți clic pe fluxul web pentru a specifica fluxul de date pe care trebuie să îl urmărească Google Analytics.
- Specificați adresa URL a site-ului dvs. și dați un nume fluxului de date.
- Faceți clic pe instrucțiunile de etichetare și obțineți scriptul pe care îl veți folosi pe site-ul dvs. web.
- Copiați ID-ul de măsurare (codul de urmărire) pentru a-l utiliza mai târziu.
După ce obțineți codul de urmărire, puteți configura proiectul Next.js.
Configurarea proiectului Next.js
Dacă nu aveți deja un proiect Next.js configurat, consultați Ghid oficial Next.js pentru a incepe.
Când ați creat proprietatea etichetă globală de site, aveți un script ca acesta:
<!-- Etichetă Google (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<scenariu>
fereastră.dataLayer = fereastră.dataLayer || [];
funcţiegtag(){dataLayer.push(argumente);}
gtag('js', nouData());
gtag('config', 'G-NHVWK8L97D');
</script>
Trebuie să adăugați acest script la eticheta head a site-ului dvs. web. În Next.js, utilizați componenta Script din next/script. Această componentă este o extensie a etichetei de script HTML. Vă permite să includeți scripturi terță parte pe site-ul dvs. Next.js și să setați strategia de încărcare a acestora, îmbunătățind performanța.
The Next.js Script componenta oferă diferite strategii de încărcare. Strategia „afterinteractive” este potrivită pentru un script de analiză. Aceasta înseamnă că se va încărca după ce pagina este interactivă.
import Scenariul din „următorul/scriptul”
<Script src="" strategie="afterInteractive" />
Deschide pages/_app.js fișier și importați componenta Script din partea de sus.
import Scenariul din „următorul/scriptul”
Apoi, modificați declarația de returnare a componentei App pentru a include eticheta de script din Google Analytics.
import '../styles/globals.css'
import Aspect din „../components/Layout/Layout”
import Scenariul din „următorul/scriptul”funcţieMyApp({ Componentă, pageProps }) {
întoarcere (
<>
<Strategia de script="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Scenariul
id='google-analytics'
strategie="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
fereastră.dataLayer = fereastră.dataLayer || [];
funcţiegtag(){dataLayer.push(argumente);}
gtag('js', nouData());
gtag('config', 'G-XXXXXXX', {
calea_paginii: fereastră.Locație.nume cale,
});
`,
}}
/>
<Aspect>
<Componenta {...pageProps} />
</Layout>
</>
)
}
exportMod implicit MyApp
Rețineți că această etichetă este ușor diferită de cea oferită de Google Analytics. Utilizează dangerouslySetInnerHTML și include o strategie de încărcare. Ele, însă, funcționează la fel.
Nu uitați să înlocuiți G-XXXXXXX cu codul de urmărire. De asemenea, este recomandabil să stocați codul de urmărire într-un fișier .env pentru a-l păstra secret.
Adăugarea Google Analytics la o aplicație cu o singură pagină
Puteți folosi eticheta de script de mai sus pentru un site web obișnuit și lăsați-o așa. Cu toate acestea, pentru o aplicație cu o singură pagină, cum ar fi un site web Next.js, trebuie să faceți câțiva pași suplimentari.
A aplicație pe o singură pagină (SPA) este un site web care încarcă tot conținutul în avans, ca răspuns la o solicitare inițială. Browserul încarcă conținut în mod dinamic pe măsură ce un utilizator face clic pe linkuri pentru a naviga pe site. Nu face o cerere de pagină, doar URL-ul se modifică.
Acest lucru este diferit pentru paginile Next.js care folosesc getServerSideProps, deoarece browserul le redă la cerere.
Eticheta Google funcționează prin înregistrarea unei vizualizări de pagină atunci când se încarcă o pagină nouă. Deci, pentru SPA, eticheta Google este executată o singură dată, când pagina se încarcă inițial. Prin urmare, trebuie să înregistrați manual vizualizările pe măsură ce utilizatorul navighează la diferite pagini.
Vedeți măsurarea pe o singură pagină Ghid Google Analytics pentru a afla mai multe.
Pentru a înregistra manual vizualizările de pagină în Next.js folosind scriptul gtag, creați un dosar nou numitlib și adăugați un fișier nou, gtag.js.
exportconst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;exportconst vizualizare de pagină = () => {
window.gtag("config", GA_MEASUREMENT_ID, {
page_path: url,
});
};
exportconst eveniment = ({ acțiune, categorie, etichetă, valoare }) => {
window.gtag("eveniment", acțiune, {
event_category: categorie,
event_label: etichetă,
valoare,
});
};
Apoi, modificați /pages/_app.js pentru a utiliza aceste funcții și a urmări vizualizările paginii în cârligul useEffect.
import '../styles/globals.css'
import Aspect din „../components/Layout/Layout”
import Scenariul din „următorul/scriptul”
import { useRouter } din 'următorul/router';
import { useEffect } din "reacţiona";
import * la fel de gtag din „../lib/gtag”funcţieMyApp({ Component, pageProps }: AppProps) {
const router = useRouter();useEffect(() => {
const handleRouteChange = (url) => {
gtag.vizualizare pagina(url);
};router.events.on("routeChangeComplete", handleRouteChange);
întoarcere () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
întoarcere (
<>
<Strategia de script="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Scenariul
id='google-analytics'
strategie="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
fereastră.dataLayer = fereastră.dataLayer || [];
funcţiegtag(){dataLayer.push(argumente);}
gtag('js', nouData());
gtag('config', 'G-XXXXXX', {
calea_paginii: fereastră.Locație.nume cale,
});
`,
}}
/>
<Aspect>
<Componenta {...pageProps} />
</Layout>
</>
)
}
exportMod implicit MyApp
Acest exemplu folosește cârligele useRouter și useEffect pentru a înregistra o vizualizare de pagină de fiecare dată când utilizatorul navighează la o altă pagină.
Apelați metoda useRouter de la next/router și atribuiți-o variabilei router. În cârligul useEffect, ascultați evenimentul routeChangeComplete de pe router. Când se declanșează evenimentul, înregistrați o vizualizare de pagină apelând funcția handleRouteChange.
Declarația de returnare a cârligului useEffect se dezabonează de la evenimentul routeChangeComplete cu metoda „off”.
Utilizați Google Analytics pentru a colecta date despre utilizatori
Datele sunt extrem de benefice pentru a lua decizii bune, iar adăugarea Google Analytics pe site-ul dvs. este o modalitate de a le colecta.
Puteți adăuga Google Analytics la un proiect Next.js folosind cârlige pentru a vă asigura că înregistrați toate vizualizările de pagină, chiar și atunci când o pagină folosește rutarea la nivelul clientului. Acum puteți vedea câte vizualizări are site-ul dvs. pe tabloul de bord Google Analytics.
