Google Analytics zu Next JS hinzufügen

Die Integration von Google Analytics (GA) in eine Next.js-Anwendung ermöglicht es Ihnen, Nutzerinteraktionen auf Ihrer Website effizient zu verfolgen. Aufgrund der serverseitigen Rendering-Fähigkeiten von Next.js ist der Ansatz etwas anders als bei reinen Client-Side-Frameworks.

Lassen Sie uns in den Prozess eintauchen.

Einrichten einer Google Analytics Eigenschaft

Stellen Sie zunächst sicher, dass Sie eine Google Analytics-Eigenschaft haben. Falls nicht, erstellen Sie eine in Ihrem Google Analytics-Konto und entscheiden Sie sich für eine Google Analytics 4 (GA4) Property. Sie erhalten eine "Measurement ID" (z. B. "G-XXXXXXXXXX").

Erstellen Sie ein GA-Modul

Erstellen Sie ein JavaScript-Modul für GA. Dieses Modul wird die Initialisierung und Verfolgung von Seitenaufrufen und Ereignissen übernehmen. Erstellen Sie eine Datei wie 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, }); };

Ersetzen Sie YOUR_MEASUREMENT_ID durch Ihre tatsächliche Messungs-ID.

Fügen Sie das GA-Skript zu Ihrer Anwendung hinzu

Fügen Sie das Google Analytics-Skript in Ihre Datei _document.js ein (erstellen Sie eine Datei in Ihrem Seitenverzeichnis, falls sie nicht vorhanden ist):

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 dangerouslySetInnerHTML={{ __html: ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${GA_TRACKING_ID}', { page_path: window.location.pathname, }); `, }} /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) } }

Seitenaufrufe verfolgen

Verwenden Sie in _app.js die Funktion pageview, um die Seitenaufrufe zu verfolgen:

import { useEffect } from 'react' import { useRouter } from 'next/router' import * as ga from '../lib/ga' export default function 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 <Komponente {...pageProps} /> }

Ereignisverfolgung implementieren

Wo immer Sie in Ihrer Anwendung benutzerdefinierte Ereignisse verfolgen müssen, importieren Sie die Ereignisfunktion aus Ihrem GA-Modul und verwenden Sie sie:

import * as ga from '../lib/ga' ga.event({ action: 'submit_form', category: 'Contact', label: 'Contact Form', value: 'User submitted a contact form' })

Testen und Bereitstellen

Testen Sie Ihre Integration gründlich und stellen Sie sicher, dass die Seitenaufrufe und Ereignisse wie erwartet verfolgt werden. Stellen Sie Ihre Anwendung bereit und überwachen Sie das Google Analytics Dashboard.

Überlegungen und bewährte Praktiken

Einhaltung des Datenschutzes: Stellen Sie sicher, dass Ihre Implementierung mit Datenschutzgesetzen wie GDPR übereinstimmt. Dazu kann das Hinzufügen von Mechanismen zur Zustimmung der Nutzer für die Nachverfolgung gehören.
Fehlersuche: Verwenden Sie Tools wie den Google Analytics Debugger für Chrome, um die Einrichtung zu überprüfen.
Server-seitiges vs. Client-seitiges Tracking: Achten Sie darauf, was in Next.js-Anwendungen auf der Serverseite und was auf der Clientseite getrackt wird.

Abschließende Überlegungen

Die Integration von Google Analytics in eine Next.js-Anwendung ermöglicht einen detaillierten Einblick in das Nutzerverhalten und die Leistung der Website. Es ist jedoch wichtig, daran zu denken, dass Google Analytics komplex sein kann und nicht für jede Organisation geeignet ist.

Wir von Simple Analytics bieten eine unkomplizierte, datenschutzfreundliche Lösung, die den Analyseprozess vereinfacht und gleichzeitig die Privatsphäre der Nutzer respektiert. Schauen Sie sich unser Live-Analyse-Dashboard an und überzeugen Sie sich selbst.

Google Analytics Glossar