چگونه با استفاده از Supabase بازدیدهای صفحه را در وبلاگ خود پیگیری کنید

گوگل آنالیتیکس می تواند برای یک سایت اصلی بیش از حد باشد و شما به راحتی می توانید یک جایگزین اساسی ایجاد کنید.

بازدید از صفحه یک معیار مهم برای ردیابی عملکرد وب است. ابزارهای نرم افزاری مانند Google Analytics و Fathom یک راه ساده برای انجام این کار با یک اسکریپت خارجی ارائه می دهند.

اما شاید نخواهید از کتابخانه شخص ثالث استفاده کنید. در چنین حالتی، می توانید از یک پایگاه داده برای پیگیری بازدیدکنندگان سایت خود استفاده کنید.

Supabase یک جایگزین Firebase منبع باز است که می تواند به شما کمک کند بازدیدهای صفحه را در زمان واقعی پیگیری کنید.

سایت خود را برای شروع ردیابی بازدیدهای صفحه آماده کنید

برای دنبال کردن این آموزش باید یک وبلاگ Next.js داشته باشید. اگر قبلاً یکی ندارید، می توانید با استفاده از react-markdown یک وبلاگ مبتنی بر Markdown ایجاد کنید.

همچنین می توانید قالب رسمی شروع کننده وبلاگ Next.js را از مخزن GitHub آن کلون کنید.

Supabase یک جایگزین Firebase است که پایگاه داده Postgres، احراز هویت، APIهای فوری، توابع لبه، اشتراک‌های بلادرنگ و فضای ذخیره‌سازی را فراهم می‌کند.

شما از آن برای ذخیره بازدیدهای صفحه برای هر پست وبلاگ استفاده خواهید کرد.

یک پایگاه داده Supabase ایجاد کنید

به وب سایت Supabase بروید و وارد شوید یا برای یک حساب ثبت نام کنید.

در داشبورد Supabase، روی New Project کلیک کنید و یک سازمان را انتخاب کنید (Supabase یک سازمان با نام کاربری حساب شما ایجاد خواهد کرد).

نام پروژه و رمز عبور را وارد کنید سپس روی ایجاد پروژه جدید کلیک کنید.

در صفحه تنظیمات زیر بخش API، آدرس پروژه و کلیدهای عمومی و مخفی را کپی کنید.

فایل .env.local را در پروژه Next.js باز کنید و این جزئیات API را کپی کنید.

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

سپس به ویرایشگر SQL بروید و روی New query کلیک کنید.

از دستور استاندارد SQL برای ایجاد جدولی به نام view استفاده کنید.

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

همچنین، می‌توانید از ویرایشگر جدول برای ایجاد جدول نماها استفاده کنید:

ویرایشگر جدول در سمت چپ داشبورد قرار دارد.

یک رویه ذخیره شده Supabase برای به روز رسانی نماها ایجاد کنید

Postgres دارای پشتیبانی داخلی برای توابع SQL است که می توانید از طریق Supabase API تماس بگیرید. این تابع مسئول افزایش تعداد بازدیدها در جدول بازدیدها خواهد بود.

برای ایجاد یک تابع پایگاه داده، دستورالعمل های زیر را دنبال کنید:

1. به بخش ویرایشگر SQL در صفحه سمت چپ بروید.
2. روی New Query کلیک کنید.
3. این کوئری SQL را برای ایجاد تابع پایگاه داده اضافه کنید. ایجاد یا جایگزین کردن عملکرد به روز رسانی_ویس (متن page_slug) بازگرداندن voidLanguage plpgsqlas $ $ $ شروع می شود اگر وجود داشته باشد (از دیدگاه هایی که در آن slug = page_slug) انتخاب کنید ، سپس بازدیدها را به روز کنید view_count = view_count + 1 ، updated_at = اکنون () جایی که slug = page_slug ؛ ELSE        INSERT into views(slug) VALUES (page_slug); END IF;END;$$;
4. برای اجرای کوئری روی Run یا Cmd + Enter (Ctrl + Enter) کلیک کنید.

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;
$$;

این تابع SQL update_views نامیده می شود و آرگومان متنی را می پذیرد. ابتدا بررسی می‌کند که آیا آن پست وبلاگ از قبل در جدول وجود دارد یا خیر، و اگر وجود داشته باشد، تعداد بازدیدهای آن را 1 افزایش می‌دهد. اگر اینطور نیست، یک ورودی جدید برای پست ایجاد می‌کند که تعداد بازدیدهای آن 1 است.

Supabase Client را در Next.js راه اندازی کنید

Supabase را نصب و پیکربندی کنید

برای اتصال به پایگاه داده از Next.js بسته @supabase/supabase-js را از طریق npm نصب کنید.

npm install @supabase/supabase-js\n

بعد، یک فایل /lib/supabase.ts در ریشه پروژه خود ایجاد کنید و مشتری 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

به یاد داشته باشید که هنگام ایجاد پایگاه داده، اعتبارنامه API را در .env.local ذخیره کرده اید.

نماهای صفحه را به روز کنید

یک مسیر API ایجاد کنید که بازدیدهای صفحه را از Supabase واکشی می کند و هر بار که کاربر از یک صفحه بازدید می کند تعداد بازدیدها را به روز می کند.

این مسیر را در پوشه /api داخل فایلی به نام views/[slug].ts ایجاد خواهید کرد. استفاده از براکت در اطراف نام فایل یک مسیر پویا ایجاد می کند. پارامترهای منطبق به عنوان یک پارامتر پرس و جو به نام 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

اولین دستور if بررسی می کند که آیا درخواست یک درخواست POST است یا خیر. اگر اینطور باشد، تابع update_views SQL را فراخوانی می کند و به عنوان آرگومان در Slug ارسال می کند. این تابع تعداد بازدیدها را افزایش می دهد یا یک ورودی جدید برای این پست ایجاد می کند.

دستور دوم if بررسی می کند که آیا درخواست یک متد GET است یا خیر. اگر اینطور باشد، تعداد کل بازدید آن پست را دریافت می کند و آن را برمی گرداند.

اگر درخواست یک درخواست POST یا GET نباشد، تابع کنترل کننده پیام “درخواست نامعتبر” را برمی گرداند.

مشاهده های صفحه را به وبلاگ اضافه کنید

برای ردیابی بازدیدهای صفحه، باید هر بار که کاربر به صفحه ای هدایت می شود، مسیر API را بزنید.

با نصب بسته swr شروع کنید. از آن برای واکشی داده ها از API استفاده خواهید کرد.

npm install swr\n

swr مخفف stale while revalidate است. این امکان را به شما می دهد تا هنگام واکشی داده های به روز در پس زمینه، نماها را به کاربر نمایش دهید.

سپس یک کامپوننت جدید به نام viewsCounter.tsx ایجاد کنید و موارد زیر را اضافه کنید:

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

این مؤلفه کل بازدیدهای هر وبلاگ را ارائه می دهد. Slug یک پست را به عنوان یک پایه می پذیرد و از آن مقدار برای ارسال درخواست به API استفاده می کند. اگر API نماها را برگرداند، آن مقدار را نشان می دهد در غیر این صورت “0 بازدید” را نمایش می دهد.

برای ثبت نماها، کد زیر را به مؤلفه ای که هر پست را ارائه می دهد اضافه کنید.

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

پایگاه داده Supabase را بررسی کنید تا ببینید تعداد بازدیدها چگونه به روز می شود. هر بار که از یک پست بازدید می کنید باید 1 افزایش یابد.

ردیابی بیشتر از بازدیدهای صفحه

بازدید از صفحه به شما امکان می دهد بدانید که چند کاربر از صفحات خاصی در سایت شما بازدید می کنند. شما می توانید ببینید که کدام صفحات خوب کار می کنند و کدام نه.

برای رفتن حتی بیشتر، ارجاع دهنده بازدیدکننده خود را دنبال کنید تا ببینید ترافیک از کجا می آید یا داشبوردی ایجاد کنید تا به تجسم بهتر داده ها کمک کند. به یاد داشته باشید که همیشه می توانید با استفاده از ابزار تحلیلی مانند Google Analytics کارها را ساده کنید.

منبع مقاله