आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

वेब प्रदर्शन पर नज़र रखने के लिए पृष्ठ दृश्य एक महत्वपूर्ण मीट्रिक हैं। Google Analytics और Fathom जैसे सॉफ़्टवेयर टूल बाहरी स्क्रिप्ट के साथ ऐसा करने का आसान तरीका प्रदान करते हैं।

लेकिन हो सकता है कि आप किसी तृतीय-पक्ष लाइब्रेरी का उपयोग नहीं करना चाहें। ऐसी स्थिति में, आप अपनी साइट के विज़िटर्स पर नज़र रखने के लिए एक डेटाबेस का उपयोग कर सकते हैं।

सुपाबेस एक ओपन-सोर्स फायरबेस विकल्प है जो वास्तविक समय में पृष्ठ दृश्यों का ट्रैक रखने में आपकी सहायता कर सकता है।

पृष्ठ दृश्य ट्रैक करना प्रारंभ करने के लिए अपनी साइट तैयार करें

इस ट्यूटोरियल के साथ फॉलो करने के लिए आपके पास एक Next.js ब्लॉग होना चाहिए। यदि आपके पास पहले से एक नहीं है, तो आप कर सकते हैं प्रतिक्रिया-मार्कडाउन का उपयोग करके मार्कडाउन-आधारित ब्लॉग बनाएं.

आप इससे आधिकारिक Next.js ब्लॉग स्टार्टर टेम्पलेट का क्लोन भी बना सकते हैं GitHub भंडार।

सुपरबेस एक फायरबेस विकल्प है जो पोस्टग्रेज डेटाबेस, ऑथेंटिकेशन, इंस्टेंट एपीआई, एज फंक्शंस, रियल-टाइम सब्सक्रिप्शन और स्टोरेज प्रदान करता है।

instagram viewer

आप इसका उपयोग प्रत्येक ब्लॉग पोस्ट के पेज व्यू को स्टोर करने के लिए करेंगे।

एक सुपरबेस डेटाबेस बनाएँ

पर जाएँ सुपरबेस वेबसाइट और साइन इन करें या किसी खाते के लिए साइन अप करें।

Supabase डैशबोर्ड पर क्लिक करें नया काम और एक संगठन चुनें (Supababase ने आपके खाते के उपयोगकर्ता नाम के तहत एक संगठन बनाया होगा)।

प्रोजेक्ट का नाम और पासवर्ड भरें और फिर क्लिक करें नया प्रोजेक्ट बनाएं।

एपीआई सेक्शन के तहत सेटिंग पेज में, प्रोजेक्ट URL और पब्लिक और सीक्रेट की को कॉपी करें।

खोलें .env.स्थानीय नेक्स्ट.जेएस प्रोजेक्ट में फाइल करें और इन एपीआई विवरणों को कॉपी करें।

NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\एन

अगला, SQL संपादक पर नेविगेट करें और क्लिक करें नया प्रश्न.

उपयोग तालिका बनाने के लिए मानक SQL कमांड बुलाया दृश्य.

बनाएंमेज देखे जाने की संख्या (\n पहचानbigintआप जेनरेट हुईद्वारागलती करनाजैसापहचान प्राथमिक चाबी,\n स्लग मूलपाठअद्वितीयनहींव्यर्थ,\n view_count bigintगलती करना1नहींव्यर्थ,\n अपडेट_एट TIMESTAMPगलती करनाअब() नहींव्यर्थ\n);\n

वैकल्पिक रूप से, आप व्यू टेबल बनाने के लिए टेबल एडिटर का उपयोग कर सकते हैं:

तालिका संपादक डैशबोर्ड के बाएँ फलक पर है।

दृश्यों को अपडेट करने के लिए एक सुपरबेस संग्रहित प्रक्रिया बनाएँ

Postgres में SQL फ़ंक्शंस के लिए अंतर्निहित समर्थन है जिसे आप Supabase API के माध्यम से कॉल कर सकते हैं। यह फ़ंक्शन व्यू टेबल में व्यू काउंट बढ़ाने के लिए जिम्मेदार होगा।

डेटाबेस फ़ंक्शन बनाने के लिए, इन निर्देशों का पालन करें:

  1. बाएँ फलक पर SQL संपादक अनुभाग पर जाएँ।
  2. नई क्वेरी पर क्लिक करें।
  3. डेटाबेस फ़ंक्शन बनाने के लिए इस SQL ​​​​क्वेरी को जोड़ें। 
    बनाएंयाबदलनासमारोह अपडेट_व्यू (पेज_स्लग मूलपाठ)
    रिटर्न खालीपन
    भाषा plpgsql
    जैसा $$
    शुरू
     अगर मौजूद है (चुननासे दृश्य कहाँ स्लग = पेज_स्लग) तब
    अद्यतन दृश्य
    तय करना व्यू_काउंट = व्यू_काउंट + 1,
     अपडेट_एट = अभी ()
     जहां स्लग = पेज_स्लग;
    अन्य
    डालनामें विचार (स्लग) मान (पेज_स्लग);
    अंतअगर;
    अंत;
    $$;
  4. क्वेरी निष्पादित करने के लिए रन या सीएमडी + एंटर (Ctrl + एंटर) पर क्लिक करें।

इस SQL ​​फ़ंक्शन को update_views कहा जाता है और एक टेक्स्ट तर्क स्वीकार करता है। यह पहले जांचता है कि क्या वह ब्लॉग पोस्ट पहले से ही टेबल में मौजूद है और यदि ऐसा होता है, तो यह इसकी व्यू काउंट को 1 से बढ़ा देता है। यदि ऐसा नहीं होता है, तो यह उस पोस्ट के लिए एक नई प्रविष्टि बनाता है जिसकी दृश्य गणना डिफ़ॉल्ट रूप से 1 हो जाती है।

नेक्स्ट.जेएस में सुपरबेस क्लाइंट सेट अप करें

सुपरबेस को स्थापित और कॉन्फ़िगर करें

Next.js से डेटाबेस से कनेक्ट करने के लिए npm के माध्यम से @supbase/supabase-js पैकेज इंस्टॉल करें।

एनपीएम इंस्टॉल करें @supbase/supabase-js\n

अगला, एक बनाएँ /lib/supabase.ts अपने प्रोजेक्ट के रूट में फाइल करें और Supbase क्लाइंट को इनिशियलाइज़ करें।

आयात {क्रिएट क्लाइंट} से'@सुपाबेस/सुपबेस-जेएस';\nconst supabaseUrl: string = process.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: string = process.env. SUPABASE_SERVICE_KEY || '';

याद रखें कि जब आपने डेटाबेस बनाया था तब आपने एपीआई क्रेडेंशियल्स को .env.local में सहेजा था।

पृष्ठ दृश्य अपडेट करें

एक एपीआई रूट बनाएं जो सुपाबेस से पृष्ठ दृश्य प्राप्त करता है और जब भी कोई उपयोगकर्ता किसी पृष्ठ पर जाता है तो दृश्य संख्या को अपडेट करता है।

आप इस मार्ग को में बनाएंगे /api नामक फ़ाइल के अंदर फ़ोल्डर विचार/[स्लग] .टीएस. फ़ाइल नाम के चारों ओर ब्रैकेट का उपयोग गतिशील मार्ग बनाता है। मिलान किए गए पैरामीटर स्लग नामक क्वेरी पैरामीटर के रूप में भेजे जाएंगे।

आयात {सुपरबेस} से"../../../lib/supabase/admin"\Nimport { NextApiRequest, NextApiResponse } से"अगला";\nस्थिर हैंडलर = async (अनुरोध: NextApiRequest, आर ई: NextApiResponse) => {\n अगर (अनुरोध विधि "डाक") {\एन इंतजार सुपाबेस.आरपीसी ("अपडेट_व्यू", {\n पेज_स्लग: req.query.slug,\n });\n वापस करना res.status (200.json({\n संदेश: "सफलता",\n });\n }\n अगर (अनुरोध विधि "पाना") {\एन कॉन्स्ट {डेटा} = इंतजार सुपरबेस\n .से("विचार")\n .चुनें("देखे जाने की संख्या")\n .फ़िल्टर("स्लग", "ईक", req.query.slug);\n अगर (डेटा) {\n वापस करना res.status (200.json({\n कुल: डेटा[0]?.view_count || 0,\n });\n }\n }\n वापस करना res.status (400.json({\n संदेश: "अमान्य अनुरोध",\n});\n};\nexport गलती करना हैंडलर;\n

पहला यदि कथन जाँचता है कि अनुरोध एक POST अनुरोध है या नहीं। यदि ऐसा है, तो यह update_views SQL फ़ंक्शन को कॉल करता है और स्लग में एक तर्क के रूप में गुजरता है। फ़ंक्शन दृश्य संख्या में वृद्धि करेगा या इस पोस्ट के लिए एक नई प्रविष्टि बनाएगा।

दूसरा if स्टेटमेंट चेक करता है कि रिक्वेस्ट GET मेथड है या नहीं। यदि ऐसा है, तो यह उस पोस्ट के लिए कुल व्यू काउंट प्राप्त करता है और उसे वापस कर देता है।

यदि अनुरोध POST या GET अनुरोध नहीं है, तो हैंडलर फ़ंक्शन "अमान्य अनुरोध" संदेश लौटाता है।

ब्लॉग में पृष्ठ दृश्य जोड़ें

पृष्ठ दृश्यों को ट्रैक करने के लिए, जब भी कोई उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है, तो आपको हर बार एपीआई मार्ग को हिट करने की आवश्यकता होती है।

एसडब्ल्यूआर पैकेज स्थापित करके प्रारंभ करें। आप इसका उपयोग एपीआई से डेटा लाने के लिए करेंगे।

NPM स्थापित करना एसडब्ल्यूआर\n

एसडब्ल्यूआर का मतलब पुनर्वैधीकरण के दौरान बासी है। पृष्ठभूमि में अप-टू-डेट डेटा लाने के दौरान यह आपको उपयोगकर्ता को दृश्य प्रदर्शित करने की अनुमति देता है।

फिर viewCounter.tsx नामक एक नया घटक बनाएँ और निम्नलिखित जोड़ें:

आयात उपयोगSWR से"स्वर";\nइंटरफ़ेस प्रॉप्स {\n स्लग: स्ट्रिंग;\n}\nconst फ़ेचर = async (इनपुट: RequestInfo) => {\n कॉन्स्ट रेस: प्रतिक्रिया = इंतजार फ़ेच (इनपुट);\n वापस करनाइंतजार res.json();\n};\nconst ViewCounter = ({स्लग}: सहारा) => {\nस्थिरांक {डेटा} = उपयोगएसडब्ल्यूआर(`/एपीआई/विचार/${स्लग}`, फ़ेचर);\nवापसी (\n {`${\n (डेटा?.कुल)? डेटा.कुल :"0"\एन } विचार'}</span>\n );\n};\nexport डिफ़ॉल्ट ViewCounter;\n

यह घटक प्रत्येक ब्लॉग के लिए कुल दृश्य प्रस्तुत करता है। यह एक पोस्ट के स्लग को एक प्रोप के रूप में स्वीकार करता है और एपीआई के लिए अनुरोध करने के लिए उस मूल्य का उपयोग करता है। यदि एपीआई दृश्य लौटाता है, तो यह उस मान को प्रदर्शित करता है अन्यथा यह "0 दृश्य" प्रदर्शित करता है।

दृश्य दर्ज करने के लिए, निम्नलिखित कोड को उस घटक में जोड़ें जो प्रत्येक पोस्ट को प्रस्तुत करता है।

आयात {उपयोग प्रभाव} से"प्रतिक्रिया";\nimport ViewCounter से"../../components/viewsCounter";\nइंटरफ़ेस प्रॉप्स {\n स्लग: स्ट्रिंग;\n}\nconst पोस्ट = ({स्लग}: सहारा) => {\n उपयोग प्रभाव (() => {\n प्राप्त करें (`/एपीआई/विचार/${स्लग}`, {\n विधि: 'डाक'\n });\n }, [स्लग]);\nरिटर्न (\n 
\एन \एन // ब्लॉग सामग्री\n 

\n)\n}\nडिफ़ॉल्ट पोस्ट निर्यात करें\n

व्यू काउंट कैसे अपडेट हो रहा है यह देखने के लिए सुपरबेस डेटाबेस की जाँच करें। हर बार जब आप किसी पोस्ट पर जाते हैं तो इसमें 1 की वृद्धि होनी चाहिए।

पृष्ठ दृश्य से अधिक ट्रैकिंग

पृष्ठ दृश्य आपको यह बताते हैं कि कितने उपयोगकर्ता आपकी साइट पर विशिष्ट पृष्ठों पर जा रहे हैं। आप देख सकते हैं कि कौन से पृष्ठ अच्छा प्रदर्शन कर रहे हैं और कौन से नहीं।

इससे भी आगे जाने के लिए, यह देखने के लिए कि ट्रैफ़िक कहां से आ रहा है या डेटा को बेहतर ढंग से देखने में सहायता के लिए एक डैशबोर्ड बनाएं, अपने विज़िटर के रेफ़रलकर्ता पर नज़र रखें। याद रखें कि आप Google Analytics जैसे एनालिटिक्स टूल का उपयोग करके चीजों को हमेशा सरल बना सकते हैं।