Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

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 tienes uno, puedes 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 GitHub repositorio.

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.

instagram viewer

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

Crear una base de datos Supabase

Ve a la Sitio web de Supabase e inicie sesión o regístrese para obtener una cuenta.

En el tablero de Supabase, haga clic en Nuevo proyecto y elige una organización (Supabase habrá creado una organización bajo el nombre de usuario de tu cuenta).

Complete el nombre del proyecto y la contraseña y 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.

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

SIGUIENTE_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\norte

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

Utilizar el comando SQL estándar para crear una tabla llamado puntos de vista.

CREARMESA vistas (\n identificaciónEmpezandoGENERADOPORPOR DEFECTOCOMOIDENTIDAD PRIMARIO LLAVE,\n babosa textoÚNICONONULO,\n número_vistas EmpezandoPOR DEFECTO1NONULO,\n actualizado_en marca de tiempoPOR DEFECTOAHORA() NONULO\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. 
    CREAROREEMPLAZARFUNCIÓN actualizar_vistas (page_slug TEXTO)
    DEVOLUCIONES vacío
    IDIOMA plpgsql
    COMO $$
    COMENZAR
     SI EXISTE (SELECCIONARDE puntos de vista DÓNDE slug=page_slug) ENTONCES
    ACTUALIZAR puntos de vista
    COLOCAR ver_contar = ver_contar + 1,
     actualizado_a = ahora()
     DONDE slug = página_slug;
    DEMÁS
    INSERTARen vistas (babosa) VALORES (pagina_slug);
    FINSI;
    FIN;
    $$;
  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 es así, 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.

instalar npm @supabase/supabase-js\n

A continuación, cree un /lib/supabase.ts archivo en la raíz de su proyecto e inicialice el cliente de Supabase.

importar { crear cliente } de'@supabase/supabase-js';\nconst supabaseUrl: cadena = proceso.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: cadena = proceso.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ás esta ruta en el /api carpeta dentro de un archivo llamado vistas/[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.

importar {superbase} de"../../../lib/subase/admin";\nimport {PróximaSolicitudApi, SiguienteRespuestaApi} de"próximo";\ncontrolador constante = asíncrono (requerido: NextApiRequest, resolución: NextApiResponse) => {\n si (método requerido "CORREO") {\n esperar supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n devolver res.status(200).json({\n mensaje: "Éxito",\n });\n }\n si (método requerido "CONSEGUIR") {\n constante {datos} = esperar supabase\n .desde("puntos de vista")\n .seleccionar("conteo de visitas")\n .filtro("babosa", "equivalente", req.consulta.slug);\n si (datos) {\n devolver res.status(200).json({\n total: datos[0]?.view_count || 0,\n });\n }\n }\n devolver res.status(400).json({\n mensaje: "Solicitud no válida",\n });\n};\exportar por defecto controlador;\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 instalar 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:

importar usar ROE de"swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = asíncrono (entrada: RequestInfo) => {\n constante res: Respuesta = esperar buscar (entrada);\n devolveresperar res.json();\n};\nconst VistasContador = ({ babosa }: Accesorios) => {\nconst {datos} = useSWR(`/api/vistas/${babosa}`, buscar);\nreturn (\n {`${\n (datos?.total)? datos.total :"0"\n} vistas`}</span>\n );\n};\nexportar ViewsCounter predeterminado;\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.

importar { efecto de uso } de"reaccionar";\nimportar contador de vistas de"../../componentes/contador de vistas";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }:Accesorios) => {\n usarEfecto(() => {\n buscar(`/api/vistas/${babosa}`, {\n método: 'CORREO'\n });\n }, [slug]);\nreturn (\n 
\norte \norte // contenido del blog\n 

\n)\n}\nexportar publicación predeterminada\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.