Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Wyświetlenia strony są ważnym wskaźnikiem śledzenia wydajności sieci. Narzędzia programowe, takie jak Google Analytics i Fathom, zapewniają prosty sposób na zrobienie tego za pomocą zewnętrznego skryptu.

Ale może nie chcesz korzystać z biblioteki innej firmy. W takim przypadku możesz użyć bazy danych do śledzenia odwiedzających witrynę.

Supabase to alternatywa Firebase typu open source, która może pomóc w śledzeniu wyświetleń stron w czasie rzeczywistym.

Przygotuj swoją witrynę do rozpoczęcia śledzenia wyświetleń strony

Aby móc śledzić ten samouczek, musisz mieć blog Next.js. Jeśli jeszcze go nie masz, możesz utwórz blog oparty na Markdown za pomocą React-Markdown.

Możesz także sklonować z niego oficjalny szablon startowy bloga Next.js GitHub magazyn.

Supabase to alternatywa Firebase, która zapewnia bazę danych Postgres, uwierzytelnianie, natychmiastowe interfejsy API, funkcje Edge, subskrypcje w czasie rzeczywistym i pamięć masową.

instagram viewer

Będziesz go używać do przechowywania wyświetleń stron dla każdego posta na blogu.

Utwórz bazę danych Supabase

Idź do Witryna Supabase i zaloguj się lub załóż konto.

Na desce rozdzielczej Supabase kliknij Nowy projekt i wybierz organizację (Supabase utworzy organizację pod nazwą użytkownika Twojego konta).

Wpisz nazwę projektu i hasło, a następnie kliknij Utwórz nowy projekt.

Na stronie ustawień w sekcji API skopiuj adres URL projektu oraz klucze publiczny i tajny.

Otworzyć .env.local plik w projekcie Next.js i skopiuj te szczegóły interfejsu API.

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

Następnie przejdź do edytora SQL i kliknij Nowe zapytanie.

Użyj standardowe polecenie SQL do tworzenia tabeli zwany wyświetlenia.

TWORZYĆTABELA widoki (\n IDbigintWYGENEROWANEPRZEZDOMYŚLNYJAKTOŻSAMOŚĆ PODSTAWOWY KLUCZ,\n ślimak tekstUNIKALNYNIEZERO,\n liczba_wyświetleń bigintDOMYŚLNY1NIEZERO,\n aktualizacja_o znak czasuDOMYŚLNYTERAZ() NIEZERO\n);\n

Alternatywnie możesz użyć edytora tabel, aby utworzyć tabelę widoków:

Edytor tabel znajduje się w lewym okienku pulpitu nawigacyjnego.

Utwórz procedurę składowaną Supabase, aby zaktualizować widoki

Postgres ma wbudowaną obsługę funkcji SQL, które można wywoływać za pośrednictwem interfejsu API Supabase. Ta funkcja będzie odpowiedzialna za zwiększanie liczby wyświetleń w tabeli wyświetleń.

Aby utworzyć funkcję bazy danych, postępuj zgodnie z poniższymi instrukcjami:

  1. Przejdź do sekcji edytora SQL w lewym okienku.
  2. Kliknij Nowe zapytanie.
  3. Dodaj to zapytanie SQL, aby utworzyć funkcję bazy danych. 
    TWORZYĆLUBZASTĘPOWAĆFUNKCJONOWAĆ update_views (page_slug TEKST)
    ZWROTY próżnia
    JĘZYK plpgsql
    JAK $$
    ZACZYNAĆ
     JEŚLI ISTNIEJE (WYBIERAĆZ wyświetlenia GDZIE slug=page_slug) NASTĘPNIE
    AKTUALIZACJA wyświetlenia
    USTAWIĆ liczba_wyświetleń = liczba_wyświetleń + 1,
     zaktualizowano_o = teraz()
     GDZIE slug = page_slug;
    W PRZECIWNYM RAZIE
    WSTAWIĆdo wyświetlenia (ślimak) WARTOŚCI (strona_slug);
    KONIECJEŚLI;
    KONIEC;
    $$;
  4. Kliknij Uruchom lub Cmd + Enter (Ctrl + Enter), aby wykonać zapytanie.

Ta funkcja SQL nosi nazwę update_views i przyjmuje argument tekstowy. Najpierw sprawdza, czy ten post na blogu już istnieje w tabeli, a jeśli tak, zwiększa liczbę wyświetleń o 1. Jeśli nie, tworzy nowy wpis dla posta, którego liczba wyświetleń wynosi domyślnie 1.

Skonfiguruj klienta Supabase w Next.js

Zainstaluj i skonfiguruj Supabase

Zainstaluj pakiet @supabase/supabase-js przez npm, aby połączyć się z bazą danych z Next.js.

instalacja npm @subabase/supabase-js\n

Następnie utwórz plik /lib/supabase.ts plik w katalogu głównym projektu i zainicjuj klienta Supabase.

import { utwórz klienta } z'@supabase/supabase-js';\nconst supabaseUrl: ciąg = proces.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: ciąg = proces.env. SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient (supabaseUrl, supabaseServerKey);\nexport { supabase};\n

Pamiętaj, że podczas tworzenia bazy danych zapisałeś poświadczenia API w .env.local.

Zaktualizuj wyświetlenia strony

Utwórz trasę API, która pobiera wyświetlenia strony z Supabase i aktualizuje liczbę wyświetleń za każdym razem, gdy użytkownik odwiedza stronę.

Utworzysz tę trasę w /api folder wewnątrz pliku o nazwie views/[slug].ts. Użycie nawiasów wokół nazwy pliku tworzy dynamiczną trasę. Dopasowane parametry zostaną wysłane jako parametr zapytania o nazwie slug.

import { nadbaza} z"../../../lib/supabase/admin";\nimport {NastępneŻądanieApi, NastępnaOdpowiedźApi} z"Następny";\noperator stałych = asynchroniczny (wymagane: NextApiRequest, rez: NextApiResponse) => {\n Jeśli (wymagana metoda "POST") {\N czekać na supabase.rpc(„aktualizacja_widoków”, {\n page_slug: req.query.slug,\n});\n powrót res.status(200.json({\n wiadomość: "Powodzenie",\n});\n}\n Jeśli (wymagana metoda "DOSTAWAĆ") {\N konst {dane} = czekać na supabaza\n .z("wyświetlenia")\n .wybierz("licznik wyświetleń")\n .filtr("ślimak", „równowartość”, req.query.slug);\n Jeśli (dane) {\n powrót res.status(200.json({\n razem: dane[0]?.liczba_wyświetleń || 0,\n});\n}\n}\n powrót res.status(400.json({\n wiadomość: "Nieprawidłowe żądanie",\n});\n};\neeksportuj domyślny obsługi;\n

Pierwsza instrukcja if sprawdza, czy żądanie jest żądaniem typu POST. Jeśli tak, wywołuje funkcję SQL update_views i przekazuje ślimak jako argument. Funkcja zwiększy liczbę wyświetleń lub utworzy nowy wpis dla tego posta.

Druga instrukcja if sprawdza, czy żądanie jest metodą GET. Jeśli tak, pobiera całkowitą liczbę wyświetleń dla tego posta i zwraca ją.

Jeśli żądanie nie jest żądaniem POST lub GET, funkcja obsługi zwraca komunikat „Nieprawidłowe żądanie”.

Dodaj wyświetlenia strony do bloga

Aby śledzić wyświetlenia strony, musisz trafić na trasę API za każdym razem, gdy użytkownik przechodzi na stronę.

Zacznij od zainstalowania pakietu swr. Użyjesz go do pobrania danych z API.

np zainstalować swr\n

swr oznacza nieaktualne podczas rewalidacji. Pozwala na wyświetlanie widoków użytkownikowi podczas pobierania aktualnych danych w tle.

Następnie utwórz nowy komponent o nazwie viewsCounter.tsx i dodaj:

import użyj SWR z"swr";\ninterfejs Rekwizyty {\n slug: string;\n}\nconst fetcher = asynchroniczny (wejście: RequestInfo) => {\n konst odp: Odpowiedź = czekać na pobierz (wejście);\n powrótczekać na res.json();\n};\nconstLicznik wyświetleń = ({ slug }: Rekwizyty) => {\nstała {dane} = użyjSWR(`/api/widoki/${ślimak}`, program pobierający);\nzwrot (\n {`${\n (dane?.suma)? dane.suma:"0"\N } widoki`}</span>\n );\n};\neeksportuj domyślny licznik wyświetleń;\n

Ten komponent renderuje łączną liczbę wyświetleń dla każdego bloga. Akceptuje ślimak posta jako rekwizyt i używa tej wartości do wysłania żądania do API. Jeśli interfejs API zwraca wyświetlenia, wyświetla tę wartość, w przeciwnym razie wyświetla „0 wyświetleń”.

Aby zarejestrować widoki, dodaj następujący kod do komponentu, który renderuje każdy post.

import {efekt użycia} z"reagować";\nimport Licznik wyświetleń z"../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ ślimak }: rekwizyty) => {\n useEffect(() => {\n pobieranie (`/api/widoki/${ślimak}`, {\n metoda: 'POST'\n});\n}, [slug]);\nreturn (\n 
\N \N // treść bloga\n 

\n)\n}\neeksportuj domyślny post\n

Sprawdź bazę danych Supabase, aby zobaczyć, jak aktualizuje się liczba wyświetleń. Powinien wzrosnąć o 1 za każdym razem, gdy odwiedzasz post.

Śledzenie nie tylko wyświetleń strony

Wyświetlenia strony informują, ilu użytkowników odwiedza określone strony w Twojej witrynie. Możesz zobaczyć, które strony osiągają dobre wyniki, a które nie.

Aby pójść jeszcze dalej, śledź stronę odsyłającą odwiedzającego, aby zobaczyć, skąd pochodzi ruch, lub utwórz pulpit nawigacyjny, który pomoże lepiej zwizualizować dane. Pamiętaj, że zawsze możesz uprościć sprawę, korzystając z narzędzia analitycznego, takiego jak Google Analytics.