Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Ogledi strani so pomembna metrika za sledenje spletne uspešnosti. Programska orodja, kot sta Google Analytics in Fathom, omogočajo preprost način za to z zunanjim skriptom.

Morda pa ne želite uporabljati knjižnice drugega proizvajalca. V takem primeru lahko uporabite zbirko podatkov za spremljanje obiskovalcev vašega spletnega mesta.

Supabase je odprtokodna alternativa Firebase, ki vam lahko pomaga spremljati oglede strani v realnem času.

Pripravite svoje spletno mesto za začetek sledenja ogledom strani

Če želite slediti tej vadnici, morate imeti blog Next.js. Če ga še nimate, ga lahko ustvarite blog, ki temelji na Markdownu, z uporabo react-markdown.

Prav tako lahko klonirate uradno začetno predlogo bloga Next.js iz njenega GitHub repozitorij.

Supabase je alternativa Firebase, ki ponuja bazo podatkov Postgres, avtentikacijo, takojšnje API-je, funkcije Edge, naročnine v realnem času in shranjevanje.

instagram viewer

Uporabili ga boste za shranjevanje ogledov strani za vsako objavo v spletnem dnevniku.

Ustvarite bazo podatkov Supabase

Pojdi na Spletno mesto Supabase in se prijavite ali prijavite za račun.

Na nadzorni plošči Supabase kliknite na Nov projekt in izberite organizacijo (Supabase bo ustvaril organizacijo pod uporabniškim imenom vašega računa).

Vnesite ime projekta in geslo ter kliknite Ustvari nov projekt.

Na strani z nastavitvami v razdelku API kopirajte URL projekta ter javni in tajni ključ.

Odprite .env.local datoteko v projektu Next.js in kopirajte te podrobnosti API-ja.

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

Nato se pomaknite do urejevalnika SQL in kliknite Nova poizvedba.

Uporabi standardni ukaz SQL za ustvarjanje tabele klical pogledi.

USTVARJANJETABELA pogledi (\n idbigintGENERIRANOBYPRIVZETOASIDENTITETA PRIMARNO KLJUČ,\n polž besediloUNIKATNONENIČ,\n število ogledov bigintPRIVZETO1NENIČ,\n posodobljeno_at časovni žigPRIVZETOZDAJ() NENIČ\n);\n

Lahko pa uporabite urejevalnik tabel, da ustvarite tabelo s pogledi:

Urejevalnik tabel je na levem podoknu nadzorne plošče.

Ustvarite shranjeno proceduro Supabase za posodobitev pogledov

Postgres ima vgrajeno podporo za funkcije SQL, ki jih lahko pokličete prek API-ja Supabase. Ta funkcija bo odgovorna za povečanje števila ogledov v tabeli ogledov.

Če želite ustvariti funkcijo baze podatkov, sledite tem navodilom:

  1. Pojdite na razdelek urejevalnika SQL v levem podoknu.
  2. Kliknite Nova poizvedba.
  3. Dodajte to poizvedbo SQL, da ustvarite funkcijo baze podatkov. 
    USTVARJANJEALIZAMENJATIFUNKCIJA update_views (page_slug BESEDILO)
    VRAČILA praznina
    JEZIK plpgsql
    AS $$
    ZAČETI
     ČE OBSTAJA (IZBERIOD pogledi KJE slug=page_slug) POTEM
    NADGRADNJA pogledi
    NASTAVI število_ogledov = število_ogledov + 1,
     posodobljen_pri = zdaj()
     WHERE slug = stran_slug;
    DRUGEGA
    VSTAVIv pogledi (polžek) VREDNOTE (page_slug);
    KONECČE;
    KONEC;
    $$;
  4. Kliknite Zaženi ali Cmd + Enter (Ctrl + Enter), da izvedete poizvedbo.

Ta funkcija SQL se imenuje update_views in sprejme besedilni argument. Najprej preveri, ali ta objava v spletnem dnevniku že obstaja v tabeli, in če obstaja, poveča število ogledov za 1. Če se ne, ustvari nov vnos za objavo, katere število ogledov je privzeto 1.

Nastavite odjemalca Supabase v Next.js

Namestite in konfigurirajte Supabase

Namestite paket @supabase/supabase-js prek npm za povezavo z bazo podatkov iz Next.js.

namestitev npm @supabase/supabase-js\n

Nato ustvarite a /lib/supabase.ts datoteko v korenu vašega projekta in inicializirajte odjemalca Supabase.

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

Ne pozabite, da ste poverilnice API-ja shranili v .env.local, ko ste ustvarili bazo podatkov.

Posodobite oglede strani

Ustvarite API pot, ki pridobi oglede strani iz Supabase in posodobi število ogledov vsakič, ko uporabnik obišče stran.

To pot boste ustvarili v /api mapa znotraj datoteke, imenovane pogledi/[slug].ts. Uporaba oklepajev okoli imena datoteke ustvari dinamično pot. Ujemajoči se parametri bodo poslani kot poizvedbeni parameter, imenovan slug.

uvoz {supabase} od"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } od"Naslednji";\nconst handler = asinh (req: NextApiRequest, res: NextApiResponse) => {\n če (zahtevana metoda "POST") {\n čakati supabase.rpc("update_views", {\n stran_slug: req.query.slug,\n });\n vrnitev res.status(200).json({\n sporočilo: "Uspeh",\n });\n }\n če (zahtevana metoda "DOBITI") {\n konst { podatki } = čakati supabase\n .from("ogledi")\n .select("view_count")\n .filter("polžek", "eq", req.query.slug);\n če (podatki) {\n vrnitev res.status(200).json({\n skupaj: podatki[0]?.view_count || 0,\n });\n }\n }\n vrnitev res.status(400).json({\n sporočilo: "Neveljavna Zahteva",\n });\n};\neizvozi privzeto upravljavec;\n

Prvi stavek if preveri, ali je zahteva zahteva POST. Če je, pokliče funkcijo SQL update_views in posreduje polžek kot argument. Funkcija bo povečala število ogledov ali ustvarila nov vnos za to objavo.

Drugi stavek if preveri, ali je zahteva metoda GET. Če je, pridobi skupno število ogledov za to objavo in ga vrne.

Če zahteva ni zahteva POST ali GET, funkcija obravnave vrne sporočilo »Neveljavna zahteva«.

Blogu dodajte oglede strani

Če želite slediti ogledom strani, morate zadeti API pot vsakič, ko uporabnik navigira na stran.

Začnite z namestitvijo paketa swr. Uporabili ga boste za pridobivanje podatkov iz API-ja.

npm namestite swr\n

swr pomeni stale while revalidate. Omogoča vam, da prikažete poglede uporabniku, medtem ko v ozadju pridobivate posodobljene podatke.

Nato ustvarite novo komponento z imenom viewsCounter.tsx in dodajte naslednje:

uvoz uporabiteSWR od"swr";\ninterface Props {\n slug: niz;\n}\nconst fetcher = asinh (vnos: RequestInfo) => {\n konst res: Odgovor = čakati pridobi (vnos);\n vrnitevčakati res.json();\n};\nconst ViewsCounter = ({ polž }: Rekviziti) => {\nconst { data } = useSWR(`/api/views/${slug}`, prinašalec);\nvrni (\n {`${\n (podatki?.skupaj)? data.total:"0"\n } pogledi`}</span>\n );\n};\neizvozi privzeti števec ogledov;\n

Ta komponenta prikaže skupno število ogledov za vsak blog. Sprejme polžek objave kot prop in to vrednost uporabi za zahtevo API-ju. Če API vrne poglede, prikaže to vrednost, sicer pa prikaže »0 ogledov«.

Če želite registrirati poglede, dodajte naslednjo kodo komponenti, ki upodablja vsako objavo.

uvoz { useEffect } od"reagirati";\nimport Števec ogledov od"../../components/viewsCounter";\ninterface Props {\n slug: niz;\n}\nconst Post = ({ polž }: Rekviziti) => {\n useEffect(() => {\n pridobi(`/api/views/${slug}`, {\n metoda: 'POST'\n });\n }, [polžek]);\nvrni (\n 
\n \n // vsebina bloga\n 

\n)\n}\nizvozi privzeto objavo\n

Preverite zbirko podatkov Supabase, da vidite, kako se posodablja število ogledov. Vsakič, ko obiščete objavo, se mora povečati za 1.

Sledenje več kot ogledom strani

Ogledi strani vam povedo, koliko uporabnikov obišče določene strani na vašem spletnem mestu. Vidite lahko, katere strani so uspešne in katere ne.

Če želite iti še dlje, spremljajte napotitelja vašega obiskovalca, da vidite, od kod prihaja promet, ali ustvarite nadzorno ploščo, ki vam bo pomagala bolje prikazati podatke. Ne pozabite, da lahko stvari vedno poenostavite z uporabo analitičnega orodja, kot je Google Analytics.