Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Zobrazení stránky jsou důležitou metrikou pro sledování výkonu webu. Softwarové nástroje jako Google Analytics a Fathom poskytují jednoduchý způsob, jak toho dosáhnout pomocí externího skriptu.

Možná ale nechcete používat knihovnu třetí strany. V takovém případě můžete použít databázi ke sledování návštěvníků vašeho webu.

Supabase je open-source alternativa Firebase, která vám může pomoci sledovat zobrazení stránek v reálném čase.

Připravte svůj web, abyste mohli začít sledovat zobrazení stránek

Abyste mohli sledovat tento tutoriál, musíte mít blog Next.js. Pokud ještě žádný nemáte, můžete vytvořit blog založený na Markdown pomocí Reag-markdown.

Můžete také naklonovat oficiální startovací šablonu blogu Next.js z jeho GitHub úložiště.

Supabase je alternativa Firebase, která poskytuje databázi Postgres, ověřování, okamžitá rozhraní API, funkce Edge, předplatné v reálném čase a úložiště.

Budete jej používat k ukládání zobrazení stránek pro každý příspěvek na blogu.

Vytvořte databázi Supabase

Přejít na Webové stránky Supabase a přihlaste se nebo si zaregistrujte účet.

Na řídicím panelu Supabase klikněte na Nový projekt a vyberte organizaci (Supabase vytvoří organizaci pod uživatelským jménem vašeho účtu).

Vyplňte název projektu a heslo a klikněte Vytvořit nový projekt.

Na stránce nastavení v části API zkopírujte adresu URL projektu a veřejný a tajný klíč.

Otevři .env.local soubor v projektu Next.js a zkopírujte tyto podrobnosti API.

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

Dále přejděte do editoru SQL a klikněte na Nový dotaz.

Použijte standardní SQL příkaz k vytvoření tabulky volal pohledy.

VYTVOŘITSTŮL zobrazení (\n idbigintVYGENEROVÁNOPODLEVÝCHOZÍTAK JAKOIDENTITA HLAVNÍ KLÍČ,\n slimák textUNIKÁTNÍNENULA,\n počet zobrazení bigintVÝCHOZÍ1NENULA,\n updated_at časové razítkoVÝCHOZÍNYNÍ() NENULA\n);\n

Alternativně můžete k vytvoření tabulky pohledů použít editor tabulek:

Editor tabulek je v levém podokně řídicího panelu.

Vytvořte uloženou proceduru Supabase pro aktualizaci zobrazení

Postgres má vestavěnou podporu pro funkce SQL, které můžete volat přes Supabase API. Tato funkce bude zodpovědná za zvýšení počtu zobrazení v tabulce zobrazení.

Chcete-li vytvořit databázovou funkci, postupujte podle těchto pokynů:

  1. Přejděte do sekce SQL editor v levém podokně.
  2. Klepněte na Nový dotaz.
  3. Přidáním tohoto SQL dotazu vytvoříte databázovou funkci. 
    VYTVOŘITNEBONAHRADITFUNKCE update_views (page_slug TEXT)
    VRÁCENÍ SE prázdnota
    JAZYK plpgsql
    TAK JAKO $$
    ZAČÍT
     POKUD EXISTUJE (VYBRATZ pohledy KDE slug=page_slug) PAK
    AKTUALIZACE pohledy
    SOUBOR view_count = view_count + 1,
     updated_at = now()
     WHERE slug = page_slug;
    JINÝ
    VLOŽITdo zhlédnutí (slimák) HODNOTY (page_slug);
    KONECLI;
    KONEC;
    $$;
  4. Kliknutím na Spustit nebo Cmd + Enter (Ctrl + Enter) spustíte dotaz.

Tato funkce SQL se nazývá update_views a přijímá textový argument. Nejprve zkontroluje, zda daný blogový příspěvek již v tabulce existuje, a pokud ano, zvýší počet zobrazení o 1. Pokud ne, vytvoří nový záznam pro příspěvek, jehož počet zobrazení je výchozí 1.

Nastavte klienta Supabase v Next.js

Nainstalujte a nakonfigurujte Supabase

Nainstalujte balíček @supabase/supabase-js přes npm pro připojení k databázi z Next.js.

instalace npm @supabase/supabase-js\n

Dále vytvořte a /lib/supabase.ts soubor v kořenovém adresáři vašeho projektu a inicializujte klienta Supabase.

import { createClient } z'@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

Nezapomeňte, že jste při vytváření databáze uložili pověření API do .env.local.

Aktualizujte zobrazení stránek

Vytvořte trasu API, která načte zobrazení stránek ze Supabase a aktualizuje počet zobrazení pokaždé, když uživatel navštíví stránku.

Tuto trasu vytvoříte v /api složka uvnitř souboru s názvem zhlédnutí/[slug].ts. Použití závorek kolem názvu souboru vytvoří dynamickou trasu. Shodné parametry budou odeslány jako parametr dotazu s názvem slug.

import { supabase } z"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } z"další";\nconst handler = asynchronní (požadavek: NextApiRequest, res: NextApiResponse) => {\n -li (požadovaná metoda "POŠTA") {\n čekat supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n vrátit se res.status(200.json({\n zpráva: "Úspěch",\n });\n }\n -li (požadovaná metoda "DOSTAT") {\n konst { data } = čekat supabase\n .from("zobrazení")\n .select("view_count")\n .filtr("slimák", "ekv", req.query.slug);\n -li (data) {\n vrátit se res.status(200.json({\n celkem: data[0]?.počet_zobrazení || 0,\n });\n }\n }\n vrátit se res.status(400.json({\n zpráva: "Neplatná žádost",\n });\n};\neexportovat výchozí manipulátor;\n

První příkaz if kontroluje, zda se jedná o požadavek POST. Pokud ano, zavolá funkci update_views SQL a předá slug jako argument. Funkce zvýší počet zobrazení nebo vytvoří nový záznam pro tento příspěvek.

Druhý příkaz if kontroluje, zda je požadavek metodou GET. Pokud ano, načte celkový počet zobrazení daného příspěvku a vrátí jej.

Pokud požadavek není požadavek POST nebo GET, funkce handler vrátí zprávu „Neplatný požadavek“.

Přidejte zobrazení stránky do blogu

Chcete-li sledovat zobrazení stránek, musíte se dostat na trasu API pokaždé, když uživatel přejde na stránku.

Začněte instalací balíčku swr. Budete jej používat k načítání dat z API.

npm Nainstalujte swr\n

swr znamená stale while revalidate. Umožňuje zobrazit pohledy uživateli a zároveň na pozadí načítat aktuální data.

Poté vytvořte novou komponentu s názvem viewsCounter.tsx a přidejte následující:

import použitíSWR z"swr";\npodpěry rozhraní {\n slug: string;\n}\nconst fetcher = asynchronní (vstup: RequestInfo) => {\n konst res: Odpověď = čekat načíst (vstup);\n vrátit sečekat res.json();\n};\nconst ViewsCounter = ({ slimák }: Rekvizity) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nvrátit (\n {`${\n (data?.celkem)? data.total:"0"\n } pohledy'}</span>\n );\n};\neexportovat výchozí ViewsCounter;\n

Tato komponenta vykresluje celkový počet zobrazení pro každý blog. Přijímá slug příspěvku jako podpěru a používá tuto hodnotu k odeslání požadavku do API. Pokud rozhraní API vrátí zobrazení, zobrazí tuto hodnotu, jinak zobrazí „0 zobrazení“.

Chcete-li zaregistrovat zobrazení, přidejte následující kód do komponenty, která vykresluje každý příspěvek.

import { useEffect } z"reagovat";\niport ViewsCounter z"../../components/viewsCounter";\nrozhraní Props {\n slug: string;\n}\nconst Post = ({ slimák }:Rekvizity) => {\n useEffect(() => {\n načíst(`/api/views/${slug}`, {\n metoda: 'POŠTA'\n });\n }, [slimák]);\nnávrat (\n 
\n \n // obsah blogu\n 

\n)\n}\neexportovat výchozí příspěvek\n

Zkontrolujte databázi Supabase, abyste viděli, jak se aktualizuje počet zobrazení. Při každé návštěvě příspěvku by se měla zvýšit o 1.

Sledování více než zobrazení stránek

Zobrazení stránek vám dají vědět, kolik uživatelů navštěvuje konkrétní stránky vašeho webu. Můžete vidět, které stránky si vedou dobře a které ne.

Chcete-li jít ještě dále, sledujte referrera svého návštěvníka, abyste viděli, odkud pochází provoz, nebo vytvořte řídicí panel, který pomůže lépe vizualizovat data. Pamatujte, že věci můžete vždy zjednodušit pomocí analytického nástroje, jako je Google Analytics.