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.

instagram viewer

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

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.

På indstillingssiden under API-sektionen skal du kopiere projektets URL og de offentlige og hemmelige 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.

SKABBORD visninger (\n idbigintGENERERETVEDSTANDARDSOMIDENTITET PRIMÆR NØGLE,\n snegl tekstENESTÅENDEIKKENUL,\n view_count bigintSTANDARD1IKKENUL,\n updated_at tidsstempelSTANDARDNU() IKKENUL\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:

  1. Gå til SQL-editor-sektionen i venstre rude.
  2. Klik på Ny forespørgsel.
  3. Tilføj denne SQL-forespørgsel for at oprette databasefunktionen. 
    SKABELLERERSTATTEFUNGERE update_views (side_slug TEKST)
    VENDER TILBAGE ugyldig
    SPROG plpgsql
    SOM $$
    BEGYNDE
     HVIS FINNES (VÆLGFRA visninger HVOR slug=side_slug) DEREFTER
    OPDATERING visninger
    SÆT view_count = view_count + 1,
     updated_at = nu()
     WHERE slug = side_slug;
    ANDET
    INDSÆTind i visninger (snegl) VÆRDIER (side_slug);
    ENDEHVIS;
    ENDE;
    $$;
  4. 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. Den tjekker først, om det blogindlæg allerede findes i tabellen, og hvis det gør det, øger det antallet af visninger med 1. Hvis den ikke gør det, opretter den en ny post for indlægget, hvis visningstal 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 installere @supabase/supabase-js\n

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

importere { createClient } fra'@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);\neksport { 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.

importere { supabase } fra"../../../lib/supabase/admin";\nimporter { NextApiRequest, NextApiResponse } fra"Næste";\nconst handler = asynkron (anmodning: NextApiRequest, res: NextApiResponse) => {\n hvis (anmodningsmetode "STOLPE") {\n vente supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n Vend tilbage res.status(200).json({\n besked: "Succes",\n });\n }\n hvis (anmodningsmetode "FÅ") {\n konst { data } = vente supabase\n .fra("visninger")\n .vælg("visningsantal")\n .filter("snegl", "ækv", req.query.slug);\n hvis (data) {\n Vend tilbage res.status(200).json({\n i alt: data[0]?.visningsantal || 0,\n });\n }\n }\n Vend tilbage res.status(400).json({\n besked: "Ugyldig forespørgsel",\n });\n};\neksporter Standard 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 installere 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:

importere brug SWR fra"swr";\ninterface Props {\n slug: streng;\n}\nconst henter = asynkron (input: RequestInfo) => {\n konst res: Svar = vente hente (input);\n Vend tilbagevente res.json();\n};\nconst ViewsCounter = ({ slug }: Rekvisitter) => {\nconst { data } = brugSWR(`/api/views/${slug}`, henter);\nretur (\n {`${\n (data?.total)? data.total :"0"\n } synspunkter`}</span>\n );\n};\neksporter standard 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.

importere { useEffect } fra"reagere";\nimporter ViewsCounter fra"../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }: Rekvisitter) => {\n useEffect(() => {\n hent(`/api/views/${slug}`, {\n metode: 'STOLPE'\n });\n }, [snegl]);\nretur (\n 
\n \n // blogindhold\n 

\n)\n}\neksporter standardindlæg\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.