Consent Manager ("Cookie Banner")

[jbmoelker]

User story

As a website visitor, I want to be asked for consent for personalised experience, so that I have control over how my data is used.

System design

• Ask for consent on intent as much as possible. For example ask for consent when user wants to play a video or start a chat.
• Provide fine-grained control in specific contexts. For example when user wants to play a video check/prompt for consent for all third party content or just embedded videos.
• Use a generic consent prompt mechanism that can easily be replaced by a project-specific implementation like One Trust.

[jbmoelker]

Which consent groups should we provide by default? For example:

• functional experience: like remembering form values for easy of use
• third party content: like external forms, embedded videos and chat
• analytics (better name?): ...
• personal advertising: ...

[jbmoelker]

Came across to good (reference) implementations:

• Klaro Privacy Manager: full-featured, 1k+ stars, bit JS heavy
• Gov UK Cookie Consent: simpler setup, less JS heavy

[jbmoelker]

Just another reference: Google's Privacy Sandbox distinguishes:

• functional
• analytics
• marketing
• uncatagorized

[jbmoelker]

Should we split this issue in two items, or at least two modules?:

• consent manager service (state/store)
• consent manager prompt component (UI dialog)

The service would provide the mechanism under the hood, can be integrated into all pre-made components and blocks (like the Video Embed Block), and can be used with a standard Consent Manager Prompt component by Head Start or a 3rd party component like Cookiebot, CookieFirst or One Trust. The service could provide methods like:

import { askConsent, hasConsent, setConsent } from '@lib/consent-manager';

// get current consent status:
hasConsent('marketing') // for consent group
hasConsent('analytics:ga') // for specific consent item

// trigger prompt to ask user for consent:
askConsent('...') 

// programatically set consent state for a group or item:
setConsent('marketing', true);
setConsent('analytics:ga', false);

askConsent could either return a Promise or we could return a reactive object (or also export a $consent store or something).