Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Prikazi stranice važna su metrika za praćenje izvedbe weba. Softverski alati kao što su Google Analytics i Fathom pružaju jednostavan način za to pomoću vanjske skripte.

Ali možda ne želite koristiti biblioteku treće strane. U tom slučaju možete koristiti bazu podataka za praćenje posjetitelja vaše stranice.

Supabase je Firebase alternativa otvorenog koda koja vam može pomoći u praćenju pregleda stranica u stvarnom vremenu.

Pripremite svoje web mjesto za početak praćenja prikaza stranica

Morate imati Next.js blog da biste pratili ovaj vodič. Ako ga već nemate, možete izradite blog temeljen na Markdownu koristeći react-markdown.

Također možete klonirati službeni Next.js početni predložak bloga iz njegovog GitHub spremište.

Supabase je Firebase alternativa koja pruža Postgres bazu podataka, autentifikaciju, instant API-je, rubne funkcije, pretplate u stvarnom vremenu i pohranu.

instagram viewer

Koristit ćete ga za pohranjivanje prikaza stranica za svaki post na blogu.

Stvorite Supabase bazu podataka

Idi na Web stranica Supabase i prijavite se ili prijavite za račun.

Na nadzornoj ploči Supabase kliknite na Novi projekt i odaberite organizaciju (Supabase će stvoriti organizaciju pod korisničkim imenom vašeg računa).

Unesite naziv projekta i lozinku, a zatim kliknite Stvorite novi projekt.

Na stranici s postavkama u odjeljku API kopirajte URL projekta te javne i tajne ključeve.

Otvori .env.lokalno datoteku u projektu Next.js i kopirajte ove pojedinosti API-ja.

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

Zatim idite na SQL editor i kliknite na Novi upit.

Koristiti standardna SQL naredba za izradu tablice nazvao pogleda.

STVORITISTOL prikaza (\n iskaznicabigintGENERIRANOPOZADANOKAOIDENTITET PRIMARNO KLJUČ,\n puž tekstJEDINSTVENONENULL,\n broj_gledanja bigintZADANO1NENULL,\n ažurirano_at vremenska oznakaZADANOSADA() NENULL\n);\n

Alternativno, možete koristiti uređivač tablice za izradu tablice prikaza:

Uređivač tablice nalazi se u lijevom oknu nadzorne ploče.

Stvorite Supabase pohranjenu proceduru za ažuriranje pogleda

Postgres ima ugrađenu podršku za SQL funkcije koje možete pozvati putem Supabase API-ja. Ova funkcija bit će odgovorna za povećanje broja pregleda u tablici prikaza.

Za izradu funkcije baze podataka slijedite ove upute:

  1. Idite na odjeljak SQL uređivača na lijevom oknu.
  2. Pritisnite Novi upit.
  3. Dodajte ovaj SQL upit za stvaranje funkcije baze podataka. 
    STVORITIILIZAMIJENITIFUNKCIJA update_views (page_slug TEKST)
    POVRATAK poništiti
    JEZIK plpgsql
    KAO $$
    POČETI
     AKO POSTOJI (IZABERIIZ pogleda GDJE slug=page_slug) ZATIM
    AŽURIRAJ pogleda
    SET broj_pregleda = broj_pregleda + 1,
     ažurirano_na = sada()
     WHERE slug = slug_stranice;
    DRUGO
    UMETNUTIu pogledi (puž) VRIJEDNOSTI (slug_stranice);
    KRAJAKO;
    KRAJ;
    $$;
  4. Pritisnite Pokreni ili Cmd + Enter (Ctrl + Enter) da biste izvršili upit.

Ova SQL funkcija zove se update_views i prihvaća tekstualni argument. Prvo provjerava postoji li taj post na blogu već u tablici i ako postoji, povećava broj pregleda za 1. Ako nije, stvara se novi unos za objavu čiji je broj pregleda zadano 1.

Postavite Supabase klijenta u Next.js

Instalirajte i konfigurirajte Supabase

Instalirajte paket @supabase/supabase-js putem npm-a za povezivanje s bazom podataka iz Next.js.

npm instalirati @supabase/supabase-js\n

Zatim stvorite a /lib/supabase.ts datoteku u korijenu vašeg projekta i inicijalizirajte Supabase klijent.

uvoz {kreirajKlijenta} iz'@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

Ne zaboravite da ste spremili vjerodajnice za API u .env.local kada ste kreirali bazu podataka.

Ažurirajte prikaze stranica

Napravite API rutu koja dohvaća prikaze stranica iz Supabasea i ažurira broj pregleda svaki put kada korisnik posjeti stranicu.

Ovu ćete rutu izraditi u /api folder unutar datoteke tzv prikazi/[slug].ts. Korištenje zagrada oko naziva datoteke stvara dinamičnu rutu. Podudarni parametri bit će poslani kao parametar upita koji se zove slug.

uvoz {supabase} iz"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } iz"Sljedeći";\nconst rukovatelj = asinkroni (req: NextApiRequest, res: NextApiResponse) => {\n ako (potrebna metoda "POST") {\n čekati supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n povratak res.status(200).json({\n poruka: "Uspjeh",\n });\n }\n ako (potrebna metoda "DOBITI") {\n konst { podaci } = čekati supabase\n .from("pregledi")\n .odaberi("brojac pregleda")\n .filter("puž", "eq", req.query.slug);\n ako (podaci) {\n povratak res.status(200).json({\n ukupno: podaci[0]?.view_count || 0,\n });\n }\n }\n povratak res.status(400).json({\n poruka: "Neispravan zahtjev",\n });\n};\nizvoz zadano rukovatelj;\n

Prva naredba if provjerava je li zahtjev POST zahtjev. Ako jest, poziva SQL funkciju update_views i prosljeđuje slug kao argument. Funkcija će povećati broj pogleda ili stvoriti novi unos za ovaj post.

Druga if naredba provjerava je li zahtjev GET metoda. Ako jest, dohvaća ukupan broj pregleda za taj post i vraća ga.

Ako zahtjev nije POST ili GET zahtjev, funkcija rukovatelja vraća poruku "Nevažeći zahtjev".

Dodajte prikaze stranica blogu

Da biste pratili prikaze stranica, morate pritisnuti API rutu svaki put kada korisnik navigira na stranicu.

Započnite instaliranjem swr paketa. Koristit ćete ga za dohvaćanje podataka iz API-ja.

npm instalirati swr\n

swr označava stale while revalidate. Omogućuje vam prikaz prikaza korisniku dok u pozadini dohvaćate ažurirane podatke.

Zatim stvorite novu komponentu pod nazivom viewsCounter.tsx i dodajte sljedeće:

uvoz koristiti SWR iz"swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = asinkroni (unos: RequestInfo) => {\n konst res: Odgovor = čekati dohvaćanje (unos);\n povratakčekati res.json();\n};\nconst Brojač prikaza = ({slug}: Rekviziti) => {\nconst { data } = useSWR(`/api/views/${slug}`, dohvaćač);\npovratak (\n {`${\n (podaci?.ukupno)? podaci.ukupno:"0"\n} pogleda`}</span>\n );\n};\neizvoz zadanog brojača prikaza;\n

Ova komponenta prikazuje ukupne preglede za svaki blog. Prihvaća slag objave kao potporu i koristi tu vrijednost za slanje zahtjeva API-ju. Ako API vraća prikaze, prikazuje tu vrijednost, inače prikazuje "0 pregleda".

Da biste registrirali prikaze, dodajte sljedeći kod u komponentu koja prikazuje svaki post.

uvoz { useEffect } iz"reagirati";\nimport Brojač prikaza iz"../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }: Rekviziti) => {\n useEffect(() => {\n dohvati(`/api/views/${slug}`, {\n metoda: 'POST'\n });\n }, [pužić]);\npovratak (\n 
\n \n // sadržaj bloga\n 

\n)\n}\neizvezi zadani post\n

Provjerite bazu podataka Supabase kako biste vidjeli kako se broj pregleda ažurira. Trebao bi se povećati za 1 svaki put kada posjetite post.

Praćenje više od prikaza stranice

Prikazi stranice vam govore koliko korisnika posjećuje određene stranice na vašem web-mjestu. Možete vidjeti koje stranice imaju dobru izvedbu, a koje ne.

Da biste išli još dalje, pratite preporuku svog posjetitelja da biste vidjeli odakle dolazi promet ili izradite nadzornu ploču kako biste bolje vizualizirali podatke. Imajte na umu da uvijek možete pojednostaviti stvari pomoću alata za analizu kao što je Google Analytics.