כיצד לעקוב אחר צפיות בדף בבלוג שלך באמצעות Supabase

קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

צפיות בדפים הן מדד חשוב למעקב אחר ביצועי האינטרנט. כלי תוכנה כמו Google Analytics ו-Fathom מספקים דרך פשוטה לעשות זאת עם סקריפט חיצוני.

אבל אולי אתה לא רוצה להשתמש בספריית צד שלישי. במקרה כזה, אתה יכול להשתמש במסד נתונים כדי לעקוב אחר המבקרים באתר שלך.

Supabase היא אלטרנטיבה של Firebase בקוד פתוח שיכולה לעזור לך לעקוב אחר צפיות בדפים בזמן אמת.

הכן את האתר שלך כדי להתחיל לעקוב אחר צפיות בדפים

אתה צריך שיהיה לך בלוג Next.js כדי לעקוב אחר המדריך הזה. אם עדיין אין לך אחד, אתה יכול צור בלוג מבוסס Markdown באמצעות react-markdown .

אפליקציות לחסוך כסף לחופשה

אתה יכול גם לשכפל את תבנית ההתחלה הרשמית של הבלוג Next.js מתוך שלה GitHub מאגר.

Supabase היא אלטרנטיבה של Firebase המספקת מסד נתונים Postgres, אימות, ממשקי API מיידיים, פונקציות Edge, מנויים בזמן אמת ואחסון.

אתה תשתמש בו כדי לאחסן את תצוגות העמוד עבור כל פוסט בבלוג.

צור מסד נתונים של Supabase

עבור אל אתר Supabase ולהיכנס או להירשם לחשבון.

בלוח המחוונים של Supabase, לחץ על פרוייקט חדש ובחר ארגון (Supabase תיצור ארגון תחת שם המשתמש של החשבון שלך).

מלא את שם הפרויקט ואת הסיסמה ולאחר מכן לחץ צור פרויקט חדש.

בדף ההגדרות מתחת לקטע API, העתק את כתובת האתר של הפרויקט ואת המפתחות הציבוריים והסודיים.

צילום מסך המציג את מפתחות ה-API של פרויקט Supabase

פתח את ה .env.local קובץ בפרויקט Next.js והעתק את פרטי ה-API הללו.

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

לאחר מכן, נווט אל עורך SQL ולחץ על שאילתה חדשה .

להשתמש ב פקודת SQL רגילה ליצירת טבלה שקוראים לו צפיות .

 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 שניתן לקרוא להן דרך ממשק ה-API של Supabase. פונקציה זו תהיה אחראית להגדלת ספירת הצפיות בטבלת הצפיות.

כדי ליצור פונקציית מסד נתונים, בצע את ההוראות הבאות:

עבור למקטע עורך SQL בחלונית השמאלית.
לחץ על שאילתה חדשה.

הוסף שאילתת SQL זו כדי ליצור את פונקציית מסד הנתונים.

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

לחץ על הפעלה או על Cmd + Enter (Ctrl + Enter) כדי לבצע את השאילתה.

פונקציית SQL זו נקראת update_views ומקבלת ארגומנט טקסט. תחילה הוא בודק אם הפוסט הזה בבלוג כבר קיים בטבלה ואם כן, הוא מגדיל את ספירת הצפיות שלו ב-1. אם לא, הוא יוצר רשומה חדשה עבור הפוסט שמספר הצפיות שלו כברירת מחדל ל-1.

הגדר את לקוח Supabase ב-Next.js

התקן והגדר את Supabase

התקן את החבילה @supabase/supabase-js דרך npm כדי להתחבר למסד הנתונים מ-Next.js.

 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 תיקייה בתוך קובץ בשם צפיות/[שבלול].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

רכיב זה מציג את סך כל הצפיות עבור כל בלוג. הוא מקבל את שבלול של פוסט כאביזר ומשתמש בערך זה כדי לשלוח את הבקשה ל-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.