Inhaltsverzeichnis
In diesem Folgebeitrag zeige ich Ihnen, wie Sie neue Attribute zu Ihrem Tracking-Datensatz hinzufügen können. Wir werden den UserAgent, Pfadnamen, Mobile, Plattform, Region und Stadt hinzufügen. Alle Daten werden in einer Neon.tech Postgres-DB über Prisma ORM gespeichert, wie im vorherigen Beitrag.
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/
Prisma-Schema für neue Attribute
Wir haben eine neue Tabelle „customtracking“ zu unserem schema.prisma hinzugefügt, damit diese Tabelle in unserem Postgres DB Service neon.tech erstellt wird. Wir müssen den folgenden Befehl ausführen, um unser Schema mit der DB zu synchronisieren
Neue schema.prisma-Datei
Wir haben neue Attribute wie Stadt, Region, Pfadname, Useragent, Plattform und Mobile hinzugefügt.
Anpassung des existierenden Tracking Hook
Wir werden den Tracking-Hook, den wir in der letzten Geschichte erstellt haben, anpassen.
Geänderter usePageTracking Hook
Die Hauptlogik befindet sich in der usePageTracking-Hook. Der vollständige Code ist unten zu sehen.
Um das Skript so zu erweitern, dass es den userAgent, den Pfadnamen, mobiles Gerät oder nicht, die Plattform und die Stadt verfolgt, aktualisieren wir den usePageTracking-Hook entsprechend.
Erläuterung der Zusätze und Anpassungen:
Der userAgent wird aus dem navigator.userAgent-Objekt abgerufen. Dieser String enthält Informationen über den Browser, das Betriebssystem und das Gerät.
Der Pfadname wird von window.location.pathname abgerufen, der Ihnen den Pfad der URL relativ zur Domäne angibt.
Die Plattform wird über navigator.platform abgefragt. Diese gibt das Betriebssystem oder die Umgebung an, in der sich der Benutzer befindet, z. B. Win32 für Windows, MacIntel für macOS usw.
Die Funktion isMobileDevice prüft anhand der Zeichenkette userAgent, ob das Gerät des Benutzers wahrscheinlich ein mobiles Gerät ist. Sie prüft auf gängige Identifikatoren für mobile Geräte wie Android, iPhone, iPad, usw. Sie gibt true zurück, wenn ein mobiles Gerät erkannt wird, und false, wenn nicht.
Die Funktion getUserLocation gibt nun ein Objekt zurück, das Land, Stadt und Region unter Verwendung der ipapi.co API. Diese Daten werden über die API-Antwort abgerufen und enthalten den Fallback-Wert Unknown, wenn die Daten nicht verfügbar sind.
Sie können den Hook noch weiter ausbauen, wenn Sie zusätzliche Attribute verfolgen möchten.
Neue Route zum Schreiben von Daten in die Neon.tech-Tabelle „customtracking“
Da wir eine neue Tabelle „customtracking“ erstellt haben, werden wir auch eine neue API-Route erstellen, damit wir die Logik klar trennen können.
Das war's. Jetzt haben wir ein vollständiges Tracking unserer Nutzer auf der Seite. Bitte vergessen Sie nicht, die GDPR-Regeln zu beachten und das Tracking nur zu aktivieren, wenn Sie dazu berechtigt sind.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
