Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Lapu skatījumi ir svarīgs rādītājs tīmekļa veiktspējas izsekošanai. Programmatūras rīki, piemēram, Google Analytics un Fathom, nodrošina vienkāršu veidu, kā to izdarīt, izmantojot ārēju skriptu.

Bet varbūt jūs nevēlaties izmantot trešās puses bibliotēku. Šādā gadījumā varat izmantot datu bāzi, lai sekotu līdzi savas vietnes apmeklētājiem.

Supabase ir atvērtā pirmkoda Firebase alternatīva, kas var palīdzēt sekot līdzi lapu skatījumiem reāllaikā.

Sagatavojiet savu vietni, lai sāktu izsekot lapu skatījumiem

Lai sekotu līdzi šai apmācībai, jums ir nepieciešams Next.js emuārs. Ja jums tāda vēl nav, varat izveidot uz Markdown balstītu emuāru, izmantojot react-markdown.

Varat arī klonēt oficiālo Next.js emuāra sākuma veidni no tās GitHub krātuve.

Supabase ir Firebase alternatīva, kas nodrošina Postgres datu bāzi, autentifikāciju, tūlītējas API, Edge funkcijas, reāllaika abonementus un krātuvi.

instagram viewer

Jūs to izmantosit, lai saglabātu katra emuāra ieraksta lapu skatījumus.

Izveidojiet Supabase datu bāzi

Dodieties uz Supabase vietne un pierakstieties vai reģistrējieties kontam.

Supabase informācijas panelī noklikšķiniet uz Jauns Projekts un izvēlieties organizāciju (Supabase būs izveidojusi organizāciju ar jūsu konta lietotājvārdu).

Ievadiet projekta nosaukumu un paroli, pēc tam noklikšķiniet uz Izveidojiet jaunu projektu.

Iestatījumu lapā sadaļā API kopējiet projekta URL un publisko un slepeno atslēgu.

Atveriet .env.local failu Next.js projektā un kopējiet šo API informāciju.

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

Pēc tam dodieties uz SQL redaktoru un noklikšķiniet uz Jauns vaicājums.

Izmantojiet standarta SQL komanda, lai izveidotu tabulu sauca skatījumi.

IZVEIDOTTABULA skatījumi (\n idbigintĢENERĒTSBYNOKLUSĒJUMSASIDENTITĀTE PRIMĀRS ATSLĒGA,\n gliemeža tekstuUNIKĀLSNAVNULL,\n skatījumu_skaits bigintNOKLUSĒJUMS1NAVNULL,\n atjaunināts_at laika zīmogsNOKLUSĒJUMSTAGAD() NAVNULL\n);\n

Varat arī izmantot tabulu redaktoru, lai izveidotu skatu tabulu:

Tabulas redaktors atrodas informācijas paneļa kreisajā rūtī.

Izveidojiet Supabase saglabāto procedūru skatu atjaunināšanai

Postgres ir iebūvēts atbalsts SQL funkcijām, kuras varat izsaukt, izmantojot Supabase API. Šī funkcija būs atbildīga par skatījumu skaita palielināšanu skatījumu tabulā.

Lai izveidotu datu bāzes funkciju, izpildiet šos norādījumus:

  1. Kreisajā rūtī atveriet sadaļu SQL redaktors.
  2. Noklikšķiniet uz Jauns vaicājums.
  3. Pievienojiet šo SQL vaicājumu, lai izveidotu datu bāzes funkciju. 
    IZVEIDOTVAIAIZVIETOTFUNKCIJA update_views (page_slug TEKSTS)
    ATGRIEŠANA nederīgs
    LANGUAGE plpgsql
    AS $$
    SĀKT
     JA PASTĀV (ATLASĪTNO skatījumi KUR slug=page_slug) TAD
    ATJAUNINĀT skatījumi
    IESTATĪT skatījumu_skaits = skatījumu_skaits + 1,
     atjaunināts_at = tagad()
     WHERE slug = page_slug;
    CITS
    IEVIETOTiekšā skati (gliemeža) VĒRTĪBAS (page_slug);
    BEIGASJA;
    BEIGAS;
    $$;
  4. Noklikšķiniet uz Palaist vai Cmd + Enter (Ctrl + Enter), lai izpildītu vaicājumu.

Šo SQL funkciju sauc par update_views, un tā pieņem teksta argumentu. Vispirms tiek pārbaudīts, vai šis emuāra ieraksts jau pastāv tabulā, un, ja ir, tas palielina skatījumu skaitu par 1. Ja tā nenotiek, tiek izveidots jauns ieraksts ziņojumam, kura skatījumu skaits pēc noklusējuma ir 1.

Iestatiet Supabase klientu programmā Next.js

Instalējiet un konfigurējiet Supabase

Instalējiet @supabase/supabase-js pakotni, izmantojot npm, lai izveidotu savienojumu ar datu bāzi no Next.js.

npm instalēšana @supabase/supabase-js\n

Pēc tam izveidojiet a /lib/supabase.ts failu sava projekta saknē un inicializējiet Supabase klientu.

imports { CreateClient } no'@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

Atcerieties, ka, veidojot datu bāzi, jūs saglabājāt API akreditācijas datus .env.local.

Atjaunināt lapu skatījumus

Izveidojiet API maršrutu, kas ienes lapu skatījumus no Supabase un atjaunina skatījumu skaitu ikreiz, kad lietotājs apmeklē lapu.

Jūs izveidosit šo maršrutu /api mape failā ar nosaukumu skati/[slug].ts. Izmantojot iekavas ap faila nosaukumu, tiek izveidots dinamisks maršruts. Atbilstošie parametri tiks nosūtīti kā vaicājuma parametrs, ko sauc par slug.

imports { supabase } no"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } no"Nākamais";\nconst apdarinātājs = asinhronā (pieprasījums: NextApiRequest, res: NextApiResponse) => {\n ja (req.metode "POSTĪT") {\n gaidīt supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n atgriezties res.status(200.json({\n ziņojums: "Veiksme",\n });\n }\n ja (req.metode "GŪT") {\n konst {dati} = gaidīt supabāze\n .from("skati")\n .select("skatījumu_skaits")\n .filter("gliemeža", "ekv", req.query.slug);\n ja (dati) {\n atgriezties res.status(200.json({\n kopā: dati[0]?.view_count || 0,\n });\n }\n }\n atgriezties res.status(400.json({\n ziņojums: "Nederīgs pieprasījums",\n });\n};\neksportēt noklusējuma apstrādātājs;\n

Pirmais if paziņojums pārbauda, ​​vai pieprasījums ir POST pieprasījums. Ja tā ir, tā izsauc SQL funkciju update_views un nodod slug kā argumentu. Funkcija palielinās skatījumu skaitu vai izveidos jaunu ierakstu šai ziņai.

Otrais if paziņojums pārbauda, ​​vai pieprasījums ir GET metode. Ja tā ir, tā ienes šīs ziņas kopējo skatījumu skaitu un atgriež to.

Ja pieprasījums nav POST vai GET pieprasījums, apstrādātāja funkcija atgriež ziņojumu “Nederīgs pieprasījums”.

Pievienojiet emuāram lapu skatījumus

Lai izsekotu lapu skatījumus, ikreiz, kad lietotājs dodas uz lapu, ir jānoklikšķina uz API maršruta.

Sāciet ar swr pakotnes instalēšanu. Jūs to izmantosit, lai iegūtu datus no API.

npm uzstādīt swr\n

swr apzīmē novecojušu, bet atkārtoti apstiprināt. Tas ļauj lietotājam parādīt skatus, vienlaikus ienesot jaunākos datus fonā.

Pēc tam izveidojiet jaunu komponentu ar nosaukumu viewsCounter.tsx un pievienojiet šo:

imports izmantot SWR no"swr";\ninterfeisa rekvizīti {\n slug: string;\n}\nconst fetcher = asinhronā (ievade: RequestInfo) => {\n konst res: Atbilde = gaidīt atnest (ievade);\n atgrieztiesgaidīt res.json();\n};\nconst ViewsCounter = ({ slug }: rekvizīti) => {\nconst { data } = useSWR(`/api/views/${slug}`, ienesējs);\natgriezties (\n {`${\n (dati?.kopā)? data.total :"0"\n } skatījumi”.}</span>\n );\n};\neksportēt noklusējuma ViewsCounter;\n

Šis komponents parāda kopējo skatījumu skaitu katram emuāram. Tas pieņem ziņas locekli kā palīgierīci un izmanto šo vērtību, lai iesniegtu pieprasījumu API. Ja API atgriež skatus, tā parāda šo vērtību, pretējā gadījumā tā parāda “0 skatījumu”.

Lai reģistrētu skatus, pievienojiet šo kodu komponentam, kas atveido katru ziņu.

imports { useEffect } no"reaģēt";\nimportēt ViewsCounter no"../../components/viewsCounter";\ninterfeisa rekvizīti {\n slug: string;\n}\nconst Post = ({ slug }: Rekvizīti) => {\n useEffect(() => {\n atnest(`/api/views/${slug}`, {\n metode: 'POST'\n });\n }, [slug]);\natgriezties (\n 
\n \n // emuāra saturs\n 

\n)\n}\neksportēt noklusējuma ziņu\n

Pārbaudiet Supabase datu bāzi, lai redzētu, kā tiek atjaunināts skatījumu skaits. Tam vajadzētu palielināties par 1 katru reizi, kad apmeklējat ziņu.

Vairāk nekā lapas skatījumu izsekošana

Lapu skatījumi ļauj uzzināt, cik lietotāju apmeklē konkrētas jūsu vietnes lapas. Varat redzēt, kuras lapas darbojas labi un kuras ne.

Lai iet vēl tālāk, sekojiet līdzi apmeklētāja novirzītājam, lai redzētu, no kurienes nāk datplūsma, vai izveidojiet informācijas paneli, lai palīdzētu labāk vizualizēt datus. Atcerieties, ka vienmēr varat vienkāršot lietas, izmantojot analītikas rīku, piemēram, Google Analytics.