Google Analytics toevoegen aan Next JS

Door Google Analytics (GA) in een Next.js-applicatie te integreren, kunt u interacties van gebruikers op uw website efficiënt bijhouden. Gezien de server-side rendering mogelijkheden van Next.js, is de aanpak iets anders dan die van alleen client-side frameworks.

Laten we ons verdiepen in het proces.

Een Google Analytics-eigenschap instellen

Zorg er eerst voor dat u een Google Analytics-eigenschap hebt. Zo niet, maak er dan een aan in uw Google Analytics-account en kies voor een Google Analytics 4 (GA4) eigenschap. Je krijgt dan een "Measurement ID" (zoals 'G-XXXXXXXXXX').

Een GA-module maken

Maak een JavaScript-module voor GA. Deze module zorgt voor de initialisatie en het bijhouden van paginaweergaven en gebeurtenissen. Maak een bestand zoals lib/ga/index.js:

export const GA_TRACKING_ID = 'YOUR_MEASUREMENT_ID'; export const pageview = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path: url, }); }; export const event = ({ action, category, label, value }) => { window.gtag('event', action, { event_category: category, event_label: label, value: value, });

Vervang YOUR_MEASUREMENT_ID door uw werkelijke meet-ID.

Het GA-script aan uw toepassing toevoegen

Voeg het Google Analytics-script toe aan uw bestand _document.js (maak er een aan in uw paginamap als deze niet bestaat):

import Document, { Html, Head, Main, NextScript } from 'next/document' import { GA_TRACKING_ID } from '../lib/ga' export default class MyDocument extends Document { render() { return ( <Html> <Head> {/* Global Site Tag (gtag.js) - Google Analytics */} <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} /> <script gevaarlijkSetInnerHTML={{ __html: ` window.dataLayer = window.dataLayer || []; functie gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${GA_TRACKING_ID}', {pagina_pad: window.location.pathname, }); `, }} /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) }

Paginaweergaves bijhouden

Gebruik in _app.js de functie pageview om het aantal bekeken pagina's bij te houden:

import { useEffect } from 'react' import { useRouter } from 'next/router' import * as ga from '../lib/ga' export default functie MyApp({ Component, pageProps }) { const router = useRouter() useEffect() => { const handleRouteChange = (url) => { ga.pageview(url) } router.events.on('routeChangeComplete', handleRouteChange) return () => { router.events.off('routeChangeComplete', handleRouteChange) } }, [router.events]) return <Component {...pageProps} /> }

Gebeurtenissen bijhouden implementeren

Overal waar u aangepaste gebeurtenissen in uw applicatie moet bijhouden, importeert u de gebeurtenisfunctie van uw GA-module en gebruikt u deze:

import * as ga from '../lib/ga' ga.event({actie: 'submit_form', categorie: 'Contact', label: 'Contactformulier', waarde: 'Gebruiker heeft een contactformulier ingediend' })

Testen en implementeren

Test uw integratie grondig en zorg ervoor dat paginaweergaven en gebeurtenissen worden bijgehouden zoals verwacht. Implementeer uw applicatie en controleer het Google Analytics-dashboard.

Overwegingen en best practices

Naleving van privacy: Zorg ervoor dat je implementatie voldoet aan privacywetgeving zoals GDPR. Dit kan het toevoegen van toestemmingsmechanismen voor tracking inhouden.
Debuggen: Gebruik tools zoals de Google Analytics Debugger voor Chrome om de setup te valideren.
Server- vs. Client-kant tracking: Houd in Next.js-applicaties rekening met wat er aan de server- versus aan de client-zijde wordt getraceerd.

Laatste gedachten

De integratie van Google Analytics in een Next.js-applicatie biedt gedetailleerde inzichten in gebruikersgedrag en siteprestaties. Het is echter belangrijk om te onthouden dat Google Analytics complex kan zijn en niet geschikt voor elke organisatie.

Bij Simple Analytics bieden we een meer eenvoudige, privacy-gerichte oplossing, die het analyseproces vereenvoudigt met respect voor de privacy van de gebruiker. Bekijk ons live analytics dashboard om het zelf te zien.

Google Analytics Begrippenlijst