@arraypress/analytics-astro
v1.0.1
Published
Multi-provider analytics for Astro — Plausible, Cloudflare, Umami, Fathom, Simple, GoatCounter, GA4, custom. DNT/GPC short-circuit + consent gating, one component.
Maintainers
Readme
@arraypress/analytics-astro
Multi-provider analytics for Astro in one component. Pass the providers you want; it renders the right script tags with a built-in Do-Not-Track / Global-Privacy-Control short-circuit and consent gating for cookie-using providers.
Supports Plausible, Cloudflare, Umami, Fathom, Simple Analytics, GoatCounter, GA4, and a custom escape hatch.
Install
npm install @arraypress/analytics-astroUsage
Drop it once in your <head>:
---
import { Analytics } from '@arraypress/analytics-astro';
---
<head>
<Analytics providers={[
{ type: 'plausible', domain: 'example.com' },
{ type: 'ga4', measurementId: 'G-XXXXXXX' },
]} />
</head>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| providers | AnalyticsProvider[] | [] | Empty → nothing renders. |
| respectDNT | boolean | true | Inline DNT/GPC check runs before any script is fetched. |
| productionOnly | boolean | true | No scripts in astro dev (import.meta.env.PROD). |
| consentStorageKey | string | 'cookie-consent' | localStorage key your banner sets. |
| consentAcceptedValue | string | 'accepted' | Value meaning "accepted". |
| consentEventName | string | 'consent-accepted' | Window event your banner dispatches on accept. |
Providers
{ type: 'plausible', domain: 'example.com', src?, apiHost? }
{ type: 'cloudflare', token: '…' }
{ type: 'umami', websiteId: '…', src? }
{ type: 'fathom', siteId: '…' }
{ type: 'simple', src? }
{ type: 'goatcounter', endpoint: 'https://you.goatcounter.com/count' }
{ type: 'ga4', measurementId: 'G-XXXXXXX' } // consent-gated
{ type: 'custom', html: '<script>…</script>' } // consent-gatedPrivacy
- DNT/GPC — with
respectDNT(default), an inline guard setswindow.__apAnalyticsAllowed = falsewhen the visitor signals Do-Not-Track or Global Privacy Control, and every provider checks it before loading. Nothing beacons. - Consent —
ga4andcustomuse cookies / send data, so they additionally wait untillocalStorage[consentStorageKey] === consentAcceptedValue. They fire on load if consent is already stored, and re-arm on theconsentEventNamewindow event so the first accept after page load injects them without a reload. Cookie-free providers (Plausible, Cloudflare, Umami, Fathom, Simple, GoatCounter) only need the DNT check.
Pair with any cookie-consent banner: write the storage key on accept, dispatch the event, and GA4/custom light up.
License
MIT
