Dataanalyse er et must, hvis du vil holde styr på antallet af besøgende, dit websted får. Der er forskellige måder, du kan tilføje analyser til dit projekt, herunder Google Analytics. Det er en gratis tjeneste og er forholdsvis enkel at konfigurere.
Lær, hvordan du tilføjer Google Analytics til dit websted ved hjælp af Next.js, en React-ramme til at bygge SEO-venlige websteder.
Opsætning af Google Analytics
Google Analytics giver indsigt ind i adfærden hos folk, der besøger din hjemmeside. Det fortæller dig, hvilke sider der får antallet af visninger og giver dig publikumsdata som placering, alder, interesse og den enhed, de bruger. Disse data kan hjælpe med at træffe beslutninger om, hvilken retning din virksomhed skal tage for at få succes.
For at komme i gang skal du besøge analytics dashboard og opret en ny konto ved at følge disse trin:
- Klik på Opret konto knappen på admin-fanen for at oprette en ny konto.
- Tilføj et kontonavn under afsnittet Kontoopsætning.
- Opret analyseegenskaben ved at angive et navn.
- Tilføj virksomhedsoplysningerne. Vælg de muligheder, der gælder for dit websted.
- Klik på skab knappen for at afslutte opsætningen af ejendommen.
- Klik på webstream for at angive den datastrøm Google Analytics skal spore.
- Angiv URL'en til dit websted, og giv datastrømmen et navn.
- Klik på tagging instruktioner og få det script, du vil bruge på din hjemmeside.
- Kopiér måle-id'et (sporingskoden) for at bruge senere.
Når du har fået sporingskoden, kan du konfigurere Next.js-projektet.
Opsætning af Next.js-projektet
Hvis du ikke allerede har et Next.js-projekt opsat, kan du se Next.js officielle guide at komme i gang.
Da du oprettede egenskaben Global site tag, fik du et script som dette:
<!-- Google-tag (gtag.js) -->
<script asynkron src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<manuskript>
vindue.dataLayer = vindue.dataLayer || [];
fungeregtag(){dataLayer.push(argumenter);}
gtag('js', nyDato());
gtag('config', 'G-NHVWK8L97D');
</script>
Du skal tilføje dette script til head-tagget på dit websted. I Next.js bruger du Script-komponenten fra next/script. Denne komponent er en udvidelse af HTML-script-tagget. Det giver dig mulighed for at inkludere tredjepartsscripts til dit Next.js-websted og indstille deres indlæsningsstrategi, hvilket forbedrer ydeevnen.
Det Next.js script komponent tilbyder forskellige indlæsningsstrategier. Den "efterinteraktive" strategi er velegnet til et analysescript. Det betyder, at den indlæses, når siden er interaktiv.
importere Manuskript fra "næste/script"
<Script src="" strategi="efterInteraktiv" />
Åbn sider/_app.js fil og importer Script-komponenten øverst.
importere Manuskript fra 'næste/script'
Rediger derefter returerklæringen for app-komponenten, så den inkluderer script-tagget fra Google analytics.
importere '../styles/globals.css'
importere Layout fra '../components/Layout/Layout'
importere Manuskript fra 'næste/script'fungereMin App({ Komponent, pageProps }) {
Vend tilbage (
<>
<Script strategi="efterInteraktiv" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Manuskript
id='google-analytics'
strategi="efterInteraktiv"
dangerouslySetInnerHTML={{
__html: `
vindue.dataLayer = vindue.dataLayer || [];
fungeregtag(){dataLayer.push(argumenter);}
gtag('js', nyDato());
gtag('config', 'G-XXXXXXX', {
side_sti: vindue.Beliggenhed.stinavn,
});
`,
}}
/>
<Layout>
<Komponent {...pageProps} />
</Layout>
</>
)
}
eksportStandard Min App
Bemærk, at dette tag er lidt anderledes end det, Google Analytics tilbyder. Det bruger dangerouslySetInnerHTML og inkluderer en indlæsningsstrategi. De fungerer dog på samme måde.
Husk at erstatte G-XXXXXXX med din sporingskode. Det er også tilrådeligt at gemme sporingskoden i en .env-fil for at holde den hemmelig.
Tilføjelse af Google Analytics til en enkeltsideapplikation
Du kan bruge script-tagget ovenfor til et almindeligt websted og lade det være. For en enkelt-sides applikation som et Next.js-websted skal du dog tage et par ekstra trin.
EN enkeltsides ansøgning (SPA) er et websted, der indlæser alt indhold på forhånd, som svar på en indledende anmodning. Browseren indlæser indhold dynamisk, når en bruger klikker på links for at navigere på webstedet. Den laver ikke en sideanmodning, kun URL'en ændres.
Dette er anderledes for Next.js-sider, der bruger getServerSideProps, da browseren gengiver dem efter anmodning.
Google-tagget fungerer ved at registrere en sidevisning, når en ny side indlæses. Så for SPA'er udføres Google-tagget kun én gang, når siden først indlæses. Derfor skal du manuelt registrere visningerne, når brugeren navigerer til forskellige sider.
Se enkeltsidesmålingen Google Analytics guide at lære mere.
For manuelt at optage sidevisninger i Next.js ved hjælp af gtag-scriptet skal du oprette en ny mappe kaldetlib og tilføje en ny fil, gtag.js.
eksportkonst GA_MEASUREMENT_ID = proces.env. GA_MEASUREMENT_ID;eksportkonst sidevisning = () => {
window.gtag("config", GA_MEASUREMENT_ID, {
sidesti: url,
});
};
eksportkonst hændelse = ({ handling, kategori, etiket, værdi }) => {
window.gtag("begivenhed", handling, {
begivenhedskategori: kategori,
event_label: label,
værdi,
});
};
Derefter skal du ændre /pages/_app.js for at bruge disse funktioner og spore sidevisninger i useEffect-hook.
importere '../styles/globals.css'
importere Layout fra '../components/Layout/Layout'
importere Manuskript fra 'næste/script'
importere { brug Router } fra 'næste/router';
importere { useEffect } fra "reagere";
importere * som gtag fra "../lib/gtag"fungereMin App({ Component, pageProps }: AppProps) {
konst router = brugRouter();useEffect(() => {
konst handleRouteChange = (url) => {
gtag.sidevisning(url);
};router.events.on("ruteÆndring fuldført", handleRouteChange);
Vend tilbage () => {
router.events.off("ruteÆndring fuldført", handleRouteChange);
};
}, [router.events]);
Vend tilbage (
<>
<Script strategi="efterInteraktiv" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Manuskript
id='google-analytics'
strategi="efterInteraktiv"
dangerouslySetInnerHTML={{
__html: `
vindue.dataLayer = vindue.dataLayer || [];
fungeregtag(){dataLayer.push(argumenter);}
gtag('js', nyDato());
gtag('config', 'G-XXXXXX', {
side_sti: vindue.Beliggenhed.stinavn,
});
`,
}}
/>
<Layout>
<Komponent {...pageProps} />
</Layout>
</>
)
}
eksportStandard Min App
Dette eksempel bruger useRouter og useEffect hooks til at optage en sidevisning, hver gang brugeren navigerer til en anden side.
Kald useRouter-metoden fra next/router og tildel den til routervariablen. I useEffect-hooken skal du lytte til routeChangeComplete-hændelsen på routeren. Når hændelsen udløses, skal du optage en sidevisning ved at kalde handleRouteChange-funktionen.
useEffect hook's returerklæring afmelder sig fra routeChangeComplete-begivenheden med 'off'-metoden.
Brug Google Analytics til at indsamle brugerdata
Data er enormt gavnlige for at træffe gode beslutninger, og tilføjelse af Google Analytics til din hjemmeside er en måde at indsamle dem på.
Du kan tilføje Google Analytics til et Next.js-projekt ved hjælp af hooks for at sikre, at du registrerer alle sidevisninger, selv når en side bruger routing på klientsiden. Nu kan du se, hvor mange visninger dit websted får på dit Google Analytics-dashboard.