Next.js 14 - Benutzerdefiniertes Client-seitiges End-to-End-Tracking erstellen

In dieser Story zeige ich Ihnen, wie Sie einen benutzerdefinierten Hook für die Seitenverfolgung erstellen und ihn problemlos in Ihr vorhandenes Next.js 14-Projekt integrieren können. Die verfolgten Daten werden über das ORM Prisma und eine benutzerdefinierte API-Route in einer Neon.tech Postgres-Datenbank gespeichert.

Hier ist das GitHub Repo mit dem gesamten Code und darunter der Link zur Beispielwebsite.

Beispielseite für mit integrierter Datenerfassung -> https://nextjs14-kafka-tracking.vercel.app/

NPM Paket fürs Fingerprinting

Wenn Sie die erste Geschichte gelesen haben, haben Sie die benötigten NPM-Pakete bereits installiert.

Anpassen des Prisma Schema

Hinzufügen neuer Felder in die Datei schema.prisma

Synchronisieren der Schema Änderungen

nach Schemaänderungen, so dass die Änderung mit der zugrunde liegenden DB synchronisiert wurde.

Neuer Tracking Hook wird erstellt

Jetzt sind wir bereit für die Erstellung unseres neuen Hooks, bei dem wir das neue npm-Paket „fingerprintjs“ verwenden, mit dem wir eine UserID definieren.

Neue Komponente für die Integration des Hooks

Nun erstellen wir eine neue Komponente, die den neuen Hook verwendet, den wir dann in unsere layout.tsx importieren

Import der neuen Komponente ins Rootlayout

Jetzt importieren wir die Komponente src/app/[locale]/layout.tsx

und unterhalb {children} wird die Komponente eingebunden.

Layout.tsx — Kompletter Code

Speichern von Tracking-Daten in der Postgres-DB über eine benutzerdefinierte Route

Wir verwenden die neue Route aus dem zuvor erstellen Hook

Tracking Route — Kompletter Code

Die Route ruft die Daten ab und speichert sie in der entsprechenden „Tracking“-Tabelle. Da wir Prisma verwenden, ist das ganz einfach.

Cloudapp-dev und bevor Sie uns verlassen

Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:

Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.

Oder folgen Sie uns auf Twitter -> Cloudapp.dev