chriskyfung
commented
8 months ago Proposed Consent UI Design
To collect cookie consent on AMP pages, we intend to incorporate the following AMP components in the design of the Consent UI:
<amp-bind><amp-consent><amp-script>
To gather cookie consent on AMP pages, it's necessary to utilize the <amp-consent> element along with the data-block-on-consent or data-block-on-consent-purposes attribute.
Our Consent UI is designed to manage the following specific user interactions:
- Display a consent banner when user consent hasn't been granted;
- Provide an option for users to accept all purposes by clicking a button on the banner;
- Enable users to open a modal and hide the banner by clicking the "Preference" button on the banner;
- Within the modal, use check boxes to allow users to select the purposes they consent to;
- Close the modal and apply the user's consent choices by clicking a button on the modal;
- Close the modal and reject all consent purposes, except for necessary cookies, by clicking another button on the modal;
- Re-display the consent banner when the user clicks on the post-consent UI.
The <amp-bind>, <amp-consent>, and <amp-script> elements play crucial roles in the Consent UI design. Here's how they function:
-
<amp-bind>: This AMP component allows elements on the page to have their attributes, CSS classes, and text contents dynamically changed in response to user actions or data changes. In the context of the Consent UI,<amp-bind>is used to manage the consent states for different types of cookies (essential, functional, analytics, advertising). It can dynamically show or hide certain UI elements based on the user's consent preferences. -
<amp-consent>: This is a key component for managing user consent. It provides the ability to show a customizable consent UI, and it handles user interactions with this UI. In the Consent UI design,<amp-consent>is used to set up the consent banner and the cookie preference modal. It also manages the post-consent UI, which includes a button that prompts the consent UI when clicked. -
<amp-script>: This AMP component allows custom JavaScript to be run on AMP pages. In the Consent UI,<amp-script>is used to load the stored consent states from the local storage and override the default values defined in the<amp-state>. This is crucial for maintaining the user's consent preferences across different browsing sessions.
The interaction between these elements is as follows:
<amp-bind>and<amp-consent>work together to manage and reflect the user's consent preferences in the UI. For example, certain parts of the UI may be shown or hidden based on the consent states managed by<amp-bind>.<amp-script>interacts with<amp-bind>by loading the stored consent states from the local storage and updating the<amp-state>accordingly. This ensures that the user's consent preferences are remembered across different browsing sessions.<amp-consent>uses the consent states managed by<amp-bind>to decide when to show the consent UI (e.g., when the user has not yet given their consent for certain types of cookies).
References:
- https://amp.dev/documentation/components/amp-bind
- https://amp.dev/documentation/components/amp-consent
- https://amp.dev/documentation/components/amp-script
- https://www.iubenda.com/en/help/3182-cookie-consent-amp-pages
- https://onetrustprivacy.my.site.com/cpcustomers/s/article/UUID-94cf9b13-1998-d989-a5e0-d01a73a2e0a7?language=en_US
- https://www.iubenda.com/en/help/22135-cookie-solution-amp-wordpress
Title: Implement Granular Consent UI for GDPR Compliance
Description
The current AMP-ready Jekyll theme includes services that utilize cookies to store user data. To ensure compliance with the General Data Protection Regulation (GDPR), we need to implement a granular consent UI that allows users to control their cookies on a per-purpose basis.
Problem
The theme does not currently provide users with a way to opt in or out of specific cookie purposes, which could result in non-compliance with GDPR requirements.
Proposed Solution
We propose implementing a Consent UI that includes the following features:
Possible Implementations
One possible implementation could involve using a third-party consent management platform (CMP) that is AMP-compatible. CMPs provide a range of features out-of-the-box, including granular consent options, data collection, and reporting.
Another approach could be to develop a custom Consent UI using AMP elements. This would require more development effort but could provide greater control over the UI's design and functionality.
Benefits
Implementing a granular Consent UI will provide the following benefits:
Timeline
This feature should be prioritized and completed within the next sprint.
Assignee
To be assigned after discussion and review of proposed implementations.
Additional Notes
Development of a custom Consent UI using AMP elements
Objectives
Tasks
Phase 1: Design and Development
Phase 2: Integration and Testing
Phase 3: Deployment and Maintenance
Additional Tasks