consent
Ask for cookie and tracking consent once, and hold analytics and error reports until people agree.
What it is
@kitr/consent records what each visitor agreed to, by category, in a cookie the server can read. useConsent() gives your banner the categories and the grant and deny functions. Until a category is granted, analytics queues its calls.
Runs in the browser. It is not a legal template: you decide the categories and wording.
Install
kitr add consentFirst time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.
Adds @kitr/consent, its provider, config/consent.ts and a banner in app/components/consent-banner.tsx. Every change.
Quick start
The banner kitr add wrote is a few lines over useConsent():
// app/components/consent-banner.tsx
import { useConsent } from '@kitr/consent/react'
export function ConsentBanner() {
const { decided, acceptAll, rejectAll } = useConsent()
if (decided) return null
return (
<div role="dialog" aria-label="Cookie consent">
<span>We use cookies for analytics. You can change your mind in settings.</span>
<button type="button" onClick={rejectAll}>Only necessary</button>
<button type="button" onClick={acceptAll}>Accept all</button>
</div>
)
}Mount it once in app/document.tsx. Click Accept all and a consent cookie records the choice; queued analytics calls go out. Click Only necessary and they never do. Next in the guide: Show your first banner.
Built on
kitr adds the category model, the hook, the hooks analytics and monitoring listen to, no-flash rendering on the server and a devtools panel.
Problems it solves
- Trackers firing before consent. Show your first banner.
- One switch for everything. Offer a choice per category.
- Third-party scripts you load yourself. Check a category before loading a script.
- A banner that flashes on load. Show the banner without a flash.
- Policy changes. Ask everyone again.
- Error reports with personal data. Gate error reports.