Aggiungere Analytics Rispettosi della Privacy a un'App SvelteKit
SvelteKit 2 intercetta la navigazione lato client in modo diverso dagli altri framework. Ecco il pattern corretto per tracciare i cambi di route senza cookie né banner di consenso.
SvelteKit 2 rompe le integrazioni di analytics che agganciano la misurazione al ciclo di vita della pagina. Un semplice tag <script> si attiva una sola volta, al primo caricamento del documento, e mai più — quindi ogni navigazione lato client successiva resta invisibile. Il tracker di Monoid evita questo osservando la History API invece del ciclo di vita della pagina.
Perché un semplice tag script non basta
Un tag <script> in <svelte:head> viene eseguito una volta per caricamento del documento. Il router di SvelteKit 2 sostituisce il contenuto sul posto senza scaricare il documento, quindi nulla lo riesegue. Qualsiasi tracker il cui unico trigger sia DOMContentLoaded o load registra la route di ingresso e poi tace.
Questa è la causa principale del problema ampiamente segnalato in cui Google Analytics GA4 registra solo il primo pageview al caricamento iniziale nelle applicazioni SvelteKit 2.
Rilevare la navigazione stessa è la risposta, e non richiede un'integrazione specifica per SvelteKit. Il router lato client di SvelteKit aggiorna l'URL chiamando history.pushState, quindi un tracker che applica una patch a history.pushState osserva ogni cambio di route lato client senza sottoscrivere $app/navigation né alcun hook del framework.
L'approccio corretto
Aggiungi lo script tracker di Monoid una sola volta al tuo +layout.svelte principale usando <svelte:head>:
<svelte:head>
<script
async
src="https://api.monoid.website/tracker.min.js"
data-site-id="YOUR_SITE_ID"
></script>
</svelte:head>
Il listener DOMContentLoaded del tracker copre il caricamento iniziale della pagina. Per le navigazioni lato client successive, la sua patch di history.pushState viene eseguita immediatamente dopo che SvelteKit ha aggiornato l'URL, quindi legge il nuovo location.pathname e invia un pageview per ogni cambio di route.
Un avvertimento da conoscere: la patch copre pushState, non popstate. I pulsanti Indietro e Avanti cambiano la rotta senza chiamare pushState, quindi attualmente non producono un nuovo pageview.
Per verificare, apri la scheda Network in DevTools e osserva le richieste POST verso /collect. Dovresti vederne una per ogni cambio di route.
Separare il traffico di staging
I progetti SvelteKit tipicamente girano su localhost durante lo sviluppo. Registra un sito separato e associa il suo site_id a una variabile d'ambiente in modo che il traffico di sviluppo non inquini mai le metriche di produzione:
<script>
const siteId = import.meta.env.VITE_MONOID_SITE_ID
</script>
<svelte:head>
{#if siteId}
<script
async
src="https://api.monoid.website/tracker.min.js"
data-site-id={siteId}
></script>
{/if}
</svelte:head>
Imposta VITE_MONOID_SITE_ID in .env.local per lo sviluppo (oppure lasciala non impostata per sopprimere il tracking) e nel tuo ambiente di deployment per la produzione. Il blocco {#if siteId} garantisce che il tracker non venga mai iniettato quando la variabile non è impostata.
Cosa non ti serve
Nessun banner di consenso per i cookie. Nessun aggiornamento della cookie policy. Nessun controllo navigator.cookieEnabled. L'endpoint di raccolta deriva un hash giornaliero del visitatore a partire dall'indirizzo IP, dallo User-Agent, da un segreto lato server e dalla data corrente:
visitor_hash = SHA-256(IP + UA + SALT_SECRET + YYYY-MM-DD)
L'hash si reimposta ogni 24 ore e non può essere invertito per recuperare l'IP o lo User-Agent. Nulla viene memorizzato sul dispositivo del visitatore. Questo significa che l'integrazione non attiva i requisiti di consenso ePrivacy o PECR — non c'è nulla a cui acconsentire.
Verificare nella dashboard
Dopo il deployment, apri la tua dashboard di analytics e naviga tra diverse route sul tuo sito live. Ogni navigazione dovrebbe produrre una nuova voce pageview con il path corretto. Se vedi solo una voce indipendentemente dalla navigazione, controlla che lo script sia caricato nel layout principale e che VITE_MONOID_SITE_ID sia impostato nell'ambiente di produzione.
L'adapter SvelteKit che usi (Cloudflare, Vercel, Node, statico) non influisce sulla raccolta di analytics, poiché il tracking avviene interamente nel browser dopo l'hydration.
Comments
Loading comments…