I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Le visualizzazioni di pagina sono una metrica importante per il monitoraggio delle prestazioni web. Strumenti software come Google Analytics e Fathom forniscono un modo semplice per farlo con uno script esterno.

Ma forse non vuoi usare una libreria di terze parti. In tal caso, puoi utilizzare un database per tenere traccia dei visitatori del tuo sito.

Supabase è un'alternativa Firebase open source che può aiutarti a tenere traccia delle visualizzazioni di pagina in tempo reale.

Prepara il tuo sito per iniziare a monitorare le visualizzazioni di pagina

Devi avere un blog Next.js per seguire questo tutorial. Se non ne hai già uno, puoi farlo creare un blog basato su Markdown utilizzando react-markdown.

Puoi anche clonare il modello ufficiale di avvio del blog Next.js dal suo Git Hub deposito.

Supabase è un'alternativa Firebase che fornisce un database Postgres, autenticazione, API istantanee, funzioni Edge, abbonamenti in tempo reale e archiviazione.

instagram viewer

Lo utilizzerai per memorizzare le visualizzazioni di pagina per ogni post del blog.

Crea un database Supabase

Vai al Sito web di Supabase e accedi o crea un account.

Nella dashboard di Supabase, fai clic su Nuovo progetto e scegli un'organizzazione (Supabase avrà creato un'organizzazione con il nome utente del tuo account).

Inserire il nome del progetto e la password, quindi fare clic Crea nuovo progetto.

Nella pagina delle impostazioni nella sezione API, copia l'URL del progetto e le chiavi pubblica e segreta.

Apri il .env.local file nel progetto Next.js e copia questi dettagli dell'API.

NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\N

Successivamente, vai all'editor SQL e fai clic su Nuova domanda.

Usa il comando SQL standard per creare una tabella chiamato visualizzazioni.

CREARETAVOLO visualizzazioni (\n idbigintGENERATODIPREDEFINITOCOMEIDENTITÀ PRIMARIO CHIAVE,\n lumaca testoUNICONONNULLO,\n view_count bigintPREDEFINITO1NONNULLO,\n aggiornato_at timestampPREDEFINITOORA() NONNULLO\n);\n

In alternativa, puoi utilizzare l'editor di tabelle per creare la tabella delle viste:

L'editor di tabelle si trova nel riquadro sinistro della dashboard.

Creare una procedura memorizzata Supabase per aggiornare le viste

Postgres ha il supporto integrato per le funzioni SQL che puoi chiamare tramite l'API Supabase. Questa funzione sarà responsabile dell'incremento del numero di visualizzazioni nella tabella delle visualizzazioni.

Per creare una funzione di database, seguire queste istruzioni:

  1. Vai alla sezione dell'editor SQL nel riquadro di sinistra.
  2. Fare clic su Nuova query.
  3. Aggiungi questa query SQL per creare la funzione di database. 
    CREAREOSOSTITUIREFUNZIONE update_views (page_slug TESTO)
    RITORNA vuoto
    LINGUA plpgsql
    COME $$
    INIZIO
     SE ESISTE (SELEZIONAREDA visualizzazioni DOVE slug=pagina_slug) POI
    AGGIORNAMENTO visualizzazioni
    IMPOSTATO view_count = view_count + 1,
     aggiornato_at = adesso()
     WHERE slug = page_slug;
    ALTRO
    INSERIREin visualizzazioni (slug) VALORI (page_slug);
    FINESE;
    FINE;
    $$;
  4. Fare clic su Esegui o Cmd + Invio (Ctrl + Invio) per eseguire la query.

Questa funzione SQL è chiamata update_views e accetta un argomento di testo. Innanzitutto controlla se il post del blog esiste già nella tabella e, in caso affermativo, incrementa il conteggio delle visualizzazioni di 1. In caso contrario, crea una nuova voce per il post il cui numero di visualizzazioni è impostato per impostazione predefinita su 1.

Configura il client Supabase in Next.js

Installa e configura Supabase

Installa il pacchetto @supabase/supabase-js tramite npm per connetterti al database da Next.js.

installazione npm @supabase/supabase-js\n

Quindi, crea un file /lib/supabase.ts file nella root del tuo progetto e inizializza il client Supabase.

importare { creaCliente } da'@supabase/supabase-js';\nconst supabaseUrl: stringa = process.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: stringa = process.env. SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient (supabaseUrl, supabaseServerKey);\nexport { supabase };\n

Ricorda che hai salvato le credenziali API in .env.local quando hai creato il database.

Aggiorna le visualizzazioni di pagina

Crea un percorso API che recupera le visualizzazioni di pagina da Supabase e aggiorna il conteggio delle visualizzazioni ogni volta che un utente visita una pagina.

Creerai questo percorso nel file /api cartella all'interno di un file chiamato views/[slug].ts. L'uso di parentesi attorno al nome del file crea un percorso dinamico. I parametri corrispondenti verranno inviati come parametro di query denominato slug.

importare { supbase } da"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } da"Prossimo";\nconst gestore = asincrono (richiesto: NextApiRequest, ris: NextApiResponse) => {\n Se (metodo richiesto "INVIARE") {\N attendere supabase.rpc("aggiorna_visualizzazioni", {\n page_slug: req.query.slug,\n });\n ritorno res.stato(200).json({\n messaggio: "Successo",\n });\n }\n Se (metodo richiesto "OTTENERE") {\N cost { dati } = attendere supabase\n .from("visualizzazioni")\n .select("view_count")\n .filtro("lumaca", "uguale", req.query.slug);\n Se (dati) {\n ritorno res.stato(200).json({\n totale: dati[0]?.view_count || 0,\n });\n }\n }\n ritorno res.stato(400).json({\n messaggio: "Richiesta non valida",\n });\n};\neesporta predefinito gestore;\n

La prima istruzione if controlla se la richiesta è una richiesta POST. Se lo è, chiama la funzione SQL update_views e passa lo slug come argomento. La funzione incrementerà il conteggio delle visualizzazioni o creerà una nuova voce per questo post.

La seconda istruzione if controlla se la richiesta è un metodo GET. Se lo è, recupera il conteggio totale delle visualizzazioni per quel post e lo restituisce.

Se la richiesta non è una richiesta POST o GET, la funzione del gestore restituisce un messaggio "Richiesta non valida".

Aggiungi visualizzazioni di pagina al blog

Per tenere traccia delle visualizzazioni di pagina, devi raggiungere il percorso API ogni volta che un utente accede a una pagina.

Inizia installando il pacchetto swr. Lo utilizzerai per recuperare i dati dall'API.

npm installare swr\n

swr sta per stantio mentre riconvalida. Ti consente di mostrare le viste all'utente mentre recuperi i dati aggiornati in background.

Quindi crea un nuovo componente chiamato viewsCounter.tsx e aggiungi quanto segue:

importare usaSWR da"swr";\ninterfaccia Props {\n slug: string;\n}\nconst fetcher = asincrono (input: RequestInfo) => {\n cost ris: Risposta = attendere recupera (input);\n ritornoattendere res.json();\n};\nconst ViewsCounter = ({slug}: oggetti di scena) => {\nconst { data } = usaSWR(`/api/viste/${lumaca}`, fetcher);\nreturn (\n {`${\n (dati?.totale)? dati.totale :"0"\N } viste`}</span>\n );\n};\nexport predefinito ViewsCounter;\n

Questo componente esegue il rendering delle visualizzazioni totali per ciascun blog. Accetta lo slug di un post come prop e utilizza quel valore per effettuare la richiesta all'API. Se l'API restituisce visualizzazioni, visualizza quel valore altrimenti visualizza "0 visualizzazioni".

Per registrare le visualizzazioni, aggiungi il seguente codice al componente che esegue il rendering di ogni post.

importare {usaEffetto} da"reagire";\nImporta ViewsCounter da"../../components/viewsCounter";\ninterfaccia Props {\n slug: string;\n}\nconst Post = ({ slug }: oggetti di scena) => {\n usaEffetto(() => {\n recupera(`/api/viste/${lumaca}`, {\n metodo: 'INVIARE'\n });\n }, [slug]);\nreturn (\n 
\N \N // contenuto del blog\n 

\n)\n}\nexport post predefinito\n

Controlla il database Supabase per vedere come si aggiorna il conteggio delle visualizzazioni. Dovrebbe aumentare di 1 ogni volta che visiti un post.

Monitoraggio di più delle visualizzazioni di pagina

Le visualizzazioni di pagina ti consentono di sapere quanti utenti stanno visitando pagine specifiche del tuo sito. Puoi vedere quali pagine hanno un buon rendimento e quali no.

Per andare ancora oltre, tieni traccia del referrer del tuo visitatore per vedere da dove proviene il traffico o crea una dashboard per visualizzare meglio i dati. Ricorda che puoi sempre semplificare le cose utilizzando uno strumento di analisi come Google Analytics.