Article

Analytics providers in web-sveltekit

Optional analytics support for GA4, Plausible, and Microsoft Clarity with consent gating.

web-sveltekit supports optional global analytics providers from zship.app.json.

Supported providers

  • Google Analytics 4 via analytics.googleAnalytics.measurementId
  • Plausible via analytics.plausible.domain
  • Microsoft Clarity via analytics.clarity.projectId

Third-party analytics scripts are not injected by default. When at least one provider is configured and analytics.consentBanner.enabled is true, the app shows a consent banner and waits for a decision before loading those providers.

  • Consent is persisted with a cookie (zship_analytics_consent) plus localStorage
  • Client helpers live in src/lib/client/analytics.ts (setAnalyticsConsent, trackAnalyticsEvent, trackAnalyticsPageView)
  • The banner UI is src/lib/components/AnalyticsConsentBanner.svelte
  • You can extend the same layer later for region-aware consent or first-party proxying
{
  "analytics": {
    "consentBanner": {
      "enabled": true
    },
    "googleAnalytics": {
      "measurementId": "G-XXXXXXXXXX"
    },
    "plausible": {
      "domain": "sveltekit.zship.ai",
      "scriptSrc": "",
      "apiEndpoint": ""
    },
    "clarity": {
      "projectId": "your-clarity-project-id"
    }
  }
}

Leave provider IDs empty in the template until you are ready for production tracking. Empty IDs mean no scripts and no banner.

Next improvement path

If you need stricter compliance, add a dedicated consent center or route analytics through first-party endpoints before turning on provider IDs in production.

Previous Next