Analítica sin cookies para Next.js en 2 minutos

La instalación en tres pasos#

1. 1

   Instalación

   npm i @shipabase/js

   NEXT_PUBLIC_SHIPABASE_KEY=SB-EU-xxxxxxxxxx

2. 2

   Llama a init una vez, en el cliente

   1"use client";2 3import { useEffect } from "react";4import { init } from "@shipabase/js";5 6export function Providers({ children }: { children: React.ReactNode }) {7  useEffect(() => {8    init(process.env.NEXT_PUBLIC_SHIPABASE_KEY!);9  }, []);10  return <>{children}</>;11}

   Envuelve {children} en app/layout.tsx con <Providers>. Nunca llames a init en un Server Component.

3. 3

   Mide lo que importa

   1import { trackEvent } from "@shipabase/js";2 3trackEvent("project_created", { plan: "pro" });

   • Nombra los eventos en snake_case, con formato object_verb y en pasado: signup_completed, invoice_sent.
   • Lo habitual son entre 5 y 15 eventos. Mide acciones, no cada clic.
   • Mantén las props anónimas: plan, count, variant. Nunca emails ni IDs de usuario.

Para el Pages Router y la referencia completa, consulta la guía de instalación de Next.js.

¿Por qué no hace falta banner de cookies?#

El SDK no guarda nada en el navegador: ni cookies ni localStorage. Los visitantes se cuentan con un hash anónimo que cambia cada día. Consulta cómo se cuentan los visitantes para más detalles.