Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Οι προβολές σελίδας είναι μια σημαντική μέτρηση για την παρακολούθηση της απόδοσης ιστού. Εργαλεία λογισμικού όπως το Google Analytics και το Fathom παρέχουν έναν απλό τρόπο για να το κάνετε αυτό με ένα εξωτερικό σενάριο.

Αλλά ίσως δεν θέλετε να χρησιμοποιήσετε μια βιβλιοθήκη τρίτου μέρους. Σε μια τέτοια περίπτωση, μπορείτε να χρησιμοποιήσετε μια βάση δεδομένων για να παρακολουθείτε τους επισκέπτες του ιστότοπού σας.

Το Supabase είναι μια εναλλακτική λύση Firebase ανοιχτού κώδικα που μπορεί να σας βοηθήσει να παρακολουθείτε τις προβολές σελίδας σε πραγματικό χρόνο.

Προετοιμάστε τον ιστότοπό σας για να ξεκινήσει η παρακολούθηση προβολών σελίδων

Πρέπει να έχετε ένα ιστολόγιο Next.js για να ακολουθήσετε αυτό το σεμινάριο. Εάν δεν έχετε ήδη ένα, μπορείτε δημιουργήστε ένα ιστολόγιο που βασίζεται σε Markdown χρησιμοποιώντας το react-markdown.

instagram viewer

Μπορείτε επίσης να κλωνοποιήσετε το επίσημο πρότυπο εκκίνησης ιστολογίου Next.js από αυτό GitHub αποθήκη.

Το Supabase είναι μια εναλλακτική λύση Firebase που παρέχει μια βάση δεδομένων Postgres, έλεγχο ταυτότητας, instant API, Λειτουργίες Edge, συνδρομές σε πραγματικό χρόνο και αποθήκευση.

Θα το χρησιμοποιήσετε για να αποθηκεύσετε τις προβολές σελίδας για κάθε ανάρτηση ιστολογίου.

Δημιουργήστε μια βάση δεδομένων Supabase

μεταβείτε στο Ιστοσελίδα Supabase και συνδεθείτε ή εγγραφείτε για λογαριασμό.

Στον πίνακα ελέγχου του Supabase, κάντε κλικ στο Νέο Έργο και επιλέξτε έναν οργανισμό (το Supabase θα έχει δημιουργήσει έναν οργανισμό με το όνομα χρήστη του λογαριασμού σας).

Συμπληρώστε το όνομα του έργου και τον κωδικό πρόσβασης και, στη συνέχεια, κάντε κλικ Δημιουργία νέου έργου.

Στη σελίδα ρυθμίσεων κάτω από την ενότητα API, αντιγράψτε τη διεύθυνση URL του έργου και τα δημόσια και μυστικά κλειδιά.

Ανοιξε το .env.τοπικό αρχείο στο έργο Next.js και αντιγράψτε αυτές τις λεπτομέρειες API.

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

Στη συνέχεια, μεταβείτε στον επεξεργαστή SQL και κάντε κλικ στο Νέο ερώτημα.

Χρησιμοποιήστε το τυπική εντολή SQL για τη δημιουργία πίνακα που ονομάζεται προβολές.

ΔΗΜΙΟΥΡΓΩΤΡΑΠΕΖΙ προβολές (\n ταυτότηταbigintΔΗΜΙΟΥΡΓΟΥΝΤΑΙΜΕΠΡΟΚΑΘΟΡΙΣΜΕΝΟΟΠΩΣ ΚΑΙΤΑΥΤΟΤΗΤΑ ΠΡΩΤΑΡΧΙΚΟΣ ΚΛΕΙΔΙ,\n γυμνοσάλιαγκος κείμενοΜΟΝΑΔΙΚΟΣΔΕΝΜΗΔΕΝΙΚΟ,\n view_count bigintΠΡΟΚΑΘΟΡΙΣΜΕΝΟ1ΔΕΝΜΗΔΕΝΙΚΟ,\n updated_at χρονική σήμανσηΠΡΟΚΑΘΟΡΙΣΜΕΝΟΤΩΡΑ() ΔΕΝΜΗΔΕΝΙΚΟ\n);\n

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το πρόγραμμα επεξεργασίας πίνακα για να δημιουργήσετε τον πίνακα προβολών:

Ο επεξεργαστής πίνακα βρίσκεται στο αριστερό παράθυρο του πίνακα εργαλείων.

Δημιουργήστε μια αποθηκευμένη διαδικασία Supabase για να ενημερώσετε τις προβολές

Η Postgres έχει ενσωματωμένη υποστήριξη για λειτουργίες SQL τις οποίες μπορείτε να καλέσετε μέσω του Supabase API. Αυτή η συνάρτηση θα είναι υπεύθυνη για την αύξηση του αριθμού προβολών στον πίνακα προβολών.

Για να δημιουργήσετε μια λειτουργία βάσης δεδομένων, ακολουθήστε αυτές τις οδηγίες:

  1. Μεταβείτε στην ενότητα επεξεργασίας SQL στο αριστερό παράθυρο.
  2. Κάντε κλικ στο Νέο ερώτημα.
  3. Προσθέστε αυτό το ερώτημα SQL για να δημιουργήσετε τη συνάρτηση βάσης δεδομένων. 
    ΔΗΜΙΟΥΡΓΩΉΑΝΤΙΚΑΘΙΣΤΩΛΕΙΤΟΥΡΓΙΑ update_views (page_slug ΚΕΙΜΕΝΟ)
    ΕΠΙΣΤΡΟΦΕΣ κενός
    ΓΛΩΣΣΑ plpgsql
    ΟΠΩΣ ΚΑΙ $$
    ΑΡΧΙΖΟΥΝ
     ΑΝ ΥΠΑΡΧΕΙ (ΕΠΙΛΕΓΩΑΠΟ προβολές ΟΠΟΥ slug=page_slug) ΕΠΕΙΤΑ
    ΕΚΣΥΓΧΡΟΝΙΖΩ προβολές
    ΣΕΙΡΑ view_count = view_count + 1,
     updated_at = τώρα()
     WHERE slug = page_slug;
    ΑΛΛΟΥ
    ΕΙΣΑΓΕΤΕσε προβολές (slug) ΑΞΙΕΣ (page_slug);
    ΤΕΛΟΣΑΝ;
    ΤΕΛΟΣ;
    $$;
  4. Κάντε κλικ στο Run ή στο Cmd + Enter (Ctrl + Enter) για να εκτελέσετε το ερώτημα.

Αυτή η συνάρτηση SQL ονομάζεται update_views και δέχεται ένα όρισμα κειμένου. Αρχικά ελέγχει αν αυτή η ανάρτηση ιστολογίου υπάρχει ήδη στον πίνακα και, εάν υπάρχει, αυξάνει τον αριθμό προβολών κατά 1. Εάν δεν το κάνει, δημιουργεί μια νέα καταχώρηση για την ανάρτηση της οποίας ο αριθμός προβολών είναι προεπιλεγμένος σε 1.

Ρυθμίστε το Supabase Client στο Next.js

Εγκαταστήστε και διαμορφώστε το Supabase

Εγκαταστήστε το πακέτο @supabase/supabase-js μέσω npm για να συνδεθείτε στη βάση δεδομένων από το Next.js.

npm εγκατάσταση @supabase/supabase-js\n

Στη συνέχεια, δημιουργήστε ένα /lib/supabase.ts αρχείο στη ρίζα του έργου σας και αρχικοποιήστε τον πελάτη Supabase.

εισαγωγή {createClient } από'@supbase/supbase-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 φάκελο μέσα σε ένα αρχείο που ονομάζεται απόψεις/[slug].τσ. Η χρήση αγκύλων γύρω από το όνομα του αρχείου δημιουργεί μια δυναμική διαδρομή. Οι αντιστοιχισμένες παράμετροι θα σταλούν ως παράμετρος ερωτήματος που ονομάζεται slug.

εισαγωγή { subbase } από"../../../lib/supbase/admin";\nεισαγωγή { NextApiRequest, NextApiResponse } από"Επόμενο";\nconst handler = ασυγχρονισμός (απαίτηση: NextApiRequest, res: NextApiResponse) => {\n αν (απαιτ.μέθοδος "ΘΕΣΗ") {\n αναμένω supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n ΕΠΙΣΤΡΟΦΗ res.status(200).json({\n μήνυμα: "Επιτυχία",\n });\n }\n αν (απαιτ.μέθοδος "ΠΑΙΡΝΩ") {\n συνθ { δεδομένα } = αναμένω supabase\n .από("προβολές")\n .επιλογή("view_count")\n .φίλτρο("γυμνοσάλιαγκας", "eq", 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};\εξαγωγή Προκαθορισμένο χειριστής;\n

Η πρώτη δήλωση if ελέγχει εάν το αίτημα είναι αίτημα POST. Εάν είναι, καλεί τη συνάρτηση update_views SQL και περνά στο slug ως όρισμα. Η συνάρτηση θα αυξήσει τον αριθμό προβολών ή θα δημιουργήσει μια νέα καταχώρηση για αυτήν την ανάρτηση.

Η δεύτερη δήλωση if ελέγχει εάν το αίτημα είναι μέθοδος GET. Εάν είναι, ανακτά το συνολικό πλήθος προβολών για αυτήν την ανάρτηση και το επιστρέφει.

Εάν το αίτημα δεν είναι αίτημα POST ή GET, η συνάρτηση χειριστή επιστρέφει ένα μήνυμα "Μη έγκυρο αίτημα".

Προσθήκη προβολών σελίδας στο ιστολόγιο

Για να παρακολουθείτε τις προβολές σελίδας, πρέπει να πατάτε τη διαδρομή API κάθε φορά που ένας χρήστης πλοηγείται σε μια σελίδα.

Ξεκινήστε εγκαθιστώντας το πακέτο swr. Θα το χρησιμοποιήσετε για να λάβετε τα δεδομένα από το API.

npm εγκαθιστώ swr\n

Το swr σημαίνει stale while revalidate. Σας επιτρέπει να εμφανίζετε τις προβολές στον χρήστη ενώ λαμβάνετε ενημερωμένα δεδομένα στο παρασκήνιο.

Στη συνέχεια, δημιουργήστε ένα νέο στοιχείο που ονομάζεται viewsCounter.tsx και προσθέστε τα εξής:

εισαγωγή χρήση SWR από"swr";\nInterface Props {\n slug: string;\n}\nconst fetcher = ασυγχρονισμός (εισαγωγή: RequestInfo) => {\n συνθ res: Response = αναμένω ανάκτηση (εισαγωγή);\n ΕΠΙΣΤΡΟΦΗαναμένω res.json();\n};\nconst ViewsCounter = ({ γυμνοσάλιαγκος }: στηρίγματα) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nεπιστροφή (\n {`${\n (data?.total); data.total :"0"\n } απόψεις».}</span>\n );\n};\εξαγωγή προεπιλεγμένου ViewsCounter;\n

Αυτό το στοιχείο αποδίδει τις συνολικές προβολές για κάθε ιστολόγιο. Αποδέχεται το slug μιας ανάρτησης ως στηρίγματα και χρησιμοποιεί αυτήν την τιμή για να υποβάλει το αίτημα στο API. Εάν το API επιστρέφει προβολές, εμφανίζει αυτήν την τιμή, διαφορετικά εμφανίζει "0 προβολές".

Για να καταχωρήσετε προβολές, προσθέστε τον ακόλουθο κώδικα στο στοιχείο που αποδίδει κάθε ανάρτηση.

εισαγωγή { useEffect } από"αντιδρώ";\nεισαγωγή ViewsCounter από"../../components/viewsCounter";\nInterface Props {\n slug: string;\n}\nconst Post = ({ γυμνοσάλιαγκος }:Στήριγμα) => {\n useEffect(() => {\n ανάκτηση(`/api/views/${slug}`, {\n μέθοδος: 'ΘΕΣΗ'\n });\n }, [slug]);\nreturn (\n 
\n \n // περιεχόμενο ιστολογίου\n 

\n)\n}\εξαγωγή προεπιλεγμένης ανάρτησης\n

Ελέγξτε τη βάση δεδομένων Supabase για να δείτε πώς ενημερώνεται ο αριθμός προβολών. Θα πρέπει να αυξάνεται κατά 1 κάθε φορά που επισκέπτεστε μια ανάρτηση.

Παρακολούθηση περισσότερων από προβολών σελίδας

Οι προβολές σελίδας σάς ενημερώνουν πόσοι χρήστες επισκέπτονται συγκεκριμένες σελίδες στον ιστότοπό σας. Μπορείτε να δείτε ποιες σελίδες έχουν καλή απόδοση και ποιες όχι.

Για να προχωρήσετε ακόμη περισσότερο, παρακολουθήστε τον σύνδεσμο παραπομπής του επισκέπτη σας για να δείτε από πού προέρχεται η επισκεψιμότητα ή δημιουργήστε έναν πίνακα ελέγχου που θα σας βοηθήσει να οπτικοποιήσετε καλύτερα τα δεδομένα. Να θυμάστε ότι μπορείτε πάντα να απλοποιήσετε τα πράγματα χρησιμοποιώντας ένα εργαλείο ανάλυσης όπως το Google Analytics.