Minimal non-intrusive Cookie consent block

[chicharr]

Test URLs:

• Before: https://main--aem-block-collection--adobe.hlx.page/block-collection/cookie-consent-demo
• After: https://cookieconsent--aem-block-collection--adobe.hlx.page/block-collection/cookie-consent-details-demo

Cookie Consent Block and consent management logic

The basics

• This block displays a minimalistic non-intrusive cookie consent banner
• Pages where cookie consent banner needs to be shown, must have a metadata property called cookie-consent, specifying the name of the cookie consent banner we want to show.
• The content of the cookie consent banner is in a separate document normally in the path /cookie-consent/<name-of-the-consent-banner>
• When a user selects their consent preferences, they are stored in the local storage.
• The banner is only shown on page load if a user doesn't have preferences in the local storage.
• When consent preferences are updated or read from the browser, a custom event is triggered. Martech loaders can listen to this events to decide what to load or not load, based on user preferences.

Cookie Consent Flow

Content of the banner

We offer 2 possibilities:

1. Simple consent banner

One simple text explaining that the website is using cookies. Buttons accept all, deny all can be added optionally.

Word document:
Contains a single section with the text, which can be styled, and metadata.

Metadata properties:

• required cookies: List of cookie category codes that will be always active, regardless of what the user selects.
• optional categories: List of cookie category codes that are optional, that will only be active if the user explicitly consents, by clicking accept all button.
• buttons: comma-separated list. accepted values: accept-all , deny-all

Samples:

• configuration:
  

• banner displayed:

2. Simple consent banner and categories details

Shows the simple consent banner as the previous one, but also offers a dialog which displays detailed information of each of the categories of cookies the website uses, and allows users to select individually each category.
By default only the minimalistic consent banner is shown, but users can click a "more information" button that will display the dialog.

Word document:

• First section has the content of the simple content banner.
  In this case the only allowed metadata property is:
  buttons = accept_all | reject_all | more_info

• The second and subsequent sections are only used in the detailed categories dialog.
  It expects a first intro section with some explanation text that is displayed on top of the dialog.
  The second and subsequent sections are considered to be cookie categories. And each of them need 2 metadata properties:
  code = code of the category that will be used by martech loaders
  optional = whether the category is optional or not.

Samples

• configuration
  

• dialog displayed
  

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• de7f903 ✅ (latest)
• 553de90 ✅
• 0b22b46 ✅
• 33db56f ✅
• 5ef07e2 ✅
• ee5c86c ✅
• b5bb05c ✅
• 3199f3e ✅
• 90bfaa3 ✅
• 8f1eb2a ✅
• 2b2a104 ✅
• e3e16f5 ✅
• ab545b5 ✅
• 66974be ✅
• f21b989 ✅
• 76941b8 ✅
• cf32bc3 ✅
• 4c49f7c ✅
• 907513c ✅
• 775d943 ✅
• a8561ec ✅
• a33f909 ✅
• 7ebd360 ✅
• ca765b1 ✅
• 2908fd9 ✅
• 8a0387b ✅
• ef29fed ✅

[aem-code-sync]

Page	Scores	Audits	Google
/block-collection/cookie-consent-details-demo

[kptdobe]

The diagram and the doc in the PR are great. I think this should be part of a README.md file in the block itself so that someone using the block has the doc too.