Aggiungere Analytics Rispettosi della Privacy a un'App Next.js
Una guida passo-passo per integrare Monoid in Next.js senza cookie, banner di consenso o grattacapi di conformità.
Le applicazioni Next.js hanno alcuni approcci comuni agli analytics, e la maggior parte di essi comporta o un banner per i cookie o uno script pesante di terze parti che rallenta i tuoi Core Web Vitals. Ecco come aggiungere analytics in tempo reale e orientati alla privacy senza nessuno dei due.
Cosa otterrai
- Tracciamento delle pageview a ogni cambio di route, inclusa la navigazione lato client
- Conteggio dei visitatori, referrer, paesi, famiglie di browser e tipi di dispositivo
- Niente cookie, niente fingerprinting, nessun consenso GDPR richiesto
- Un singolo tag script async — nessun pacchetto npm da mantenere
Passo 1: Crea un account Monoid
Iscriviti su monoid.website e crea un nuovo sito. Riceverai un site_id — un breve identificatore alfanumerico per la tua proprietà.
Passo 2: Aggiungi il tracker al tuo layout
In Next.js 13+ con l'App Router, aggiungi lo script tracker al tuo layout.tsx principale:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://api.monoid.website/tracker.min.js"
data-site-id="YOUR_SITE_ID"
strategy="afterInteractive"
/>
</body>
</html>
)
}
Usare strategy="afterInteractive" carica lo script dopo che la pagina diventa interattiva, mantenendo inalterato il punteggio del tuo Largest Contentful Paint.
Passo 3: Gestire la navigazione lato client
L'hook history.pushState integrato nel tracker si attiva automaticamente a ogni evento di navigazione sia nel Pages Router sia nell'App Router. Non hai bisogno di aggiungere altro.
Se vuoi inviare eventi personalizzati — ad esempio, quando un utente completa un checkout o clicca un pulsante specifico — chiama direttamente l'helper globale:
window.monoid('event', 'checkout_complete')
Passo 4: Verifica nella dashboard
Apri la tua dashboard Monoid e naviga su una pagina del tuo sito. Dovresti vedere un visitatore live apparire nel feed in tempo reale entro pochi secondi. Se hai configurato un ambiente di staging, assicurati che usi un site_id separato in modo che il traffico di sviluppo non inquini le tue metriche di produzione.
Cosa non è richiesto
Non hai bisogno di installare un gestore di consenso per i cookie. Non hai bisogno di aggiornare la tua privacy policy per menzionare i cookie di analytics (perché non ce ne sono). E non hai bisogno di un pacchetto npm — il tracker è un singolo file JavaScript vanilla servito da una rete edge globale.
La famiglia di browser e il tipo di dispositivo vengono derivati lato server dal normale User-Agent della richiesta per il reporting aggregato. Le stringhe User-Agent complete, le versioni del browser, i cookie, gli identificatori persistenti e i fingerprint dei dispositivi non vengono mai memorizzati.
Per la maggior parte dei progetti Next.js, ci vogliono meno di due minuti dall'iscrizione ai dati live.