Dataanalys är ett måste om du vill hålla koll på antalet besökare som din webbplats får. Det finns olika sätt att lägga till analyser till ditt projekt, inklusive Google Analytics. Det är en gratis tjänst och är relativt enkel att installera.
Lär dig hur du lägger till Google Analytics på din webbplats med hjälp av Next.js, ett React-ramverk för att bygga SEO-vänliga webbplatser.
Konfigurera Google Analytics
Google Analytics ger insikter in i beteendet hos personer som besöker din webbplats. Den talar om för dig vilka sidor som får antalet visningar och ger dig publikdata som plats, ålder, intresse och vilken enhet de använder. Denna information kan hjälpa dig att fatta beslut om vilken riktning ditt företag ska ta för att bli framgångsrikt.
För att komma igång, besök analysinstrumentpanel och skapa ett nytt konto genom att följa dessa steg:
- Klicka på Skapa konto knappen på admin-fliken för att skapa ett nytt konto.
- Lägg till ett kontonamn under avsnittet Kontoinställningar.
- Skapa analytics-egenskapen genom att ange ett namn.
- Lägg till företagsinformationen. Välj de alternativ som gäller för din webbplats.
- Klicka på Skapa för att slutföra konfigureringen av egenskapen.
- Klicka på webbström för att ange vilken dataström Google Analytics ska spåra.
- Ange webbadressen till din webbplats och ge dataströmmen ett namn.
- Klicka på taggningsinstruktioner och få skriptet du kommer att använda på din webbplats.
- Kopiera mät-ID (spårningskoden) för att använda senare.
När du har fått spårningskoden kan du ställa in Next.js-projektet.
Konfigurera Next.js-projektet
Om du inte redan har ett Next.js-projekt konfigurerat, se Next.js officiella guide för att starta.
När du skapade egenskapen Global webbplatstagg fick du ett skript så här:
<!-- Google-tagg (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<manus>
fönster.dataLayer = fönster.dataLayer || [];
fungeragtag(){dataLayer.push(argument);}
gtag('js', nyDatum());
gtag('config', 'G-NHVWK8L97D');
</script>
Du måste lägga till det här skriptet i head-taggen på din webbplats. I Next.js använder du Script-komponenten från next/script. Den här komponenten är en förlängning av HTML-skripttaggen. Det låter dig inkludera tredjepartsskript på din Next.js-webbplats och ställa in deras laddningsstrategi, vilket förbättrar prestandan.
De Next.js-skript komponenten erbjuder olika laddningsstrategier. Den "efterinteraktiva" strategin är lämplig för ett analysskript. Det betyder att den kommer att laddas efter att sidan är interaktiv.
importera Manus från "nästa/skript"
<Skript src="" strategi="efterInteractive" />
Öppna pages/_app.js fil och importera skriptkomponenten högst upp.
importera Manus från 'nästa/skript'
Ändra sedan retursatsen för appkomponenten så att den inkluderar skripttaggen från Google Analytics.
importera '../styles/globals.css'
importera Layout från '../components/Layout/Layout'
importera Manus från 'nästa/skript'fungeraMinApp({ Komponent, pageProps }) {
lämna tillbaka (
<>
<Skriptstrategi="efterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Manus
id='google-analytics'
strategi="efterInteractive"
dangerouslySetInnerHTML={{
__html: `
fönster.dataLayer = fönster.dataLayer || [];
fungeragtag(){dataLayer.push(argument);}
gtag('js', nyDatum());
gtag('config', 'G-XXXXXXX', {
page_path: fönster.plats.sökvägsnamn,
});
`,
}}
/>
<Layout>
<Komponent {...pageProps} />
</Layout>
</>
)
}
exporterastandard MinApp
Observera att denna tagg skiljer sig något från den som Google Analytics tillhandahåller. Den använder dangerouslySetInnerHTML och inkluderar en laddningsstrategi. De fungerar dock likadant.
Kom ihåg att ersätta G-XXXXXXX med din spårningskod. Det är också lämpligt att lagra spårningskoden i en .env-fil för att hålla den hemlig.
Lägga till Google Analytics till en ensidig applikation
Du kan använda skripttaggen ovan för en vanlig webbplats och lämna det där. Men för en ensidig applikation som en Next.js-webbplats måste du ta några extra steg.
A ensidig applikation (SPA) är en webbplats som laddar allt innehåll i förväg, som svar på en första begäran. Webbläsaren laddar innehåll dynamiskt när en användare klickar på länkar för att navigera på webbplatsen. Den gör ingen sidförfrågan, bara webbadressen ändras.
Detta är annorlunda för Next.js-sidor som använder getServerSideProps eftersom webbläsaren renderar dem på begäran.
Google-taggen fungerar genom att spela in en sidvisning när en ny sida laddas. Så för SPA: er körs Google-taggen bara en gång, när sidan initialt läses in. Därför måste du manuellt registrera vyerna när användaren navigerar till olika sidor.
Se ensidig mätning Google Analytics guide att lära sig mer.
För att manuellt spela in sidvisningar i Next.js med gtag-skriptet, skapa en ny mapp som heterlib och lägg till en ny fil, gtag.js.
exporterakonst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;exporterakonst sidvisning = () => {
window.gtag("config", GA_MEASUREMENT_ID, {
page_path: url,
});
};
exporterakonst händelse = ({ åtgärd, kategori, etikett, värde }) => {
window.gtag("händelse", action, {
event_category: kategori,
event_label: etikett,
värde,
});
};
Ändra sedan /pages/_app.js för att använda dessa funktioner och spåra sidvisningar i useEffect-kroken.
importera '../styles/globals.css'
importera Layout från '../components/Layout/Layout'
importera Manus från 'nästa/skript'
importera { useRouter } från 'nästa/router';
importera { useEffect } från "reagera";
importera * som gtag från "../lib/gtag"fungeraMinApp({ Component, pageProps }: AppProps) {
konst router = useRouter();useEffect(() => {
konst handleRouteChange = (url) => {
gtag.sidvisning(url);
};router.events.on("routeChangeComplete", handleRouteChange);
lämna tillbaka () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
lämna tillbaka (
<>
<Skriptstrategi="efterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Manus
id='google-analytics'
strategi="efterInteractive"
dangerouslySetInnerHTML={{
__html: `
fönster.dataLayer = fönster.dataLayer || [];
fungeragtag(){dataLayer.push(argument);}
gtag('js', nyDatum());
gtag('config', 'G-XXXXXX', {
page_path: fönster.plats.sökvägsnamn,
});
`,
}}
/>
<Layout>
<Komponent {...pageProps} />
</Layout>
</>
)
}
exporterastandard MinApp
I det här exemplet används useRouter och useEffect-hakarna för att spela in en sidvisning varje gång användaren navigerar till en annan sida.
Anropa metoden useRouter från next/router och tilldela den till routervariabeln. I useEffect-kroken, lyssna på routeChangeComplete-händelsen på routern. När händelsen utlöses, spela in en sidvy genom att anropa handleRouteChange-funktionen.
UseEffect-krokens retursats avbryter prenumerationen på routeChangeComplete-händelsen med 'off'-metoden.
Använd Google Analytics för att samla in användardata
Data är oerhört fördelaktigt för att fatta bra beslut, och att lägga till Google Analytics på din webbplats är ett sätt att samla in dem.
Du kan lägga till Google Analytics till ett Next.js-projekt med hjälp av krokar för att säkerställa att du registrerar alla sidvisningar även när en sida använder routing på klientsidan. Nu kan du se hur många visningar din webbplats får på din Google Analytics-instrumentpanel.
