Dataanalyse er et must hvis du vil holde styr på antall besøkende nettstedet ditt får. Det er forskjellige måter du kan legge til analyser i prosjektet ditt, inkludert Google Analytics. Det er en gratis tjeneste og er relativt enkel å sette opp.
Lær hvordan du legger til Google Analytics på nettstedet ditt ved å bruke Next.js, et React-rammeverk for å bygge SEO-vennlige nettsteder.
Sette opp Google Analytics
Google Analytics gir innsikt inn i oppførselen til folk som besøker nettstedet ditt. Den forteller deg hvilke sider som får antall visninger og gir deg publikumsdata som plassering, alder, interesse og enheten de bruker. Disse dataene kan hjelpe deg med å ta beslutninger om retningen bedriften din bør ta for å lykkes.
For å komme i gang, besøk analytisk dashbord og opprett en ny konto ved å følge disse trinnene:
- Klikk på Opprett konto knappen i admin-fanen for å opprette en ny konto.
- Legg til et kontonavn under Kontooppsett-delen.
- Opprett analyseegenskapen ved å oppgi et navn.
- Legg til bedriftsdetaljene. Velg alternativene som gjelder for nettstedet ditt.
- Klikk på Skape for å fullføre konfigureringen av eiendommen.
- Klikk på nettstrøm for å spesifisere datastrømmen Google Analytics skal spore.
- Angi URL-en til nettstedet ditt og gi datastrømmen et navn.
- Klikk på tagging-instruksjoner og få skriptet du skal bruke på nettstedet ditt.
- Kopier målings-ID-en (sporingskoden) for å bruke senere.
Når du har fått sporingskoden, kan du sette opp Next.js-prosjektet.
Sette opp Next.js-prosjektet
Hvis du ikke allerede har satt opp et Next.js-prosjekt, se Next.js offisielle guide for å komme i gang.
Da du opprettet den globale nettstedstaggen, fikk du et skript som dette:
<!-- Google-tag (gtag.js) -->
<script asynkron src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<manus>
vindu.dataLayer = vindu.dataLayer || [];
funksjongtag(){dataLayer.push(argumenter);}
gtag('js', nyDato());
gtag('konfig', 'G-NHVWK8L97D');
</script>
Du må legge til dette skriptet i head-taggen på nettstedet ditt. I Next.js bruker du Script-komponenten fra next/script. Denne komponenten er en utvidelse av HTML-skriptkoden. Den lar deg inkludere tredjepartsskript på Next.js-nettstedet ditt og angi deres lastestrategi, noe som forbedrer ytelsen.
De Next.js-skript komponent tilbyr forskjellige lastestrategier. Den "etterinteraktive" strategien er egnet for et analyseskript. Dette betyr at den vil lastes etter at siden er interaktiv.
import Manus fra "neste/manus"
<Skript src="" strategi="etterInteractive" />
Åpne pages/_app.js fil og importer Script-komponenten øverst.
import Manus fra 'neste/skript'
Deretter endrer du retursetningen til app-komponenten slik at den inkluderer skript-taggen fra Google analytics.
import '../styles/globals.css'
import Oppsett fra '../components/Layout/Layout'
import Manus fra 'neste/skript'funksjonMin App({ Component, pageProps }) {
komme tilbake (
<>
<Skriptstrategi="etterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Manus
id='Google Analytics'
strategi="etterInteractive"
dangerouslySetInnerHTML={{
__html: `
vindu.dataLayer = vindu.dataLayer || [];
funksjongtag(){dataLayer.push(argumenter);}
gtag('js', nyDato());
gtag('konfig', 'G-XXXXXXX', {
side_bane: vindu.plassering.banenavn,
});
`,
}}
/>
<Oppsett>
<Komponent {...pageProps} />
</Layout>
</>
)
}
eksportmisligholde Min App
Merk at denne taggen er litt forskjellig fra den Google Analytics tilbyr. Den bruker dangerouslySetInnerHTML og inkluderer en lastestrategi. De fungerer imidlertid på samme måte.
Husk å erstatte G-XXXXXXX med sporingskoden din. Det er også tilrådelig å lagre sporingskoden i en .env-fil for å holde den hemmelig.
Legge til Google Analytics i en enkeltsideapplikasjon
Du kan bruke script-taggen ovenfor for et vanlig nettsted og la det være. For en enkeltsideapplikasjon som et Next.js-nettsted må du imidlertid ta noen ekstra trinn.
EN enkeltsides applikasjon (SPA) er et nettsted som laster alt innhold på forhånd, som svar på en første forespørsel. Nettleseren laster innhold dynamisk når en bruker klikker på lenker for å navigere på nettstedet. Det gjør ikke en sideforespørsel, bare URL-en endres.
Dette er annerledes for Next.js-sider som bruker getServerSideProps ettersom nettleseren gjengir dem på forespørsel.
Google-taggen fungerer ved å registrere en sidevisning når en ny side lastes inn. Så for SPA-er kjøres Google-taggen bare én gang, når siden først lastes inn. Derfor må du manuelt registrere visningene når brukeren navigerer til forskjellige sider.
Se målingen på én side Google Analytics-veiledning å lære mer.
For å registrere sidevisninger manuelt i Next.js ved hjelp av gtag-skriptet, opprette en ny mappe kaltlib og legg til en ny fil, gtag.js.
eksportkonst GA_MEASUREMENT_ID = prosess.env. GA_MEASUREMENT_ID;eksportkonst sidevisning = () => {
window.gtag("konfig", GA_MEASUREMENT_ID, {
page_path: url,
});
};
eksportkonst hendelse = ({ handling, kategori, etikett, verdi }) => {
window.gtag("begivenhet", handling, {
event_category: kategori,
event_label: label,
verdi,
});
};
Deretter endrer du /pages/_app.js for å bruke disse funksjonene og spore sidevisninger i useEffect-kroken.
import '../styles/globals.css'
import Oppsett fra '../components/Layout/Layout'
import Manus fra 'neste/skript'
import { useRouter } fra 'neste/ruter';
import { useEffect } fra "reagere";
import * som gtag fra "../lib/gtag"funksjonMin App({ Component, pageProps }: AppProps) {
konst ruter = brukRouter();useEffect(() => {
konst handleRouteChange = (url) => {
gtag.sidevisning(url);
};router.events.on("ruteEndre Fullført", handleRouteChange);
komme tilbake () => {
router.events.off("ruteEndre Fullført", handleRouteChange);
};
}, [router.events]);
komme tilbake (
<>
<Skriptstrategi="etterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Manus
id='Google Analytics'
strategi="etterInteractive"
dangerouslySetInnerHTML={{
__html: `
vindu.dataLayer = vindu.dataLayer || [];
funksjongtag(){dataLayer.push(argumenter);}
gtag('js', nyDato());
gtag('konfig', 'G-XXXXXX', {
side_bane: vindu.plassering.banenavn,
});
`,
}}
/>
<Oppsett>
<Komponent {...pageProps} />
</Layout>
</>
)
}
eksportmisligholde Min App
Dette eksemplet bruker useRouter og useEffect-krokene til å registrere en sidevisning hver gang brukeren navigerer til en annen side.
Kall opp useRouter-metoden fra next/router og tilordne den til rutervariabelen. I useEffect-kroken, lytt til routeChangeComplete-hendelsen på ruteren. Når hendelsen utløses, ta opp en sidevisning ved å kalle handleRouteChange-funksjonen.
UseEffect-krokens returerklæring avslutter abonnementet på routeChangeComplete-hendelsen med 'av'-metoden.
Bruk Google Analytics til å samle inn brukerdata
Data er enormt fordelaktig for å ta gode beslutninger, og å legge til Google Analytics på nettstedet ditt er en måte å samle inn dem på.
Du kan legge til Google Analytics i et Next.js-prosjekt ved å bruke kroker for å sikre at du registrerer alle sidevisningene selv når en side bruker ruting på klientsiden. Nå kan du se hvor mange visninger nettstedet ditt får på Google Analytics-dashbordet.
