Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Zobrazenia stránky sú dôležitou metrikou na sledovanie výkonnosti webu. Softvérové ​​nástroje ako Google Analytics a Fathom poskytujú jednoduchý spôsob, ako to urobiť pomocou externého skriptu.

Možno však nechcete používať knižnicu tretej strany. V takom prípade môžete použiť databázu na sledovanie návštevníkov vašej stránky.

Supabase je alternatíva Firebase s otvoreným zdrojom, ktorá vám môže pomôcť sledovať zobrazenia stránok v reálnom čase.

Pripravte svoju stránku, aby ste mohli začať sledovať zobrazenia stránky

Ak chcete sledovať tento návod, musíte mať blog Next.js. Ak ho ešte nemáte, môžete vytvorte blog založený na Markdown pomocou funkcie Reag-markdown.

Môžete tiež naklonovať oficiálnu štartovaciu šablónu blogu Next.js z nej GitHub Úložisko.

Supabase je alternatíva Firebase, ktorá poskytuje databázu Postgres, autentifikáciu, okamžité rozhrania API, funkcie Edge, predplatné v reálnom čase a úložisko.

instagram viewer

Budete ho používať na ukladanie zobrazení stránok pre každý blogový príspevok.

Vytvorte databázu Supabase

Choďte na Webová stránka Supabase a prihláste sa alebo si zaregistrujte účet.

Na ovládacom paneli Supabase kliknite na Nový projekt a vyberte organizáciu (Supabase vytvorí organizáciu pod používateľským menom vášho účtu).

Vyplňte názov projektu a heslo a potom kliknite Vytvorte nový projekt.

Na stránke nastavení v časti API skopírujte webovú adresu projektu a verejné a tajné kľúče.

Otvor .env.local súbor v projekte Next.js a skopírujte tieto podrobnosti API.

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

Ďalej prejdite do editora SQL a kliknite na Nový dopyt.

Použi štandardný príkaz SQL na vytvorenie tabuľky volal názory.

VYTVORIŤTABLE zobrazenia (\n idbigintVYGENEROVANÝBYDEFAULTASIDENTITA PRIMÁRNY KEY,\n slimák textUNIKÁTNYNIENULOVÝ,\n počet zobrazení bigintDEFAULT1NIENULOVÝ,\n updated_at časová značkaDEFAULTTERAZ() NIENULOVÝ\n);\n

Alternatívne môžete na vytvorenie tabuľky pohľadov použiť editor tabuliek:

Editor tabuliek sa nachádza na ľavej table ovládacieho panela.

Vytvorte uloženú procedúru Supabase na aktualizáciu zobrazení

Postgres má vstavanú podporu pre funkcie SQL, ktoré môžete volať cez Supabase API. Táto funkcia bude zodpovedná za zvýšenie počtu zobrazení v tabuľke zobrazení.

Ak chcete vytvoriť databázovú funkciu, postupujte podľa týchto pokynov:

  1. Prejdite do sekcie SQL editor na ľavej table.
  2. Kliknite na položku Nový dotaz.
  3. Pridajte tento SQL dotaz na vytvorenie databázovej funkcie. 
    VYTVORIŤALEBONAHRADIŤFUNKCIA update_views (page_slug TEXT)
    VRÁTKY neplatné
    JAZYK plpgsql
    AS $$
    ZAČAŤ
     AK EXISTUJE (VYBRAŤOD názory KDE slug=page_slug) POTOM
    AKTUALIZOVAŤ názory
    SET view_count = view_count + 1,
     updated_at = now()
     WHERE slimák = page_slug;
    ELSE
    VLOŽIŤdo zhliadnutia (slimák) HODNOTY (page_slug);
    KONIECAK;
    KONIEC;
    $$;
  4. Kliknutím na Spustiť alebo Cmd + Enter (Ctrl + Enter) spustite dotaz.

Táto funkcia SQL sa nazýva update_views a prijíma textový argument. Najprv skontroluje, či daný blogový príspevok už v tabuľke existuje, a ak áno, zvýši počet zobrazení o 1. Ak nie, vytvorí sa nový záznam pre príspevok, ktorého počet zobrazení je predvolene 1.

Nastavte klienta Supabase v súbore Next.js

Nainštalujte a nakonfigurujte Supabase

Nainštalujte balík @supabase/supabase-js cez npm a pripojte sa k databáze z Next.js.

inštalácia npm @supabase/supabase-js\n

Ďalej vytvorte a /lib/supabase.ts súbor v koreňovom adresári vášho projektu a inicializujte klienta Supabase.

importovať { createClient } od'@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);\neexport { supabase };\n

Nezabudnite, že ste pri vytváraní databázy uložili poverenia API v .env.local.

Aktualizujte zobrazenia stránky

Vytvorte trasu API, ktorá načíta zobrazenia stránky zo Supabase a aktualizuje počet zobrazení zakaždým, keď používateľ navštívi stránku.

Túto trasu vytvoríte v /api priečinok v súbore s názvom zhliadnutia/[slug].ts. Použitím zátvoriek okolo názvu súboru sa vytvorí dynamická trasa. Zhodné parametre budú odoslané ako parameter dopytu s názvom slug.

importovať { supabase } od"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } od"Ďalšie";\nconst handler = async (požiadavka: NextApiRequest, res: NextApiResponse) => {\n ak (požadovaná metóda "POST") {\n čakať supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n vrátiť res.status(200.json({\n správa: "Úspech",\n });\n }\n ak (požadovaná metóda "ZÍSKAŤ") {\n konšt { údaje } = čakať supabase\n .from("názory")\n .vybrať("view_count")\n .filter("slimák", "ekv", req.query.slug);\n ak (údaje) {\n vrátiť res.status(200.json({\n celkom: údaje[0]?.view_count || 0,\n });\n }\n }\n vrátiť res.status(400.json({\n správa: "Neplatná požiadavka",\n });\n};\neexportovať predvolená obsluha;\n

Prvý príkaz if kontroluje, či je požiadavka POST žiadosťou. Ak je, zavolá funkciu SQL update_views a odovzdá mu slug ako argument. Funkcia zvýši počet zobrazení alebo vytvorí nový záznam pre tento príspevok.

Druhý príkaz if kontroluje, či požiadavka je metódou GET. Ak áno, načíta celkový počet zobrazení daného príspevku a vráti ho.

Ak žiadosť nie je žiadosťou POST alebo GET, funkcia obsluhy vráti správu „Neplatná požiadavka“.

Pridajte zobrazenia stránky do blogu

Ak chcete sledovať zobrazenia stránky, musíte prejsť na trasu rozhrania API zakaždým, keď používateľ prejde na stránku.

Začnite inštaláciou balíka swr. Budete ho používať na načítanie údajov z API.

npm Inštalácia swr\n

swr znamená stale while revalidate. Umožňuje vám zobraziť zobrazenia používateľovi a zároveň na pozadí získavať aktuálne údaje.

Potom vytvorte nový komponent s názvom viewsCounter.tsx a pridajte nasledujúce:

importovať použitie SWR od"swr";\nPodpory rozhrania {\n slimák: reťazec;\n}\nconst fetcher = async (vstup: RequestInfo) => {\n konšt res: odpoveď = čakať načítať (vstup);\n vrátiťčakať res.json();\n};\nconst ViewsCounter = ({ slimák }: Rekvizity) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nnávrat (\n {`${\n (údaje?.celkom)? data.total :"0"\n } pohľady“.}</span>\n );\n};\neexportovať predvolené počítadlo zobrazení;\n

Tento komponent vykresľuje celkový počet zobrazení pre každý blog. Prijíma slimák príspevku ako podperu a používa túto hodnotu na odoslanie požiadavky do API. Ak API vráti zobrazenia, zobrazí túto hodnotu, inak zobrazí „0 zobrazení“.

Ak chcete zaregistrovať zobrazenia, pridajte nasledujúci kód do komponentu, ktorý vykresľuje každý príspevok.

importovať { useEffect } od"reagovať";\nimportujte ViewsCounter od"../../components/viewsCounter";\npodpory rozhrania {\n slug: string;\n}\nconst Post = ({ slimák }:rekvizity) => {\n useEffect(() => {\n načítať(`/api/views/${slug}`, {\n metóda: 'POST'\n });\n }, [slimák]);\nnávrat (\n 
\n \n // obsah blogu\n 

\n)\n}\neexportovať predvolený príspevok\n

Skontrolujte databázu Supabase a zistite, ako sa aktualizuje počet zobrazení. Pri každej návšteve príspevku by sa mala zvýšiť o 1.

Sledovanie viac ako zobrazení stránky

Zobrazenia stránky vám umožňujú zistiť, koľko používateľov navštevuje konkrétne stránky na vašej lokalite. Môžete vidieť, ktoré stránky fungujú dobre a ktoré nie.

Ak chcete ísť ešte ďalej, sledujte sprostredkovateľa svojho návštevníka, aby ste videli, odkiaľ pochádza návštevnosť, alebo vytvorte informačný panel, ktorý vám pomôže lepšie vizualizovať údaje. Nezabudnite, že veci môžete vždy zjednodušiť pomocou analytického nástroja, akým je napríklad Google Analytics.