Merge pull request #112 from chriskyfung:fix/built-in-granular-consent

🐛 Fix consent handling and improve documentation
chriskyfung · Jan 29, 2025 · c585b44 · c585b44
2 parents aa6ea02 + d0e83c8
commit c585b44
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 31 deletions.
diff --git a/_config.yml b/_config.yml
@@ -133,10 +133,6 @@ copyright:
 # Cookie Consent Notice
 consent: true
 consent_preview: false
-amp_optimizer: true
-# consent_dev_mode: false
-# script_hash:
-#   consent_gsc: sha384-n2-YMnb2FkeDk-Ca2pVnoYSR2FqNKqKgTwfK_UI0EAeVRCAHgCDjsecHJpVMv3Sl
 iubenda:
   siteId: 3904687 # Your own site ID
   cookiePolicyId: 30443530 # Your own cookie policy ID

diff --git a/_includes/blocks/ad-before-content.html b/_includes/blocks/ad-before-content.html
@@ -9,10 +9,10 @@
 <!-- github_resp_before_content -->
 <amp-ad width="100vw" height="200"
     {%- case consent_type %}
-      {%- when "built-in" -%}
+      {% when "built-in" -%}
         data-block-on-consent-purposes="advertising"
-        data-npa-on-unknown-consent=true
-      {%- when "iubenda" -%}
+        data-npa-on-unknown-consent="true"
+      {% when "iubenda" -%}
         data-block-on-consent-purposes="1,3,4"
     {% endcase -%}
     type="adsense"

diff --git a/_includes/blocks/disqus.html b/_includes/blocks/disqus.html
@@ -9,9 +9,9 @@
 <div class="disqus">
   <amp-iframe width=600 height={{ site.amp_disqus.height | default: 140 }} layout="responsive"
   {%- case consent_type %}
-    {%- when "built-in" -%}
+    {% when "built-in" -%}
       data-block-on-consent-purposes="functional"
-    {%- when "iubenda" -%}
+    {% when "iubenda" -%}
       data-block-on-consent-purposes="1,3"
   {% endcase -%}  
     sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms" resizable

diff --git a/_includes/consent/granular-user-consent.html b/_includes/consent/granular-user-consent.html
@@ -35,6 +35,7 @@
 <amp-state id="consentState">
   <script type="application/json">
     {
+      "domain": "{{ site.url | replace: 'localhost', '127.0.0.1' }}",
       "essential": false,
       "functional": false,
       "analytics": false,
@@ -51,14 +52,20 @@
 <amp-script script="get-stored-consentStates" nodom data-ampdevmode></amp-script>
 {%- endif -%}
 <script id="get-stored-consentStates" type="text/plain" target="amp-script">
-  const str = atob(localStorage.getItem('amp-store:{{ site.url }}'));
-  const json = JSON.parse(str);
-  const v = json.vv['amp-consent:site-consent']?.v;
-  if (v.s === 1) {
-    let jsonObject = Object.fromEntries(Object.entries(v.pc).map(([key, value]) => [key, value === 1]));
-    jsonObject.disallows = Object.keys(jsonObject).sort().filter(key => key != 'essential' && jsonObject[key] === false).join(',');
-    AMP.setState({"consentState": jsonObject})
+  async function getDomainFromConsentState() {
+    return await AMP.getState('consentState.domain');
   }
+  getDomainFromConsentState().then( domain => {
+    const str = atob(localStorage.getItem('amp-store:' + domain ));
+    const json = JSON.parse(str);
+    const v = json.vv['amp-consent:site-consent']?.v;
+    if (v.s === 1) {
+      let jsonObject = Object.fromEntries(Object.entries(v.pc).map(([key, value]) => [key, value === 1]));
+      jsonObject.domain = domain;
+      jsonObject.disallows = Object.keys(jsonObject).sort().filter(key => key != 'essential' && jsonObject[key] === false).join(',');
+      AMP.setState({"consentState": jsonObject})
+    }
+  });
 </script>
 
 <amp-consent layout="nodisplay" id="site-consent">
@@ -143,7 +150,7 @@ <h2>
         <label class="consentLabel" for="consent-purpose-functional">
           <input id="consent-purpose-functional" type="checkbox" [checked]="consentState.functional"
             on="change:site-consent.setPurpose(functional=event.checked)">
-          Funcitonality
+          Functionality
         </label>
         <label class="consentLabel" for="consent-purpose-analytics">
           <input id="consent-purpose-analytics" type="checkbox" [checked]="consentState.analytics"

diff --git a/_includes/sidebar/custom/ad-sidebar.html b/_includes/sidebar/custom/ad-sidebar.html
@@ -11,10 +11,10 @@ <h3><span>Ads</span></h3>
   <!-- github_resp_sidebar -->
   <amp-ad width="100vw" height="292"
     {%- case consent_type %}
-      {%- when "built-in" -%}
+      {% when "built-in" -%}
         data-block-on-consent-purposes="advertising"
-        data-npa-on-unknown-consent=true
-      {%- when "iubenda" -%}
+        data-npa-on-unknown-consent="true"
+      {% when "iubenda" -%}
         data-block-on-consent-purposes="1,3,4"
     {% endcase -%}
     type="adsense"

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -63,8 +63,8 @@
       {%- endif -%}
     {%- endif -%}
 
-    {%- if jekyll.environment == 'production' and site.amp_optimizer != true and site.script_hash.consent_gsc -%}
-    <meta name="amp-script-src" content="{{ site.script_hash.consent_gsc }}">
+    {%- if site.consent_dev_mode == false -%}
+    <meta name="amp-script-src" content="sha384-5Ts3_c_hBCJIZFT0CtxHadJBR7hnzpS9zegDBQUchhnTzgZfo_HDE5Kt_Lr0WQ7r">
     {%- endif -%}
     {%- if consent_type == "iubenda" -%}
       <meta name="amp-consent-blocking" content="">
@@ -138,10 +138,10 @@
     {%- if site.adsense.client_id and site.adsense.auto_ads != false -%}
     <amp-auto-ads type="adsense" data-ad-client="{{ site.adsense.client_id }}"
       {%- case consent_type %}
-        {%- when "built-in" -%}
+        {% when "built-in" -%}
           data-block-on-consent-purposes="advertising"
-          data-npa-on-unknown-consent=true
-        {%- when "iubenda" -%}
+          data-npa-on-unknown-consent="true"
+        {% when "iubenda" -%}
           data-block-on-consent-purposes="1,3,4"
       {% endcase -%}
       {%- if jekyll.environment != 'production' -%}

diff --git a/_posts/2021-08-02-config-guide.md b/_posts/2021-08-02-config-guide.md
@@ -281,12 +281,11 @@ Our Jekyll theme offers two cookie consent settings: Simple Granular User Consen
 
 A customizable consent UI developed using `amp-consent` and `amp-script` components. It enables granular consent control by categorizing cookies into essential, functional, analytics, and advertising. The UI features a preference modal, allowing users to efficiently manage their consent options per purpose.
 
-|          Attribute | Property      | Description                                                                                                                                                   |
-| -----------------: | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `consent_dev_mode` |               | <span>v2.9</span>{:.badge.badge-success}<br> Set to `false` to remove the `data-ampdevmode` attribute from the custom script.<br> _Default:_ `true`{:.green}. |
-|    `amp_optimizer` |               | <span>v2.9.1</span>{:.badge.badge-success}<br> Set to `true`{:.green} if you use AMP Optimizer post Jekyll site build.<br> _Default:_ `false`.                |
-|      `script_hash` |               | <span>v2.9.1</span>{:.badge.badge-success}                                                                                                                    |
-|                    | `consent_gsc` | The hash value for the `get_stored_consentStates` script.<br> 💡 [Calculating the script hash].                                                              |
+|          Attribute | Property           | Description                                                                                                                                                               |
+| -----------------: | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `consent_dev_mode` |                    | _Default:_ `true`{:.green}.<br> Set to `false` to remove the `data-ampdevmode` attribute from the custom script.                                                          |
+|    `amp_optimizer` |                    | **Deprecated from v3.3.1**{:.badge.badge-default}<br> _Default:_ `false`.<br> Set to `true`{:.green} if you use AMP Optimizer post Jekyll site build.                     |
+|      `script_hash` | <br> `consent_gsc` | **Deprecated from v3.3.1**{:.badge.badge-default}<br> The script hash of the custom JavaScript `#get_stored_consentStates`.<br> Read more: [Calculating the script hash]. |
 
 [Calculating the script hash]: https://amp.dev/documentation/components/amp-script#calculating-the-script-hash "Documentation: <amp-script> - amp.dev"