Data-analyse is een must als u het aantal bezoekers van uw website wilt bijhouden. Er zijn verschillende manieren waarop u analyses aan uw project kunt toevoegen, waaronder Google Analytics. Het is een gratis service en relatief eenvoudig in te stellen.
Leer hoe u Google Analytics aan uw site kunt toevoegen met behulp van Next.js, een React-framework voor het bouwen van SEO-vriendelijke websites.
Google Analytics instellen
Google Analytics geeft inzichten in het gedrag van mensen die uw website bezoeken. Het vertelt u welke pagina's het aantal weergaven krijgen en geeft u doelgroepgegevens zoals locatie, leeftijd, interesse en het apparaat dat ze gebruiken. Deze gegevens kunnen helpen bij het nemen van beslissingen over de richting die uw bedrijf moet inslaan om succesvol te zijn.
Ga om te beginnen naar de analytisch dashboard en maak een nieuw account aan door deze stappen te volgen:
- Klik op de Account aanmaken knop op het admin-tabblad om een nieuw account aan te maken.
- Voeg een accountnaam toe onder het gedeelte Account instellen.
- Maak de analytics-eigenschap door een naam op te geven.
- Voeg de bedrijfsgegevens toe. Selecteer de opties die van toepassing zijn op uw website.
- Klik op de Creëren knop om het instellen van de eigenschap te voltooien.
- Klik op webstream om de gegevensstroom op te geven die Google Analytics moet volgen.
- Geef de URL naar uw website op en geef de datastroom een naam.
- Klik op taginstructies en ontvang het script dat u op uw website gaat gebruiken.
- Kopieer de metings-ID (de trackingcode) om later te gebruiken.
Zodra u de trackingcode heeft ontvangen, kunt u het Next.js-project opzetten.
Het Next.js-project opzetten
Als u nog geen Next.js-project hebt ingesteld, raadpleegt u de Next.js officiële gids starten.
Toen u de eigenschap Globale sitetag maakte, kreeg u een script als dit:
<!-- Google-tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<script>
raam.dataLayer = raam.dataLayer || [];
functiegtag(){dataLayer.push(argumenten);}
gtag('js', nieuwDatum());
gtag('configuratie', 'G-NHVWK8L97D');
</script>
U moet dit script toevoegen aan de head-tag van uw website. In Next.js gebruik je de Script-component uit next/script. Deze component is een uitbreiding van de HTML-scripttag. Hiermee kunt u scripts van derden aan uw Next.js-website toevoegen en hun laadstrategie instellen, waardoor de prestaties worden verbeterd.
De Next.js-script component biedt verschillende laadstrategieën. De “afterinteractive” strategie is geschikt voor een analytics script. Dit betekent dat het wordt geladen nadat de pagina interactief is.
importeren Script van "volgende/script"
<Script src="" strategie="naInteractief" />
Open de pagina's/_app.js bestand en importeer de Script-component bovenaan.
importeren Script van 'volgende/script'
Pas vervolgens de retourverklaring van de app-component aan om de scripttag van Google Analytics op te nemen.
importeren '../styles/globals.css'
importeren Lay-out van '../componenten/Lay-out/Lay-out'
importeren Script van 'volgende/script'functieMijnApp({ Component, paginaProps }) {
opbrengst (
<>
<Scriptstrategie="naInteractief" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Script
identiteitsbewijs='Google Analytics'
strategie="naInteractief"
gevaarlijkSetInnerHTML={{
__html: `
raam.dataLayer = raam.dataLayer || [];
functiegtag(){dataLayer.push(argumenten);}
gtag('js', nieuwDatum());
gtag('configuratie', 'G-XXXXXXX', {
pagina_pad: raam.plaats.padnaam,
});
`,
}}
/>
<Lay-out>
<Onderdeel {...pageProps} />
</Layout>
</>
)
}
exporterenstandaard MijnApp
Houd er rekening mee dat deze tag iets anders is dan die van Google Analytics. Het maakt gebruik van dangerlySetInnerHTML en bevat een laadstrategie. Ze werken echter hetzelfde.
Vergeet niet om G-XXXXXXX te vervangen door uw trackingcode. Het is ook raadzaam om de trackingcode op te slaan in een .env-bestand om deze geheim te houden.
Google Analytics toevoegen aan een Single Page Application
U kunt de scripttag hierboven gebruiken voor een gewone website en het daarbij laten. Voor een toepassing met één pagina, zoals een Next.js-website, moet u echter een paar extra stappen nemen.
A applicatie van één pagina (SPA) is een website die alle inhoud vooraf laadt, als reactie op een eerste verzoek. De browser laadt inhoud dynamisch terwijl een gebruiker op links klikt om door de site te navigeren. Het doet geen paginaverzoek, alleen de URL verandert.
Dit is anders voor Next.js-pagina's die getServerSideProps gebruiken, aangezien de browser deze op verzoek weergeeft.
De Google-tag werkt door een paginaweergave op te nemen wanneer een nieuwe pagina wordt geladen. Dus voor SPA's wordt de Google-tag slechts één keer uitgevoerd, wanneer de pagina voor het eerst wordt geladen. Daarom moet u de weergaven handmatig vastleggen terwijl de gebruiker naar verschillende pagina's navigeert.
Zie de meting van één pagina Google Analytics-gids meer leren.
Om handmatig paginaweergaven in Next.js op te nemen met behulp van het gtag-script, maakt u een nieuwe map met de naamlib en voeg een nieuw bestand toe, gtag.js.
exporterenconst GA_MEASUREMENT_ID = proces.env. GA_MEASUREMENT_ID;exporterenconst paginaweergave = () => {
venster.gtag("configuratie", GA_MEASUREMENT_ID, {
pagina_pad: url,
});
};
exporterenconst gebeurtenis = ({ actie, categorie, label, waarde }) => {
venster.gtag("evenement", actie, {
event_category: categorie,
event_label: label,
waarde,
});
};
Wijzig vervolgens /pages/_app.js om deze functies te gebruiken en volg paginaweergaven in de useEffect-hook.
importeren '../styles/globals.css'
importeren Lay-out van '../componenten/Lay-out/Lay-out'
importeren Script van 'volgende/script'
importeren { gebruikRouter } van 'volgende/router';
importeren { gebruikEffect } van "Reageer";
importeren * als gtag van "../lib/gtag"functieMijnApp({ Component, pageProps }: AppProps) {
const router = gebruikRouter();gebruikEffect(() => {
const handleRouteChange = (url) => {
gtag.paginaweergave(url);
};router.events.on("routeChangeComplete", handvatRouteChange);
opbrengst () => {
router.events.off("routeChangeComplete", handvatRouteChange);
};
}, [router.gebeurtenissen]);
opbrengst (
<>
<Scriptstrategie="naInteractief" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Script
identiteitsbewijs='Google Analytics'
strategie="naInteractief"
gevaarlijkSetInnerHTML={{
__html: `
raam.dataLayer = raam.dataLayer || [];
functiegtag(){dataLayer.push(argumenten);}
gtag('js', nieuwDatum());
gtag('configuratie', 'G-XXXXXX', {
pagina_pad: raam.plaats.padnaam,
});
`,
}}
/>
<Lay-out>
<Onderdeel {...pageProps} />
</Layout>
</>
)
}
exporterenstandaard MijnApp
Dit voorbeeld gebruikt de hooks useRouter en useEffect om een paginaweergave vast te leggen elke keer dat de gebruiker naar een andere pagina navigeert.
Roep de methode useRouter aan vanuit next/router en wijs deze toe aan de routervariabele. Luister in de useEffect hook naar de gebeurtenis routeChangeComplete op de router. Wanneer de gebeurtenis wordt geactiveerd, neemt u een paginaweergave op door de functie handleRouteChange aan te roepen.
De return-instructie van de useEffect-hook meldt zich af bij de routeChangeComplete-gebeurtenis met de 'off'-methode.
Gebruik Google Analytics om gebruikersgegevens te verzamelen
Gegevens zijn enorm nuttig voor het nemen van goede beslissingen, en het toevoegen van Google Analytics aan uw website is een manier om deze te verzamelen.
U kunt Google Analytics aan een Next.js-project toevoegen met behulp van hooks om ervoor te zorgen dat u alle paginaweergaven vastlegt, zelfs wanneer een pagina client-side routing gebruikt. Nu kunt u zien hoeveel weergaven uw site krijgt op uw Google Analytics-dashboard.
