Cómo realizar un seguimiento de las visitas a la página en su blog usando Supabase

Las visitas a la página son una métrica importante para el seguimiento del rendimiento web. Las herramientas de software como Google Analytics y Fathom brindan una manera simple de hacer esto con un script externo.

Pero tal vez no quiera usar una biblioteca de terceros. En tal caso, puede utilizar una base de datos para realizar un seguimiento de los visitantes de su sitio.

Supabase es una alternativa de Firebase de código abierto que puede ayudarlo a realizar un seguimiento de las visitas a la página en tiempo real.

Prepare su sitio para comenzar a rastrear las visitas a la página

Debe tener un blog de Next.js para seguir este tutorial. Si aún no tiene uno, puede crear un blog basado en Markdown usando react-markdown.

También puede clonar la plantilla de inicio de blog oficial de Next.js desde su repositorio de GitHub .

Supabase es una alternativa de Firebase que proporciona una base de datos Postgres, autenticación, API instantáneas, funciones Edge, suscripciones en tiempo real y almacenamiento.

Lo usará para almacenar las vistas de página para cada publicación de blog.

Crear una base de datos Supabase

Vaya al sitio web de Supabase e inicie sesión o regístrese para obtener una cuenta.

En el panel de control de Supabase, haga clic en Nuevo proyecto y elija una organización (Supabase habrá creado una organización con el nombre de usuario de su cuenta).

Complete el nombre del proyecto y la contraseña, luego haga clic en Crear nuevo proyecto.

En la página de configuración en la sección API, copie la URL del proyecto y las claves pública y secreta.

Abra el archivo .env.local en el proyecto Next.js y copie estos detalles de la API.

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

A continuación, navegue hasta el editor de SQL y haga clic en Nueva consulta .

Utilice el comando SQL estándar para crear una tabla llamada vistas .

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

Alternativamente, puede usar el editor de tablas para crear la tabla de vistas:

El editor de tablas se encuentra en el panel izquierdo del tablero.

Cree un procedimiento almacenado en Supabase para actualizar las vistas

Postgres tiene soporte integrado para funciones SQL a las que puede llamar a través de la API de Supabase. Esta función será responsable de incrementar el conteo de vistas en la tabla de vistas.

Para crear una función de base de datos, siga estas instrucciones:

1. Vaya a la sección del editor de SQL en el panel izquierdo.
2. Haga clic en Nueva consulta.
3. Agregue esta consulta SQL para crear la función de base de datos. 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;
$$;

4. Haga clic en Ejecutar o Cmd + Enter (Ctrl + Enter) para ejecutar la consulta.

Esta función SQL se llama update_views y acepta un argumento de texto. Primero verifica si esa publicación de blog ya existe en la tabla y, si existe, incrementa su recuento de vistas en 1. Si no es así, crea una nueva entrada para la publicación cuyo recuento de vistas predeterminado es 1.

Configurar el cliente de Supabase en Next.js

Instalar y configurar Supabase

Instale el paquete @supabase/supabase-js a través de npm para conectarse a la base de datos desde Next.js.

npm install @supabase/supabase-js\n

A continuación, cree un archivo /lib/supabase.ts en la raíz de su proyecto e inicialice el cliente de 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

Recuerde que guardó las credenciales de la API en . env.local cuando creó la base de datos.

Actualizar vistas de página

Cree una ruta API que obtenga las vistas de página de Supabase y actualice el recuento de vistas cada vez que un usuario visita una página.

Creará esta ruta en la carpeta /api dentro de un archivo llamado views/[slug].ts . El uso de corchetes alrededor del nombre del archivo crea una ruta dinámica. Los parámetros coincidentes se enviarán como un parámetro de consulta llamado 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

La primera instrucción if verifica si la solicitud es una solicitud POST. Si es así, llama a la función SQL update_views y pasa el slug como argumento. La función incrementará el conteo de vistas o creará una nueva entrada para esta publicación.

La segunda instrucción if verifica si la solicitud es un método GET. Si es así, obtiene el recuento total de vistas de esa publicación y lo devuelve.

Si la solicitud no es una solicitud POST o GET, la función del controlador devuelve un mensaje de «Solicitud no válida».

Agregar páginas vistas al blog

Para realizar un seguimiento de las visitas a la página, debe acceder a la ruta API cada vez que un usuario navega a una página.

Comience instalando el paquete swr. Lo usará para obtener los datos de la API.

npm install swr\n

swr significa obsoleto mientras se revalida. Le permite mostrar las vistas al usuario mientras obtiene datos actualizados en segundo plano.

Luego cree un nuevo componente llamado viewsCounter.tsx y agregue lo siguiente:

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

Este componente representa las vistas totales de cada blog. Acepta el slug de una publicación como accesorio y usa ese valor para realizar la solicitud a la API. Si la API devuelve vistas, muestra ese valor; de lo contrario, muestra «0 vistas».

Para registrar vistas, agregue el siguiente código al componente que representa cada publicación.

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

Consulte la base de datos de Supabase para ver cómo se actualiza el recuento de vistas. Debería aumentar en 1 cada vez que visite una publicación.

Seguimiento de más que páginas vistas

Las vistas de página le permiten saber cuántos usuarios visitan páginas específicas de su sitio. Puede ver qué páginas funcionan bien y cuáles no.

Para ir aún más lejos, realice un seguimiento de la referencia de su visitante para ver de dónde proviene el tráfico o cree un tablero para ayudar a visualizar mejor los datos. Recuerde que siempre puede simplificar las cosas utilizando una herramienta de análisis como Google Analytics.