Jak śledzić wyświetlenia strony na swoim blogu za pomocą Supabase
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 utworzyć blog oparty na Markdown, używając React-Markdown.
Możesz także sklonować oficjalny szablon startowy bloga Next.js z jego repozytorium GitHub .
Supabase to alternatywa Firebase, która zapewnia bazę danych Postgres, uwierzytelnianie, natychmiastowe interfejsy API, funkcje Edge, subskrypcje w czasie rzeczywistym i pamięć masową.
Będziesz go używać do przechowywania wyświetleń stron dla każdego posta na blogu.
Utwórz bazę danych Supabase
Wejdź na stronę 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.
Otwórz plik .env.local 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 standardowego polecenia SQL, aby utworzyć tabelę o nazwie views .
CREATE TABLE views (\n id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,\n slug text UNIQUE NOT NULL,\n view_count bigint DEFAULT 1 NOT NULL,\n updated_at timestamp DEFAULT NOW() NOT NULL\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:
- Przejdź do sekcji edytora SQL w lewym okienku.
- Kliknij Nowe zapytanie.
- Dodaj to zapytanie SQL, aby utworzyć funkcję bazy danych.
CREATE OR REPLACE FUNCTION update_views(page_slug TEXT)
RETURNS void
LANGUAGE plpgsql
AS $$
BEGIN
IF EXISTS (SELECT FROM views WHERE slug=page_slug) THEN
UPDATE views
SET view_count = view_count + 1,
updated_at = now()
WHERE slug = page_slug;
ELSE
INSERT into views(slug) VALUES (page_slug);
END IF;
END;
$$; - 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.
npm install @supabase/supabase-js\n
Następnie utwórz plik /lib/supabase.ts w katalogu głównym projektu i zainicjuj klienta Supabase.
import { createClient } from '@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);\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 folderze /api w 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 { supabase } from "../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } from "next";\nconst handler = async (req: NextApiRequest, res: NextApiResponse) => {\n if (req.method === "POST") {\n await supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n return res.status(200).json({\n message: "Success",\n });\n }\n if (req.method === "GET") {\n const { data } = await supabase\n. from("views")\n. select("view_count")\n. filter("slug", "eq", req.query.slug);\n if (data) {\n return res.status(200).json({\n total: data[0]?.view_count || 0,\n });\n }\n }\n return res.status(400).json({\n message: "Invalid request",\n });\n};\nexport default handler;\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.
npm install 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 useSWR from "swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = async (input: RequestInfo) => {\n const res: Response = await fetch(input);\n return await res.json();\n};\nconst ViewsCounter = ({ slug }: Props) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nreturn (\n <span>{`${\n (data?.total)? data.total: "0"\n } views`}</span>\n);\n};\nexport default ViewsCounter;\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 { useEffect } from "react";\nimport ViewsCounter from "../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }:Props) => {\n useEffect(() => {\n fetch(`/api/views/${slug}`, {\n method: 'POST'\n });\n }, [slug]);\nreturn (\n <div>\n <ViewsCounter slug={slug}/>\n // blog content\n </div>\n)\n}\nexport default 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 są skuteczne, 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.
Dodaj komentarz