Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Puslapių peržiūros yra svarbi žiniatinklio našumo stebėjimo metrika. Programinės įrangos įrankiai, tokie kaip „Google Analytics“ ir „Fathom“, yra paprastas būdas tai padaryti naudojant išorinį scenarijų.

Bet galbūt nenorite naudoti trečiosios šalies bibliotekos. Tokiu atveju galite naudoti duomenų bazę, kad galėtumėte stebėti savo svetainės lankytojus.

„Supabase“ yra atvirojo kodo „Firebase“ alternatyva, kuri gali padėti stebėti puslapių peržiūras realiuoju laiku.

Paruoškite savo svetainę pradėti stebėti puslapių peržiūras

Norėdami sekti šią mokymo programą, turite turėti Next.js tinklaraštį. Jei dar neturite, galite sukurti Markdown pagrįstą tinklaraštį naudodami react-markdown.

Taip pat galite klonuoti oficialų Next.js tinklaraščio pradžios šabloną iš jo GitHub saugykla.

„Supabase“ yra „Firebase“ alternatyva, teikianti „Postgres“ duomenų bazę, autentifikavimą, momentines API, „Edge“ funkcijas, prenumeratas realiuoju laiku ir saugyklą.

instagram viewer

Jį naudosite kiekvieno tinklaraščio įrašo puslapių peržiūroms išsaugoti.

Sukurkite „Supabase“ duomenų bazę

Eikite į Supabase svetainė ir prisijunkite arba prisiregistruokite prie paskyros.

Supabase prietaisų skydelyje spustelėkite Naujas projektas ir pasirinkite organizaciją („Supabase“ sukurs organizaciją jūsų paskyros naudotojo vardu).

Įveskite projekto pavadinimą ir slaptažodį, tada spustelėkite Sukurti naują projektą.

Nustatymų puslapyje, esančiame API skiltyje, nukopijuokite projekto URL ir viešuosius bei slaptuosius raktus.

Atidaryk .env.local failą Next.js projekte ir nukopijuokite šią API informaciją.

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

Tada eikite į SQL redaktorių ir spustelėkite Nauja užklausa.

Naudoti standartinė SQL komanda lentelei sukurti paskambino Peržiūros.

KURTILENTELĖ peržiūros (\n idbigintSUgeneruotaBYNUMATYTASASTAPATYBĖ PAGRINDINĖ RAKTAS,\n šliužas tekstąUNIKALUSNENULL,\n peržiūrų_skaičius bigintNUMATYTAS1NENULL,\n atnaujinta_at laiko žymaNUMATYTASDABAR() NENULL\n);\n

Arba galite naudoti lentelių rengyklę, kad sukurtumėte rodinių lentelę:

Lentelės redaktorius yra kairėje prietaisų skydelio srityje.

Sukurkite „Supabase“ saugomą procedūrą rodiniams atnaujinti

Postgres turi integruotą SQL funkcijų palaikymą, kurią galite iškviesti per Supabase API. Ši funkcija bus atsakinga už peržiūrų skaičiaus didinimą peržiūrų lentelėje.

Norėdami sukurti duomenų bazės funkciją, vadovaukitės šiomis instrukcijomis:

  1. Eikite į SQL redaktoriaus skyrių kairėje srityje.
  2. Spustelėkite Nauja užklausa.
  3. Pridėkite šią SQL užklausą, kad sukurtumėte duomenų bazės funkciją. 
    KURTIARBAPAKEISTIFUNKCIJA update_views (page_slug TEKSTAS)
    GRĄŽINA tuštuma
    KALBA plpgsql
    AS $$
    PRADĖTI
     JEI YRA (PASIRINKTINUO Peržiūros KUR slug=page_slug) TADA
    ATNAUJINTI Peržiūros
    NUSTATYTI peržiūrų_skaičius = peržiūrų_skaičius + 1,
     atnaujinta_at = dabar()
     WHERE šliužas = page_slug;
    KITAS
    ĮDĖTIį peržiūros (šliužas) VERTYBĖS (puslapis_šliužas);
    GALASJEI;
    GALAS;
    $$;
  4. Spustelėkite Vykdyti arba Cmd + Enter (Ctrl + Enter), kad vykdytumėte užklausą.

Ši SQL funkcija vadinama update_views ir priima tekstinį argumentą. Pirmiausia patikrinama, ar tas tinklaraščio įrašas jau yra lentelėje, o jei yra, peržiūrų skaičius padidėja 1. Jei ne, sukuriamas naujas įrašo įrašas, kurio numatytasis peržiūrų skaičius yra 1.

„Next.js“ nustatykite „Supabase“ klientą

Įdiekite ir sukonfigūruokite „Supabase“.

Įdiekite paketą @supabase/supabase-js per npm, kad prisijungtumėte prie duomenų bazės iš Next.js.

npm diegimas @supabase/supabase-js\n

Tada sukurkite a /lib/supabase.ts failą savo projekto šaknyje ir inicijuokite Supabase klientą.

importuoti { CreateClient } iš„@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

Atminkite, kad kurdami duomenų bazę išsaugojote API kredencialus .env.local.

Atnaujinti puslapio peržiūras

Sukurkite API maršrutą, kuris paima puslapio peržiūras iš Supabase ir atnaujina peržiūrų skaičių kiekvieną kartą, kai vartotojas apsilanko puslapyje.

Šį maršrutą sukursite /api aplankas, esantis faile, pavadintame peržiūros/[šliužas].ts. Naudojant skliaustus aplink failo pavadinimą sukuriamas dinaminis maršrutas. Atitikti parametrai bus siunčiami kaip užklausos parametras, vadinamas slug.

importuoti { supabase } iš"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } iš"Kitas";\nconst tvarkytojas = async (req: NextApiRequest, res: NextApiResponse) => {\n jeigu (req.metod "POST") {\n laukti supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n grąžinti res.status(200.json({\n pranešimas: "Sėkmė",\n });\n }\n jeigu (req.metod "GAUTI") {\n konst { duomenys } = laukti supabase\n .from("Peržiūros")\n .select("view_count")\n .filter("šliužas", "ekv", req.query.slug);\n jeigu (duomenys) {\n grąžinti res.status(200.json({\n iš viso: duomenys[0]?.view_count || 0,\n });\n }\n }\n grąžinti res.status(400.json({\n pranešimas: "Neteisingas Prašymas",\n });\n};\neksportuoti numatytas tvarkytojas;\n

Pirmasis if sakinys patikrina, ar užklausa yra POST užklausa. Jei taip, ji iškviečia SQL funkciją update_views ir pateikia slug kaip argumentą. Funkcija padidins peržiūrų skaičių arba sukurs naują šio įrašo įrašą.

Antrasis if sakinys patikrina, ar užklausa yra GET metodas. Jei taip, jis gauna bendrą to įrašo peržiūrų skaičių ir grąžina jį.

Jei užklausa nėra POST arba GET užklausa, tvarkyklės funkcija grąžina pranešimą „Neteisinga užklausa“.

Pridėkite puslapių peržiūras į tinklaraštį

Norėdami stebėti puslapio peržiūras, kiekvieną kartą, kai vartotojas naršo į puslapį, turite pasiekti API maršrutą.

Pradėkite diegdami swr paketą. Jį naudosite norėdami gauti duomenis iš API.

npm diegti swr\n

swr reiškia pasenusi, o patvirtinti pakartotinai. Tai leidžia vartotojui rodyti rodinius ir gauti naujausius duomenis fone.

Tada sukurkite naują komponentą, pavadintą viewsCounter.tsx ir pridėkite:

importuoti naudoti SWR iš"swr";\nsąsajos rekvizitai {\n slug: string;\n}\nconst fetcher = async (įvestis: RequestInfo) => {\n konst res: Atsakymas = laukti gauti (įvestis);\n grąžintilaukti res.json();\n};\nconst ViewsCounter = ({ šliužas }: rekvizitas) => {\nconst { data } = useSWR(`/api/views/${slug}`, atnešėjas);\nreturn (\n {`${\n (duomenys?.iš viso)? data.total :"0"\n } peržiūros“.}</span>\n );\n};\neksportuoti numatytąjį ViewsCounter;\n

Šis komponentas pateikia bendrą kiekvieno tinklaraščio peržiūrų skaičių. Jis priima įrašo šliužą kaip rekvizitą ir naudoja šią reikšmę pateikdamas užklausą API. Jei API pateikia rodinius, ji rodo tą reikšmę, kitu atveju rodoma „0 rodinių“.

Norėdami užregistruoti rodinius, pridėkite šį kodą prie komponento, kuris pateikia kiekvieną įrašą.

importuoti { useEffect } iš"reaguoti";\nimportuoti ViewsCounter iš"../../components/viewsCounter";\nsąsajos rekvizitai {\n slug: string;\n}\nconst Post = ({ šliužas }: Rekvizitas) => {\n useEffect(() => {\n gauti(`/api/views/${slug}`, {\n metodas: „PASKELBTI“\n });\n }, [šliužas]);\nreturn (\n 
\n \n // tinklaraščio turinys\n 

\n)\n}\neksportuoti numatytąjį įrašą\n

Patikrinkite Supabase duomenų bazę, kad sužinotumėte, kaip atnaujinamas peržiūrų skaičius. Jis turėtų padidėti 1 kiekvieną kartą, kai apsilankote įraše.

Daugiau nei puslapių peržiūrų stebėjimas

Puslapių peržiūros leidžia sužinoti, kiek vartotojų apsilanko konkrečiuose jūsų svetainės puslapiuose. Galite matyti, kurie puslapiai veikia gerai, o kurie ne.

Jei norite eiti dar toliau, stebėkite lankytojo persiuntimo adresą, kad sužinotumėte, iš kur ateina srautas, arba sukurkite informacijos suvestinę, kuri padės geriau vizualizuoti duomenis. Atminkite, kad visada galite supaprastinti dalykus naudodami analizės įrankį, pvz., „Google Analytics“.