Analytics

Partiamo dalla verità: nel package.json di ZeroToShip non c'è nessuna libreria di analytics. Niente @vercel/analytics, niente Google Analytics, niente Posthog. Quello che c'è è uno <Script> di DataFast messo a mano in app/layout.tsx, e va sistemato prima di andare in produzione.

Lo script che è già lì

<Script
  defer
  data-website-id="dfid_7vpxglFCL5QrTJuhBlKnv"
  data-domain="zerotoship.it"
  src="https://datafa.st/js/script.cookieless.js"
/>

Quel data-website-id e quel data-domain sono del sito di ZeroToShip, non tuoi. Se lo lasci così, il tuo traffico va (o non va) nella dashboard sbagliata. Due opzioni, entrambe da fare come prima cosa:

• Cancellalo. Rimuovi il blocco <Script> e l'import Script from “next/script” in cima al file, e passi a Vercel Analytics (sotto).
• Riusalo con i tuoi valori. DataFast è cookieless, quindi non ti serve il banner cookie: crea il tuo sito su datafa.st e sostituisci i due attributi con i tuoi.

Vercel Analytics, l'opzione naturale

Siccome il deploy di questo boilerplate va su Vercel, l'integrazione più corta è la loro: nessun account extra, nessuna chiave, dati raccolti lato piattaforma. Non è installata — questi sono i passaggi reali per aggiungerla.

npm install @vercel/analytics @vercel/speed-insights

Poi monti i due componenti dentro il <body> del root layout, subito dopo ClientLayout:

import { Analytics } from "@vercel/analytics/next";
import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html
      lang="it"
      data-theme={config.colors.theme}
      className={`${font.variable} ${font.className}`}
    >
      <body>
        <ClientLayout>{children}</ClientLayout>
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Ultimo passo, quello che tutti dimenticano: nella dashboard Vercel, progetto → tab Analytics → Enable. Senza quel click il componente non raccoglie niente. In locale non vedrai dati: gli eventi partono solo dai deploy.

Analytics ti dà pageview, referrer, paesi e device. SpeedInsights raccoglie i Core Web Vitals reali degli utenti (LCP, CLS, INP) — quelli che contano per il posizionamento, non i numeri sintetici di Lighthouse. Si sposa bene con quello che già fai lato SEO.

Eventi custom

I pageview arrivano da soli. Per le conversioni che ti interessano davvero — click sul checkout, iscrizione alla waitlist, login completato — traccia gli eventi a mano da un Client Component:

"use client";
import { track } from "@vercel/analytics";

const handleClick = async () => {
  track("checkout_started", { priceId });
  // ...poi la chiamata ad apiClient
};

Regola pratica: traccia cinque eventi, non cinquanta. Visita landing, click su CTA, signup, checkout aperto, pagamento completato. Con quelli hai già l'imbuto completo e sai dove perdi gente.

L'alternativa privacy-friendly

Se vuoi restare fuori dal recinto Vercel o non vuoi mostrare il banner cookie, Plausible è lo standard: cookieless, niente dati personali, conforme al GDPR senza consenso, script da meno di 1 KB, e puoi anche self-hostarlo. Si integra con lo stesso pattern dello script DataFast già presente, quindi è letteralmente una sostituzione:

import Script from "next/script";

<Script
  defer
  data-domain="tuodominio.com"
  src="https://plausible.io/js/script.js"
/>

Per gli eventi custom Plausible espone una funzione globale window.plausible (serve lo script script.tagged-events.js o l'API manuale):

declare global {
  interface Window {
    plausible?: (event: string, options?: { props: Record<string, string> }) => void;
  }
}

window.plausible?.("checkout_started", { props: { priceId } });

Cosa non fare

• Non montare due sistemi di analytics “per sicurezza”: raddoppi lo script caricato e i numeri non torneranno mai tra loro.
• Google Analytics 4 usa cookie: in Europa ti serve un banner di consenso, e i dati che raccogli prima del consenso sono da buttare. Se il tuo obiettivo è solo sapere quante persone atterrano e comprano, uno strumento cookieless è più semplice e più onesto.
• Non mettere chiavi private negli script client: qualsiasi cosa finisca in app/layout.tsx è pubblica. Le variabili sensibili stanno in .env e restano lato server.