Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Afișările de pagină sunt o valoare importantă pentru urmărirea performanței web. Instrumente software precum Google Analytics și Fathom oferă o modalitate simplă de a face acest lucru cu un script extern.

Dar poate că nu doriți să utilizați o bibliotecă terță parte. Într-un astfel de caz, puteți utiliza o bază de date pentru a urmări vizitatorii site-ului dvs.

Supabase este o alternativă Firebase open-source care vă poate ajuta să urmăriți vizualizările paginii în timp real.

Pregătiți-vă site-ul pentru a începe să urmăriți vizualizările paginii

Trebuie să aveți un blog Next.js pe care să îl urmați împreună cu acest tutorial. Dacă nu ai deja unul, poți creați un blog bazat pe Markdown folosind react-markdown.

De asemenea, puteți clona șablonul oficial de pornire a blogului Next.js din acesta GitHub repertoriu.

Supabase este o alternativă Firebase care oferă o bază de date Postgres, autentificare, API-uri instantanee, funcții Edge, abonamente în timp real și stocare.

instagram viewer

Îl vei folosi pentru a stoca vizualizările de pagină pentru fiecare postare de blog.

Creați o bază de date Supabase

Du-te la Site-ul Supabase și conectați-vă sau creați un cont.

Pe tabloul de bord Supabase, faceți clic pe Proiect nou și alegeți o organizație (Supabase va fi creat o organizație sub numele de utilizator al contului dvs.).

Completați numele proiectului și parola, apoi faceți clic Creați un nou proiect.

În pagina de setări din secțiunea API, copiați adresa URL a proiectului și cheile publice și secrete.

Deschide .env.local fișier în proiectul Next.js și copiați aceste detalii API.

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

Apoi, navigați la editorul SQL și faceți clic pe Interogare nouă.

Folosește comanda SQL standard pentru a crea un tabel numit vederi.

CREAMASA vizualizări (\n idbigintGENERATDEMOD IMPLICITLA FEL DEIDENTITATE PRIMAR CHEIE,\n slug textUNICNUNUL,\n view_count bigintMOD IMPLICIT1NUNUL,\n updated_at timestamp-ulMOD IMPLICITACUM() NUNUL\n);\n

Alternativ, puteți utiliza editorul de tabel pentru a crea tabelul de vizualizări:

Editorul de tabel se află în panoul din stânga al tabloului de bord.

Creați o procedură stocată Supabase pentru a actualiza vizualizările

Postgres are suport încorporat pentru funcțiile SQL pe care le puteți apela prin API-ul Supabase. Această funcție va fi responsabilă pentru creșterea numărului de vizualizări în tabelul de vizualizări.

Pentru a crea o funcție de bază de date, urmați aceste instrucțiuni:

  1. Accesați secțiunea Editor SQL din panoul din stânga.
  2. Faceți clic pe Interogare nouă.
  3. Adăugați această interogare SQL pentru a crea funcția de bază de date. 
    CREASAUA INLOCUIFUNCŢIE update_views (page_slug TEXT)
    SE INTOARCE gol
    LIMBA plpgsql
    LA FEL DE $$
    ÎNCEPE
     DACĂ EXISTĂ (SELECTAȚIDIN vederi UNDE slug=page_slug) APOI
    ACTUALIZAȚI vederi
    A STABILIT view_count = view_count + 1,
     updated_at = acum()
     WHERE slug = page_slug;
    ALTE
    INTRODUCEîn vizualizări (melc) VALORI (page_slug);
    SfârşitDACĂ;
    Sfârşit;
    $$;
  4. Faceți clic pe Run sau Cmd + Enter (Ctrl + Enter) pentru a executa interogarea.

Această funcție SQL se numește update_views și acceptă un argument text. Mai întâi verifică dacă acea postare de blog există deja în tabel și, dacă există, își crește numărul de vizionări cu 1. Dacă nu, creează o nouă intrare pentru postarea al cărei număr de vizionări este implicit 1.

Configurați clientul Supabase în Next.js

Instalați și configurați Supabase

Instalați pachetul @supabase/supabase-js prin npm pentru a vă conecta la baza de date din Next.js.

instalare npm @supabase/supabase-js\n

Apoi, creați un /lib/supabase.ts fișier în rădăcina proiectului și inițializați clientul Supabase.

import { createClient } din„@supabase/supabase-js”;\nconst supabaseUrl: șir = process.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: șir = process.env. SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient (supabaseUrl, supabaseServerKey);\nexport { supabase };\n

Amintiți-vă că ați salvat acreditările API în .env.local când ați creat baza de date.

Actualizați vizualizările de pagină

Creați o rută API care preia vizualizările paginii din Supabase și actualizează numărul de vizualizări de fiecare dată când un utilizator vizitează o pagină.

Veți crea acest traseu în /api folder din interiorul unui fișier numit vederi/[slug].ts. Utilizarea parantezelor în jurul numelui fișierului creează o rută dinamică. Parametrii potriviți vor fi trimiși ca parametru de interogare numit slug.

import { supabaza } din„../../../lib/supabase/admin”;\nimport { NextApiRequest, NextApiResponse } din"Următorul";\nconst handler = asincron (req: NextApiRequest, res: NextApiResponse) => {\n dacă (metoda solicitată "POST") {\n așteaptă supabase.rpc(„update_views”, {\n page_slug: req.query.slug,\n });\n întoarcere starea res.(200).json({\n mesaj: "Succes",\n });\n }\n dacă (metoda solicitată "OBȚINE") {\n const { date } = așteaptă supabaza\n .din("viziuni")\n .selectați(„view_count”)\n .filtru("melc", "echivalent", req.query.slug);\n dacă (date) {\n întoarcere starea res.(200).json({\n total: date[0]?.view_count || 0,\n });\n }\n }\n întoarcere starea res.(400).json({\n mesaj: "Cerere invalida",\n });\n};\nexport Mod implicit handler;\n

Prima instrucțiune if verifică dacă cererea este o solicitare POST. Dacă este, apelează funcția SQL update_views și trece în slug ca argument. Funcția va crește numărul de vizualizări sau va crea o nouă intrare pentru această postare.

A doua instrucțiune if verifică dacă cererea este o metodă GET. Dacă este, preia numărul total de vizionări pentru acea postare și îl returnează.

Dacă cererea nu este o solicitare POST sau GET, funcția de gestionare returnează un mesaj „Solicitare invalidă”.

Adăugați vizualizări de pagină pe blog

Pentru a urmări vizualizările paginii, trebuie să accesați ruta API de fiecare dată când un utilizator navighează la o pagină.

Începeți prin a instala pachetul swr. Îl veți folosi pentru a prelua datele din API.

npm instalare swr\n

swr înseamnă stale while revalidate. Vă permite să afișați vizualizările utilizatorului în timp ce preluați date actualizate în fundal.

Apoi creați o nouă componentă numită viewsCounter.tsx și adăugați următoarele:

import utilizați SWR din"swr";\nInterfață Props {\n slug: șir;\n}\nconst fetcher = asincron (intrare: RequestInfo) => {\n const res: Răspuns = așteaptă prelua (intrare);\n întoarcereașteaptă res.json();\n};\nconst ViewsCounter = ({ slug }: Recuzită) => {\nconst { date } = useSWR(`/api/views/${slug}`, aducător);\nîntoarcere (\n {`${\n (date?.total)? date.total :"0"\n } vederi`}</span>\n );\n};\nexportați ViewsCounter implicit;\n

Această componentă redă vizionările totale pentru fiecare blog. Acceptă slug-ul unei postări ca suport și folosește acea valoare pentru a face cererea către API. Dacă API-ul returnează vizualizări, afișează acea valoare, altfel afișează „0 vizualizări”.

Pentru a înregistra vizualizări, adăugați următorul cod la componenta care redă fiecare postare.

import { useEffect } din"reacţiona";\nimport ViewsCounter din„../../components/viewsCounter”;\nInterfață Props {\n slug: șir;\n}\nconst Post = ({ slug }: Recuzită) => {\n useEffect(() => {\n aduce(`/api/views/${slug}`, {\n metoda: 'POST'\n });\n }, [melc]);\nîntoarcere (\n 
\n \n // conținut blog\n 

\n)\n}\nexportați Postarea implicită\n

Verificați baza de date Supabase pentru a vedea cum se actualizează numărul de vizualizări. Ar trebui să crească cu 1 de fiecare dată când accesați o postare.

Urmărirea mai mult decât afișările de pagină

Afișările de pagină vă permit să știți câți utilizatori vizitează anumite pagini de pe site-ul dvs. Puteți vedea ce pagini funcționează bine și care nu.

Pentru a merge și mai departe, ține evidența referinței vizitatorului pentru a vedea de unde vine traficul sau creează un tablou de bord pentru a ajuta la vizualizarea mai bună a datelor. Amintiți-vă că puteți simplifica oricând lucrurile folosind un instrument de analiză precum Google Analytics.