Kaip sekti puslapių peržiūras savo tinklaraštyje naudojant Supabase

Kaip sekti puslapių peržiūras savo tinklaraštyje naudojant Supabase
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ą.

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).



Supabase prietaisų skydelio ekrano kopija

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

Supabase projekto išsamios informacijos ekrano kopija

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

neveikia hisense roku televizoriaus nuotolinio valdymo pultas
Ekrano kopija, kurioje rodomi Supabase projekto API raktai

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 .

SQL redaktorius

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

 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

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

Supabase lentelės stulpeliai

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ą. 
     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; 
    $$;
  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 padidinamas 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 install @supabase/supabase-js\n

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

 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

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.

 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

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 install 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:

 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

Š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ų“.

kiek pakeisti „Mac“ bateriją

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

 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

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“.