Skip to content

Commit

Permalink
✨ feat: update cookie consent UI configuration
Browse files Browse the repository at this point in the history
This commit introduces several key updates to further enhance user
control over the cookie consent interface and the import of AMP extensions.

- Modified to allow enabling or disabling the cookie consent interface
  by setting `consent=true/false` in the `_config.yml` file. This
  provides greater flexibility in managing user consent preferences.

- Modified to conditionally import the minified `amp-consent.css`,
  `amp-consent` and `amp-script` extensions. This change optimizes the
  loading based on the specific needs of the page, improving overall
  performance.

- Modified the `granular-user-consent.html` to allow removing the
  `data-ampdevmode` attribute from the custom script by setting
  `consent_dev_mode=false`. This remains particularly useful when
  building the site with the AMP Optimizer, which generates the hash for
  the script and inserts the `<meta>` tag automatically.

- Added `consent=true` and `consent_dev_mode=false` in the `_config.yml`
  file for the demo site.

These updates collectively aim to provide users with more control over
their site's consent interface and AMP extension usage, while also
improving site performance and development efficiency.

See: #44
  • Loading branch information
chriskyfung committed Mar 8, 2024
1 parent 2fe11bd commit bffce4a
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 3 deletions.
5 changes: 5 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ nav:
buttons:
gh_sponsors: true # Show GitHub Sponsors button
global:
home: false
menu: false
dropdown: false # Show menu with dropdown submenu
local:
Expand Down Expand Up @@ -89,6 +90,10 @@ copyright:
ownership: Chris KY FUNG
link: https://chriskyfung.github.io/

# Cookie Consent Notice
consent: true
consent_dev_mode: false

# Plugins
plugins:
- jekyll-archives
Expand Down
4 changes: 4 additions & 0 deletions _includes/consent/granular-user-consent.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@
</amp-state>

<!-- Ref: https://amp.dev/documentation/examples/components/amp-script/#local-storage -->
{%- if jekyll.environment == 'production' and site.consent_dev_mode == false -%}
<amp-script script="get-stored-consentStates" nodom>
{%- else -%}
<amp-script script="get-stored-consentStates" nodom data-ampdevmode>
{%- endif -%}
</amp-script>
<script id="get-stored-consentStates" type="text/plain" target="amp-script">
const str = atob(localStorage.getItem('amp-store:{{ site.url }}'));
Expand Down
1 change: 1 addition & 0 deletions _includes/css/amp-consent.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 9 additions & 3 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
{% seo %}
<link as="script" href="https://cdn.ampproject.org/v0.js" rel="preload">
<script async src="https://cdn.ampproject.org/v0.js"></script>
{%- if site.consent == true -%}
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
{%- endif -%}
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
{%- if site.adsense.client_id and site.adsense.auto_ads != false -%}
<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
Expand All @@ -26,9 +28,9 @@
{%- if layout.amp.iframe or page.amp.iframe or true -%}
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
{%- endif -%}
{%- if site.consent == true or layout.amp.script or page.amp.script -%}
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<!-- {%- if layout.amp.script or page.amp.script -%} -->
<!-- {%- endif -%} -->
{%- endif -%}
{%- if page.amp.youtube -%}
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
{%- endif -%}
Expand Down Expand Up @@ -72,7 +74,9 @@
{% include css/amp-bs4.min.css %}
{% include css/amp-theme.min.css %}
{% include css/amp-navigation.min.css %}
{% include css/amp-consent.css %}
{%- if site.consent == true -%}
{% include css/amp-consent.min.css %}
{%- endif -%}
{%- if site.invitation_codes != false -%}
{% include css/amp-invitation-codes.min.css %}
{%- endif -%}
Expand Down Expand Up @@ -110,7 +114,9 @@
{%- capture layout -%}{% if page.layout %}layout-{{ page.layout }}{% endif %}{%- endcapture -%}

<body class="{{ layout }}" data-amp-auto-lightbox-disable>
{%- if site.consent == true -%}
{% include consent/granular-user-consent.html %}
{%- endif -%}

{%- if site.gtm -%}
<!-- Google Tag Manager -->
Expand Down

0 comments on commit bffce4a

Please sign in to comment.