Home-theater-designers
Les pages vues sont une mesure importante pour le suivi des performances Web. Des outils logiciels comme Google Analytics et Fathom offrent un moyen simple de le faire avec un script externe.
Mais peut-être que vous ne voulez pas utiliser une bibliothèque tierce. Dans un tel cas, vous pouvez utiliser une base de données pour suivre les visiteurs de votre site.
Supabase est une alternative Firebase open source qui peut vous aider à suivre les pages vues en temps réel.
Préparez votre site pour commencer à suivre les pages vues
Vous devez avoir un blog Next.js pour suivre ce tutoriel. Si vous n'en avez pas déjà un, vous pouvez créer un blog basé sur Markdown en utilisant react-markdown .
Vous pouvez également cloner le modèle de démarrage de blog officiel Next.js à partir de son GitHub dépôt.
Supabase est une alternative à Firebase qui fournit une base de données Postgres, une authentification, des API instantanées, des fonctions Edge, des abonnements en temps réel et un stockage.
Vous l'utiliserez pour stocker les pages vues pour chaque article de blog.
Créer une base de données Supabase
Allez à la Site Web Supabase et connectez-vous ou créez un compte.
Sur le tableau de bord Supabase, cliquez sur Nouveau projet et choisissez une organisation (Supabase aura créé une organisation sous le nom d'utilisateur de votre compte).
Remplissez le nom du projet et le mot de passe puis cliquez sur Créer un nouveau projet.
Dans la page des paramètres sous la section API, copiez l'URL du projet et les clés publique et secrète.
Ouvrez le .env.local fichier dans le projet Next.js et copiez ces détails d'API.
NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\nEnsuite, accédez à l'éditeur SQL et cliquez sur Nouvelle requête .
Utilisez le commande SQL standard pour créer une table appelé vues .
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);\nVous pouvez également utiliser l'éditeur de table pour créer la table des vues :
L'éditeur de tableau se trouve dans le volet gauche du tableau de bord.
Créer une procédure stockée Supabase pour mettre à jour les vues
Postgres a un support intégré pour les fonctions SQL que vous pouvez appeler via l'API Supabase. Cette fonction sera responsable de l'incrémentation du nombre de vues dans la table des vues.
Pour créer une fonction de base de données, suivez ces instructions :
- Accédez à la section de l'éditeur SQL dans le volet de gauche.
- Cliquez sur Nouvelle requête.
- Ajoutez cette requête SQL pour créer la fonction de base de données.
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;
$$; - Cliquez sur Exécuter ou Cmd + Entrée (Ctrl + Entrée) pour exécuter la requête.
Cette fonction SQL s'appelle update_views et accepte un argument textuel. Il vérifie d'abord si cet article de blog existe déjà dans le tableau et si c'est le cas, il incrémente son nombre de vues de 1. Si ce n'est pas le cas, il crée une nouvelle entrée pour l'article dont le nombre de vues par défaut est 1.
Configurer le client Supabase dans Next.js
Installer et configurer Supabase
Installez le package @supabase/supabase-js via npm pour vous connecter à la base de données à partir de Next.js.
npm install @supabase/supabase-js\nEnsuite, créez un /lib/supabase.ts à la racine de votre projet et initialisez le client 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 };\nN'oubliez pas que vous avez enregistré les informations d'identification de l'API dans .env.local lors de la création de la base de données.
comment trouver une adresse ip depuis un email
Mettre à jour les pages vues
Créez une route API qui récupère les pages vues de Supabase et met à jour le nombre de vues chaque fois qu'un utilisateur visite une page.
Vous allez créer cet itinéraire dans le /api dossier à l'intérieur d'un fichier appelé vues/[slug].ts . L'utilisation de crochets autour du nom de fichier crée un itinéraire dynamique. Les paramètres correspondants seront envoyés en tant que paramètre de requête appelé 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;\nLa première instruction if vérifie si la requête est une requête POST. Si c'est le cas, il appelle la fonction SQL update_views et passe le slug comme argument. La fonction augmentera le nombre de vues ou créera une nouvelle entrée pour ce message.
La seconde instruction if vérifie si la requête est une méthode GET. Si c'est le cas, il récupère le nombre total de vues pour ce message et le renvoie.
Si la requête n'est pas une requête POST ou GET, la fonction de gestionnaire renvoie un message « Requête invalide ».
Ajouter des pages vues au blog
Pour suivre les pages vues, vous devez accéder à la route de l'API chaque fois qu'un utilisateur accède à une page.
Commencez par installer le package swr. Vous l'utiliserez pour récupérer les données de l'API.
npm install swr\nswr signifie obsolète pendant la revalidation. Il vous permet d'afficher les vues à l'utilisateur tout en récupérant des données à jour en arrière-plan.
Créez ensuite un nouveau composant appelé viewsCounter.tsx et ajoutez ce qui suit :
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;\nCe composant affiche le nombre total de vues pour chaque blog. Il accepte le slug d'un message comme accessoire et utilise cette valeur pour faire la demande à l'API. Si l'API renvoie des vues, elle affiche cette valeur sinon elle affiche '0 vues'.
Pour enregistrer des vues, ajoutez le code suivant au composant qui affiche chaque publication.
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\nVérifiez la base de données Supabase pour voir comment le nombre de vues est mis à jour. Il devrait augmenter de 1 chaque fois que vous visitez un poste.
Suivre plus que les pages vues
Les pages vues vous permettent de savoir combien d'utilisateurs visitent des pages spécifiques de votre site. Vous pouvez voir quelles pages fonctionnent bien et lesquelles ne le sont pas.
Pour aller encore plus loin, gardez une trace du référent de votre visiteur pour voir d'où vient le trafic ou créez un tableau de bord pour aider à mieux visualiser les données. N'oubliez pas que vous pouvez toujours simplifier les choses en utilisant un outil d'analyse comme Google Analytics.