Sådan holder du styr på sidevisninger på din blog ved hjælp af Supabase

Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Sidevisninger er en vigtig metrik til sporing af webydeevne. Softwareværktøjer som Google Analytics og Fathom giver en enkel måde at gøre dette på med et eksternt script.

Men måske vil du ikke bruge et tredjepartsbibliotek. I et sådant tilfælde kan du bruge en database til at holde styr på dit websteds besøgende.

Supabase er et open source Firebase-alternativ, der kan hjælpe dig med at holde styr på sidevisninger i realtid.

Forbered dit websted til at begynde at spore sidevisninger

Du skal have en Next.js-blog for at følge med i denne vejledning. Hvis du ikke allerede har en, kan du oprette en Markdown-baseret blog ved hjælp af react-markdown .

Du kan også klone den officielle Next.js blog starter skabelon fra dens GitHub depot.

Supabase er et Firebase-alternativ, der giver en Postgres-database, autentificering, øjeblikkelige API'er, Edge-funktioner, realtidsabonnementer og lagring.

Du vil bruge det til at gemme sidevisningerne for hvert blogindlæg.

hvordan man gør dampprofil cool

Opret en Supabase-database

Gå til Supabase hjemmeside og log ind eller tilmeld dig en konto.

Klik på på Supabase-dashboardet Nyt projekt og vælg en organisation (Supabase vil have oprettet en organisation under brugernavnet på din konto).

Udfyld projektnavnet og adgangskoden og klik derefter Opret nyt projekt.

Skærmbillede af projektdetaljer på Supabase

På indstillingssiden under API-sektionen skal du kopiere projektets URL og de offentlige og hemmelige nøgler.

Skærmbillede, der viser Supabase-projektets API-nøgler

Åbn .env.local fil i Next.js-projektet og kopier disse API-detaljer.

 NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\n

Derefter skal du navigere til SQL-editoren og klikke på Ny forespørgsel .

Brug standard SQL-kommando til at oprette en tabel hedder visninger .

 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

Alternativt kan du bruge tabeleditoren til at oprette visningstabellen:

Tabeleditoren er i venstre rude af dashboardet.

Opret en Supabase-lagret procedure for at opdatere visninger

Postgres har indbygget understøttelse af SQL-funktioner, som du kan kalde via Supabase API. Denne funktion vil være ansvarlig for at øge antallet af visninger i visningstabellen.

Følg disse instruktioner for at oprette en databasefunktion:

Gå til SQL-editor-sektionen i venstre rude.
Klik på Ny forespørgsel.

Tilføj denne SQL-forespørgsel for at oprette databasefunktionen.

 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; 
$$;

Klik på Kør eller Cmd + Enter (Ctrl + Enter) for at udføre forespørgslen.

Denne SQL-funktion kaldes update_views og accepterer et tekstargument. Det tjekker først, om det blogindlæg allerede findes i tabellen, og hvis det gør det, øger det dets antal visninger med 1. Hvis det ikke gør det, opretter det en ny post for indlægget, hvis antal visninger som standard er 1.

Konfigurer Supabase Client i Next.js

Installer og konfigurer Supabase

Installer @supabase/supabase-js-pakken via npm for at oprette forbindelse til databasen fra Next.js.

 npm install @supabase/supabase-js\n

Opret derefter en /lib/supabase.ts fil i roden af dit projekt og initialiser Supabase-klienten.

 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

Husk, at du gemte API-legitimationsoplysningerne i .env.local, da du oprettede databasen.

Opdater sidevisninger

Opret en API-rute, der henter sidevisningerne fra Supabase og opdaterer antallet af visninger, hver gang en bruger besøger en side.

Du vil oprette denne rute i /api mappe inde i en fil kaldet views/[slug].ts . Brug af parenteser omkring filnavnet skaber en dynamisk rute. Matchede parametre sendes som en forespørgselsparameter kaldet slug.

 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

Den første if-sætning kontrollerer, om anmodningen er en POST-anmodning. Hvis det er det, kalder det update_views SQL-funktionen og sender slug'en som et argument. Funktionen vil øge antallet af visninger eller oprette en ny post for dette indlæg.

Den anden if-sætning kontrollerer, om anmodningen er en GET-metode. Hvis det er det, henter den det samlede antal visninger for det pågældende indlæg og returnerer det.

Hvis anmodningen ikke er en POST- eller GET-anmodning, returnerer behandlerfunktionen en 'Ugyldig anmodning'-meddelelse.

Tilføj sidevisninger til bloggen

For at spore sidevisninger skal du trykke på API-ruten, hver gang en bruger navigerer til en side.

Start med at installere swr-pakken. Du vil bruge den til at hente dataene fra API'en.

 npm install swr\n

swr står for stale while revalidate. Det giver dig mulighed for at vise visningerne til brugeren, mens du henter opdaterede data i baggrunden.

Opret derefter en ny komponent kaldet viewsCounter.tsx og tilføj følgende:

 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

Denne komponent gengiver det samlede antal visninger for hver blog. Den accepterer en posts slug som en rekvisit og bruger denne værdi til at sende anmodningen til API'en. Hvis API'en returnerer visninger, viser den denne værdi, ellers viser den '0 visninger'.

For at registrere visninger skal du tilføje følgende kode til den komponent, der gengiver hvert indlæg.

 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

Tjek Supabase-databasen for at se, hvordan visningsantallet opdateres. Det bør stige med 1 hver gang du besøger et opslag.

Sporing af mere end sidevisninger

Sidevisninger fortæller dig, hvor mange brugere der besøger bestemte sider på dit websted. Du kan se, hvilke sider der klarer sig godt, og hvilke der ikke gør.

For at gå endnu længere skal du holde styr på din besøgendes henvisning for at se, hvor trafikken kommer fra, eller oprette et dashboard for at hjælpe med at visualisere dataene bedre. Husk, at du altid kan forenkle tingene ved at bruge et analyseværktøj som Google Analytics.