✨ Feat (UI): Implement Granular Consent UI for GDPR Compliance 🍪

[chriskyfung]

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:

• Granular Consent: Users should be able to consent to or reject individual cookie purposes separately.
• Clear and Transparent Information: Users should be provided with clear and concise information about each cookie purpose before giving their consent.
• Easy to Access: The Consent UI should be easily accessible and visible to users.
• AMP Compatibility: The Consent UI must be implemented in a way that maintains AMP validity.

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:

• GDPR Compliance: Ensure that the theme complies with GDPR requirements for cookie consent.
• User Privacy Protection: Give users control over their personal data and how it is used.
• Improved User Experience: Empower users to make informed decisions about their cookie preferences.

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

• We should consider using a CMP that is lightweight and does not impact page performance.
• The Consent UI should be designed to be user-friendly and easy to understand.
• We should provide documentation and guidance to users on how to use the Consent UI.

Development of a custom Consent UI using AMP elements

Objectives

• Create a user-friendly and compliant Consent UI using AMP elements.
• Ensure compliance with industry regulations and best practices.
• Provide a seamless and transparent user experience.

Tasks

Phase 1: Design and Development

• Design the Consent UI using AMP elements, considering accessibility and responsiveness.
• Develop the UI using AMP's HTML and JavaScript components.
• Implement the necessary AMP state management and event handling.
• Ensure the UI is visually appealing and aligns with the brand guidelines.

Phase 2: Integration and Testing

• Integrate the Consent UI into the existing website or application.
• Conduct thorough testing to verify functionality, performance, and accessibility.
• Perform user acceptance testing to gather feedback and validate the UI.

Phase 3: Deployment and Maintenance

• Deploy the Consent UI on the production site.
• Monitor the UI's performance and address any issues promptly.
• Regularly update the UI to maintain compliance and enhance user experience.

Additional Tasks

• Legal Compliance: Review and align the Consent UI with applicable laws and regulations.
• Transparency: Provide clear and concise information to users about the purpose and use of their data.
• Granularity: Allow users to specify granular consent preferences for different purposes and vendors.
• Revocability: Enable users to easily revoke their consent at any time.
• Accessibility: Ensure the Consent UI is accessible to users with disabilities.
• Vendor Management: Integrate with vendor consent management platforms to streamline consent collection and management.

[chriskyfung]

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:

1. <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.

2. <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.

3. <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:

1. https://amp.dev/documentation/components/amp-bind
2. https://amp.dev/documentation/components/amp-consent
3. https://amp.dev/documentation/components/amp-script
4. https://www.iubenda.com/en/help/3182-cookie-consent-amp-pages
5. https://onetrustprivacy.my.site.com/cpcustomers/s/article/UUID-94cf9b13-1998-d989-a5e0-d01a73a2e0a7?language=en_US
6. https://www.iubenda.com/en/help/22135-cookie-solution-amp-wordpress

[chriskyfung]

Cookie Consent Samples

CodePen:

• Cookie consent footer banner
• Popup Cookies Consent Box in HTML CSS & JavaScript
• Vanilla JS GDPR-EU Banner [Set Session Cookie Preferences]

Glitch:

• Amp Rejected Consent Placeholder

And more...:

• 10 Effective GDPR Cookie Consent Examples - CookieYes
• 15 Creative (& Compliant) Cookie Consent Banner Examples to Spark Ideas | WordStream

[chriskyfung]

Some Known Issues of <amp-consent> Elements

• [amp-consent] Fine grain, client-side consent · Issue #26735 · ampproject/amphtml
• amp-consent: let developers show existing consent choices on reprompt · Issue #33530 · ampproject/amphtml
• Update Consent is not working in Granular Consent · Issue #34517 · ampproject/amphtml

[chriskyfung]

ConsentManager CMP

To configure amp-consent with ConsentManager CMP, follow these steps:

Step-by-Step Configuration

1. Add AMP Consent Script:
   Include the amp-consent script in the <head> section of your AMP page:

   <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

2. Add Meta Tag for Consent Blocking:
   Add a meta tag to specify which AMP components should be blocked until consent is given:

   <meta name="amp-consent-blocking" content="amp-ad">

3. Configure Consent Layer:
   Add the amp-consent element to the <body> section of your AMP page. Use the configuration provided by ConsentManager CMP:

   <amp-consent id="ConsentManager" layout="nodisplay" type="ConsentManager">
     <script type="application/json">
       {
         "postPromptUI": "postPromptUI",
         "clientConfig": {
           "cdid": "Your CMP Code-ID",
           "params": ""
         }
       }
     </script>
     <div id="postPromptUI">
       <button on="tap:ConsentManager.prompt()" role="button">Manage privacy settings</button>
     </div>
   </amp-consent>

4. Blocking Ads and Analytics:
   To block ads or analytics codes until consent is given, add the data-block-on-consent attribute to the relevant AMP elements:

   <amp-ad data-block-on-consent type="doubleclick" width="300" height="250" layout="responsive"></amp-ad>
   <amp-analytics data-block-on-consent type="googleanalytics"></amp-analytics>

Example Configuration

Here's a complete example of how your AMP page might look with the amp-consent and ConsentManager CMP integration:

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AMP Consent Example</title>
  <link rel="canonical" href="self.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
  <meta name="amp-consent-blocking" content="amp-ad">
</head>
<body>
  <amp-consent id="ConsentManager" layout="nodisplay" type="ConsentManager">
    <script type="application/json">
      {
        "postPromptUI": "postPromptUI",
        "clientConfig": {
          "cdid": "Your CMP Code-ID",
          "params": ""
        }
      }
    </script>
    <div id="postPromptUI">
      <button on="tap:ConsentManager.prompt()" role="button">Manage privacy settings</button>
    </div>
  </amp-consent>

  <amp-ad data-block-on-consent type="doubleclick" width="300" height="250" layout="responsive"></amp-ad>
  <amp-analytics data-block-on-consent type="googleanalytics"></amp-analytics>
</body>
</html>

For more detailed instructions and examples, you can refer to the AMP example ConsentManager documentation. This should help you get started with integrating ConsentManager CMP on your AMP pages.

[chriskyfung]

Ensuring Compliance with data-npa-on-unknown-consent

The data-npa-on-unknown-consent attribute is used in AMP pages to handle situations where the user's consent status is unknown. This attribute ensures that non-personalized ads (NPAs) are served when the user's consent status is not explicitly known. This is particularly important for complying with privacy regulations and maintaining ad revenue. Here's how it works and when you might need to include it:

Purpose and Usage

1. Non-Personalized Ads (NPAs): NPAs are ads that are not based on a user's past behavior. Instead, they use contextual information, such as the content of the current site or app, and coarse geo-targeting (e.g., city-level) based on the user's current location. NPAs do not use cookies or mobile ad identifiers for ad targeting, but they may still use them for frequency capping and aggregated ad reporting.

2. Handling Unknown Consent Status: When the user's consent status is unknown (e.g., if the user dismisses the consent prompt), the data-npa-on-unknown-consent attribute ensures that NPAs are served instead of personalized ads. This helps in complying with privacy regulations that require non-personalized ads to be served when user consent is not explicitly given.

3. Regulatory Compliance: This attribute is essential for complying with privacy regulations such as the GDPR and CCPA, which mandate that user consent must be obtained before serving personalized ads. By serving NPAs when consent status is unknown, publishers can avoid potential legal issues.

When to Include

1. Consent Status Unknown: If the user dismisses the consent prompt or if the consent status cannot be determined, this attribute ensures that non-personalized ads are served instead of personalized ads.
2. Regulatory Compliance: To comply with privacy regulations that require non-personalized ads to be served when user consent is not explicitly given.
3. Fallback Mechanism: As a fallback mechanism to ensure that ads are still served even when the consent status is unclear, preventing a complete loss of ad revenue.

Example

Here's an example of how to include the data-npa-on-unknown-consent attribute in your AMP ad tags:

<amp-consent layout="nodisplay" id="consent-element">
  <script type="application/json">
    {
      "consentInstanceId": "my-consent",
      "consentRequired": true,
      "promptUI": "consent-ui"
    }
  </script>
  <div id="consent-ui">
    <button on="tap:consent-element.accept">Accept</button>
    <button on="tap:consent-element.reject">Reject</button>
    <button on="tap:consent-element.dismiss">Dismiss</button>
  </div>
</amp-consent>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/1234567/example"
  data-block-on-consent
  data-npa-on-unknown-consent="true">
</amp-ad>

In this example, the amp-ad tag includes the data-npa-on-unknown-consent="true" attribute, ensuring that non-personalized ads are served if the user's consent status is unknown.

For more detailed information, you can refer to the Google AdMob Help and Google AdSense Help pages.