So verfolgen Sie Seitenaufrufe in Ihrem Blog mit Supabase

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.

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.

Screenshot der Projektdetails auf Supabase

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

Screenshot mit den API-Schlüsseln des Supabase-Projekts

Ö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 .

 CREATE TABLE views (\n id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,\n slug text UNIQUE NOT NULL,\n view_count bigint DEFAULT 1 NOT NULL,\n updated_at timestamp DEFAULT NOW() NOT NULL\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:

Wechseln Sie im linken Bereich zum Abschnitt SQL-Editor.
Klicken Sie auf Neue Abfrage.

Fügen Sie diese SQL-Abfrage hinzu, um die Datenbankfunktion zu erstellen.

 CREATE OR REPLACE FUNCTION update_views(page_slug TEXT) 
RETURNS void 
LANGUAGE plpgsql 
AS $$ 
BEGIN 
    IF EXISTS (SELECT FROM views WHERE slug=page_slug) THEN 
        UPDATE views 
        SET view_count = view_count + 1, 
            updated_at = now() 
        WHERE slug = page_slug; 
    ELSE 
        INSERT into views(slug) VALUES (page_slug); 
    END IF; 
END; 
$$;

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, erstellt es einen neuen Eintrag für den Beitrag, 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 install @supabase/supabase-js\n

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

 import { createClient } from '@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.

 import { supabase } from "../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } from "next";\nconst handler = async (req: NextApiRequest, res: NextApiResponse) => {\n if (req.method === "POST") {\n await supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n return res.status(200).json({\n message: "Success",\n });\n }\n if (req.method === "GET") {\n const { data } = await supabase\n .from("views")\n .select("view_count")\n .filter("slug", "eq", req.query.slug);\n if (data) {\n return res.status(200).json({\n total: data[0]?.view_count || 0,\n });\n }\n }\n return res.status(400).json({\n message: "Invalid request",\n });\n};\nexport default 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 install 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:

 import useSWR from "swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = async (input: RequestInfo) => {\n const res: Response = await fetch(input);\n return await res.json();\n};\nconst ViewsCounter = ({ slug }: Props) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nreturn (\n <span>{`${\n (data?.total) ? data.total :"0"\n } views`}</span>\n );\n};\nexport default ViewsCounter;\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.

 import { useEffect } from "react";\nimport ViewsCounter from "../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }:Props) => {\n useEffect(() => {\n fetch(`/api/views/${slug}`, {\n method: 'POST'\n });\n }, [slug]);\nreturn (\n <div>\n <ViewsCounter slug={slug}/>\n // blog content\n </div>\n)\n}\nexport default Post\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.

Laptop Akku eingesteckt wird nicht geladen

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.