Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Lehevaatamised on veebi toimivuse jälgimise oluline mõõdik. Tarkvaratööriistad, nagu Google Analytics ja Fathom, võimaldavad seda välise skripti abil lihtsalt teha.

Kuid võib-olla te ei soovi kasutada kolmanda osapoole raamatukogu. Sellisel juhul saate oma saidi külastajate jälgimiseks kasutada andmebaasi.

Supabase on avatud lähtekoodiga Firebase'i alternatiiv, mis aitab teil lehevaatamisi reaalajas jälgida.

Valmistage oma sait ette, et alustada lehevaatamiste jälgimist

Selle õpetuse jälgimiseks peab teil olema Next.js ajaveebi. Kui teil seda veel pole, saate Looge Markdownil põhinev ajaveeb, kasutades react-markdowni.

Samuti saate sellest kloonida ametliku Next.js ajaveebi käivitusmalli GitHub hoidla.

Supabase on Firebase'i alternatiiv, mis pakub Postgresi andmebaasi, autentimist, vahetuid API-sid, Edge'i funktsioone, reaalajas tellimusi ja salvestusruumi.

Kasutate seda iga ajaveebi postituse lehevaatamiste salvestamiseks.

Looge Supabase'i andmebaas

Mine lehele Supabase'i veebisait ja logige sisse või registreerige konto.

Klõpsake Supabase'i armatuurlaual nuppu Uus projekt ja valige organisatsioon (Supabase on loonud organisatsiooni teie konto kasutajanime all).

Sisestage projekti nimi ja parool, seejärel klõpsake Loo uus projekt.

Kopeerige API jaotise seadete lehel projekti URL ning avalikud ja salajased võtmed.

Ava .env.local faili Next.js projekti ja kopeerige need API üksikasjad.

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

Järgmisena liikuge SQL-redaktorisse ja klõpsake nuppu Uus päring.

Kasuta standardne SQL-käsk tabeli loomiseks helistas vaated.

LOOTABEL vaatamised (\n idbigintLOODUDKÕRVALVAIKESÄTEASIDENTITEET ESMANE VÕTI,\n nälkjas tekstUNIKAALNEMITTENULL,\n vaatamiste_arv bigintVAIKESÄTE1MITTENULL,\n uuendatud_at ajatempelVAIKESÄTEKOHE() MITTENULL\n);\n

Teise võimalusena saate vaadete tabeli loomiseks kasutada tabeliredaktorit.

Tabeliredaktor asub armatuurlaua vasakul paanil.

Looge vaadete värskendamiseks Supabase'i salvestatud protseduur

Postgresil on sisseehitatud tugi SQL-i funktsioonidele, mida saate Supabase API kaudu kutsuda. See funktsioon vastutab vaatamiste arvu suurendamise eest vaatamiste tabelis.

Andmebaasifunktsiooni loomiseks järgige neid juhiseid.

  1. Avage vasakpoolsel paanil SQL-redaktor.
  2. Klõpsake nuppu Uus päring.
  3. Lisage see SQL-päring andmebaasifunktsiooni loomiseks. 
    LOOVÕIASENDAFUNKTSIOON update_views (page_slug TEKST)
    TAGASTAB tühine
    KEEL plpgsql
    AS $$
    ALUSTA
     KUI OLEMAS (VALIFROM vaated KUS slug=page_slug) SIIS
    VÄRSKENDAMINE vaated
    SET vaatamiste_arv = vaatamiste_arv + 1,
     uuendatud_at = kohe()
     WHERE nälkjas = page_nälkjas;
    MUUD
    LISAsisse vaated (nälkjas) VÄÄRTUSED (lehekülg_nälkjas);
    LÕPPKUI;
    LÕPP;
    $$;
  4. Päringu käivitamiseks klõpsake käsku Käivita või Cmd + Enter (Ctrl + Enter).

Seda SQL-funktsiooni nimetatakse update_views ja see aktsepteerib tekstiargumendi. Esmalt kontrollib see, kas see ajaveebi postitus on tabelis juba olemas, ja kui on, suurendab see vaatamiste arvu 1 võrra. Kui seda ei juhtu, loob see postitusele uue kirje, mille vaatamiste arv on vaikimisi 1.

Seadistage Supabase'i klient rakenduses Next.js

Installige ja konfigureerige Supabase

Installige pakett @supabase/supabase-js npm kaudu, et luua ühenduse Next.js andmebaasiga.

npm installimine @supabase/supabase-js\n

Järgmisena looge a /lib/supabase.ts faili oma projekti juurfaili ja lähtestage Supabase'i klient.

importida { CreateClient } alates'@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

Pidage meeles, et salvestasite andmebaasi loomisel API mandaadid kausta .env.local.

Värskenda lehevaateid

Looge API marsruut, mis toob lehevaatamised Supabase'ist ja värskendab vaatamiste arvu iga kord, kui kasutaja lehte külastab.

Selle marsruudi loote lehel /api kaust failis nimega vaated/[nälkjas].ts. Sulgude kasutamine failinime ümber loob dünaamilise marsruudi. Sobitatud parameetrid saadetakse päringuparameetrina nimega slug.

importida { supabase } alates"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } alates"järgmine";\nconst handler = asünkr (nõu: NextApiRequest, res: NextApiResponse) => {\n kui (nõutav meetod "POSTITA") {\n ootama supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n tagasi res.status(200.json({\n sõnum: "Edu",\n });\n }\n kui (nõutav meetod "HANGI") {\n konst { andmed } = ootama supabase\n .from("vaated")\n .select("view_count")\n .filter("nälkjas", "ekv", req.query.slug);\n kui (andmed) {\n tagasi res.status(200.json({\n kokku: andmed[0]?.view_count || 0,\n });\n }\n }\n tagasi res.status(400.json({\n sõnum: "Vigane taotlus",\n });\n};\neksportida vaikimisi töötleja;\n

Esimene if-lause kontrollib, kas päring on POST-i päring. Kui on, kutsub see SQL-funktsiooni update_views ja edastab argumendina slugi. Funktsioon suurendab vaatamiste arvu või loob selle postituse jaoks uue kirje.

Teine if-lause kontrollib, kas päring on GET-meetod. Kui on, hangib see postituse vaatamiste koguarvu ja tagastab selle.

Kui päring ei ole POST- või GET-päring, tagastab töötleja funktsioon teate „Kehtetu päring”.

Lisage ajaveebi lehevaatamisi

Lehevaadete jälgimiseks peate tabama API marsruuti iga kord, kui kasutaja lehele navigeerib.

Alustage swr-paketi installimisega. Kasutate seda API-st andmete toomiseks.

npm installida swr\n

swr tähistab aegunud, samas kui revalidate. See võimaldab teil kuvada kasutajale vaateid, tuues samal ajal taustal ajakohaseid andmeid.

Seejärel looge uus komponent nimega viewsCounter.tsx ja lisage järgmine.

importida kasutage SWR-i alates"swr";\nliidese rekvisiidid {\n slug: string;\n}\nconst fetcher = asünkr (sisend: RequestInfo) => {\n konst res: Vastus = ootama too (sisend);\n tagasiootama res.json();\n};\nconst ViewsCounter = ({ slug }: rekvisiidid) => {\nconst { data } = useSWR(`/api/views/${slug}`, tooja);\ntagasi (\n {`${\n (andmed?.kokku)? data.total :"0"\n } vaated”.}</span>\n );\n};\neksportida vaikimisi ViewsCounter;\n

See komponent kuvab iga ajaveebi vaatamiste koguarvu. See aktsepteerib postituse nälkja rekvisiidina ja kasutab seda väärtust API-le taotluse esitamiseks. Kui API tagastab vaated, kuvab see selle väärtuse, vastasel juhul kuvatakse "0 vaadet".

Vaadete registreerimiseks lisage iga postitust renderdavale komponendile järgmine kood.

importida { useEffect } alates"reageerida";\nimport ViewsCounter alates"../../components/viewsCounter";\nliidese rekvisiidid {\n slug: string;\n}\nconst Postitus = ({ nälkjas }: Rekvisiidid) => {\n useEffect(() => {\n tõmba(`/api/views/${slug}`, {\n meetod: 'POSTI'\n });\n }, [nälkjas]);\nreturn (\n 
\n \n // ajaveebi sisu\n 

\n)\n}\neksportida vaikepostitus\n

Kontrollige Supabase'i andmebaasi, et näha, kuidas vaatamiste arv uueneb. See peaks suurenema 1 võrra iga kord, kui postitust külastate.

Jälgimine rohkem kui lehevaatamised

Lehevaatamised annavad teile teada, kui palju kasutajaid teie saidi konkreetseid lehti külastab. Näete, millised lehed toimivad hästi ja millised mitte.

Veelgi kaugemale minemiseks jälgige oma külastaja viitajat, et näha, kust liiklus tuleb, või looge armatuurlaud, mis aitab andmeid paremini visualiseerida. Pidage meeles, et saate alati asju lihtsustada, kasutades analüüsitööriista, nagu Google Analytics.