Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Seitenaufrufe sind eine wichtige Metrik zur Verfolgung der Webleistung. Software-Tools wie Google Analytics und Fathom bieten eine einfache Möglichkeit, dies mit einem externen Skript zu tun.

Aber vielleicht möchten Sie keine Bibliothek eines Drittanbieters verwenden. In einem solchen Fall können Sie eine Datenbank verwenden, um die Besucher Ihrer Website zu verfolgen.

Supabase ist eine Open-Source-Firebase-Alternative, mit der Sie Seitenaufrufe in Echtzeit verfolgen können.

Bereiten Sie Ihre Website vor, um mit dem Tracking von Seitenaufrufen zu beginnen

Sie benötigen einen Next.js-Blog, um diesem Tutorial folgen zu können. Wenn Sie noch keine haben, können Sie dies tun Erstellen Sie einen Markdown-basierten Blog mit React-Markdown.

Sie können auch die offizielle Next.js-Blog-Starter-Vorlage daraus klonen GitHub Repository.

instagram viewer

Supabase ist eine Firebase-Alternative, die eine Postgres-Datenbank, Authentifizierung, sofortige APIs, Edge-Funktionen, Echtzeitabonnements und Speicher bereitstellt.

Sie werden es verwenden, um die Seitenaufrufe für jeden Blogbeitrag zu speichern.

Erstellen Sie eine Supabase-Datenbank

Gehen Sie zum Supabase-Website und melden Sie sich an oder registrieren Sie sich für ein Konto.

Klicken Sie im Supabase-Dashboard auf Neues Projekt und wählen Sie eine Organisation aus (Supabase hat eine Organisation unter dem Benutzernamen Ihres Kontos erstellt).

Geben Sie den Projektnamen und das Passwort ein und klicken Sie dann auf Neues Projekt erstellen.

Kopieren Sie auf der Einstellungsseite im API-Abschnitt die Projekt-URL und die öffentlichen und geheimen Schlüssel.

Öffne das .env.local Datei im Next.js-Projekt und kopieren Sie diese API-Details.

NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\N

Navigieren Sie als Nächstes zum SQL-Editor und klicken Sie auf Neue Abfrage.

Verwenden Sie die Standard-SQL-Befehl zum Erstellen einer Tabelle genannt Ansichten.

ERSTELLENTISCH Aufrufe (\n AusweisgroßGENERIERTVONSTANDARDALSIDENTITÄT PRIMÄR TASTE,\n Schnecke TextEINZIGARTIGNICHTNULL,\n view_count großSTANDARD1NICHTNULL,\n aktualisiert_um ZeitstempelSTANDARDJETZT() NICHTNULL\n);\n

Alternativ können Sie den Tabelleneditor verwenden, um die Ansichtentabelle zu erstellen:

Der Tabelleneditor befindet sich im linken Bereich des Dashboards.

Erstellen Sie eine gespeicherte Supabase-Prozedur zum Aktualisieren von Ansichten

Postgres bietet integrierte Unterstützung für SQL-Funktionen, die Sie über die Supabase-API aufrufen können. Diese Funktion ist für das Erhöhen der Ansichtsanzahl in der Ansichtstabelle verantwortlich.

Befolgen Sie diese Anweisungen, um eine Datenbankfunktion zu erstellen:

  1. Wechseln Sie im linken Bereich zum Abschnitt SQL-Editor.
  2. Klicken Sie auf Neue Abfrage.
  3. Fügen Sie diese SQL-Abfrage hinzu, um die Datenbankfunktion zu erstellen. 
    ERSTELLENODERERSETZENFUNKTION update_views (page_slug TEXT)
    KEHRT ZURÜCK Leere
    SPRACHE plpgsql
    ALS $$
    START
     WENN VORHANDEN (WÄHLENAUS Ansichten WO slug=page_slug) DANN
    AKTUALISIEREN Ansichten
    SATZ view_count = view_count + 1,
     updated_at = jetzt()
     WHERE slug = page_slug;
    ANDERS
    EINFÜGUNGhinein Ansichten (Schnecke) WERTE (page_slug);
    ENDEWENN;
    ENDE;
    $$;
  4. Klicken Sie auf Ausführen oder Cmd + Enter (Strg + Enter), um die Abfrage auszuführen.

Diese SQL-Funktion heißt update_views und akzeptiert ein Textargument. Es prüft zunächst, ob dieser Blog-Beitrag bereits in der Tabelle vorhanden ist, und wenn dies der Fall ist, erhöht es die Anzahl der Aufrufe um 1. Wenn dies nicht der Fall ist, wird ein neuer Eintrag für den Beitrag erstellt, dessen Anzahl der Aufrufe standardmäßig auf 1 eingestellt ist.

Richten Sie den Supabase-Client in Next.js ein

Installieren und konfigurieren Sie Supabase

Installieren Sie das Paket @supabase/supabase-js über npm, um von Next.js aus eine Verbindung zur Datenbank herzustellen.

npm installieren @supabase/supabase-js\n

Als nächstes erstellen Sie eine /lib/supabase.ts Datei im Stammverzeichnis Ihres Projekts und initialisieren Sie den Supabase-Client.

importieren { createClient } aus'@supabase/supabase-js';\nconst supabaseUrl: string = process.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: string = process.env. SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient (supabaseUrl, supabaseServerKey);\nexport { supabase };\n

Denken Sie daran, dass Sie die API-Anmeldeinformationen in .env.local gespeichert haben, als Sie die Datenbank erstellt haben.

Seitenaufrufe aktualisieren

Erstellen Sie eine API-Route, die die Seitenaufrufe von Supabase abruft und die Anzahl der Aufrufe jedes Mal aktualisiert, wenn ein Benutzer eine Seite besucht.

Sie erstellen diese Route in der /api Ordner in einer Datei namens Ansichten/[Schnecke].ts. Die Verwendung von Klammern um den Dateinamen erstellt eine dynamische Route. Übereinstimmende Parameter werden als Abfrageparameter namens slug gesendet.

importieren {supabase} aus"../../../lib/supabase/admin";\nimportieren { NextApiRequest, NextApiResponse } aus"nächste";\nconst Handler = asynchron (Anforderung: NextApiRequest, res: NextApiResponse) => {\n Wenn (erforderliche Methode "POST") {\N erwarten superbase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n zurückkehren res.status(200).json({\n Nachricht: "Erfolg",\n });\n }\n Wenn (erforderliche Methode "ERHALTEN") {\N konst { Daten } = erwarten supabase\n .from("Ansichten")\n .auswählen("view_count")\n .filter("Schnecke", "eq", req.query.slug);\n Wenn (Daten) {\n zurückkehren res.status(200).json({\n insgesamt: Daten[0]?.view_count || 0,\n });\n }\n }\n zurückkehren res.status(400).json({\n Nachricht: "Ungültige Anfrage",\n });\n};\nexportieren Standard Handler;\n

Die erste if-Anweisung prüft, ob die Anfrage eine POST-Anfrage ist. Wenn dies der Fall ist, wird die SQL-Funktion update_views aufgerufen und der Slug als Argument übergeben. Die Funktion erhöht die Anzahl der Aufrufe oder erstellt einen neuen Eintrag für diesen Beitrag.

Die zweite if-Anweisung prüft, ob die Anfrage eine GET-Methode ist. Wenn dies der Fall ist, wird die Gesamtzahl der Aufrufe für diesen Beitrag abgerufen und zurückgegeben.

Wenn die Anforderung keine POST- oder GET-Anforderung ist, gibt die Handler-Funktion eine „Ungültige Anforderung“-Nachricht zurück.

Seitenaufrufe zum Blog hinzufügen

Um Seitenaufrufe zu verfolgen, müssen Sie jedes Mal, wenn ein Benutzer zu einer Seite navigiert, die API-Route treffen.

Beginnen Sie mit der Installation des swr-Pakets. Sie werden es verwenden, um die Daten von der API abzurufen.

npm Installieren swr\n

swr steht für stale while revaldate. Es ermöglicht Ihnen, die Ansichten dem Benutzer anzuzeigen, während im Hintergrund aktuelle Daten abgerufen werden.

Erstellen Sie dann eine neue Komponente namens viewsCounter.tsx und fügen Sie Folgendes hinzu:

importieren SWR verwenden aus"swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = asynchron (Eingabe: RequestInfo) => {\n konst res: Antwort = erwarten holen (Eingabe);\n zurückkehrenerwarten res.json();\n};\nconst ViewsCounter = ({Schnecke}: Requisiten) => {\nconst { data } = useSWR(`/api/views/${Schnecke}`, Abholer);\nRückgabe (\n {`${\n (Daten?.Gesamt)? data.total :"0"\N } Ansichten‘}</span>\n );\n};\nstandardmäßige ViewsCounter exportieren;\n

Diese Komponente rendert die Gesamtansichten für jeden Blog. Es akzeptiert den Slug eines Beitrags als Requisite und verwendet diesen Wert, um die Anfrage an die API zu stellen. Wenn die API Aufrufe zurückgibt, zeigt sie diesen Wert an, andernfalls zeigt sie „0 Aufrufe“ an.

Um Ansichten zu registrieren, fügen Sie den folgenden Code zu der Komponente hinzu, die jeden Beitrag rendert.

importieren { useEffect } aus"reagieren";\nViewsCounter importieren aus"../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ Schnecke }:Requisiten) => {\n useEffect(() => {\n holen (`/api/views/${Schnecke}`, {\n Methode: 'POST'\n });\n }, [slug]);\nreturn (\n 
\N \N // Bloginhalt\n 

\n)\n}\nStandardbeitrag exportieren\n

Überprüfen Sie die Supabase-Datenbank, um zu sehen, wie sich die Anzahl der Aufrufe aktualisiert. Es sollte sich jedes Mal um 1 erhöhen, wenn Sie einen Beitrag besuchen.

Verfolgen von mehr als Seitenaufrufen

Durch Seitenaufrufe erfahren Sie, wie viele Benutzer bestimmte Seiten Ihrer Website besuchen. Sie können sehen, welche Seiten gut funktionieren und welche nicht.

Um noch weiter zu gehen, verfolgen Sie den Referrer Ihres Besuchers, um zu sehen, woher der Traffic kommt, oder erstellen Sie ein Dashboard, um die Daten besser zu visualisieren. Denken Sie daran, dass Sie die Dinge immer vereinfachen können, indem Sie ein Analysetool wie Google Analytics verwenden.