Skip to content

Commit

Permalink
Merge pull request #109 from chriskyfung:fixes/improve-cookie-consent
Browse files Browse the repository at this point in the history
Comprehensive Update to Consent Handling, Integration, and Documentation
  • Loading branch information
chriskyfung authored Jan 24, 2025
2 parents fd401ff + e0fef5a commit ae79800
Show file tree
Hide file tree
Showing 11 changed files with 172 additions and 48 deletions.
4 changes: 3 additions & 1 deletion _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,9 @@ amp_optimizer: true
# script_hash:
# consent_gsc: sha384-n2-YMnb2FkeDk-Ca2pVnoYSR2FqNKqKgTwfK_UI0EAeVRCAHgCDjsecHJpVMv3Sl
iubenda:
remote_consent_url: https://chriskyfung.gitlab.io/iubenda-amp-consent/
siteId: 3904687 # Your own site ID
cookiePolicyId: 30443530 # Your own cookie policy ID
remote_consent_url: https://bit.ly/iubenda-cs-for-amp # Your own remote consent URL
tp_btn_style: false
tp_btn_position: 'bottom-left'

Expand Down
18 changes: 12 additions & 6 deletions _includes/blocks/ad-before-content.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
{{- if site.adsense.client_id and site.adsense.ad_slot.before_content -}}
{%- if site.consent == true -%}
{%- if site.iubenda.remote_consent_url -%}
{%- assign consent_type = "iubenda" -%}
{%- else -%}
{%- assign consent_type = "built-in" -%}
{%- endif -%}
{%- endif -%}
<!-- github_resp_before_content -->
<amp-ad width="100vw" height="200"
{%- if site.consent == true %}
{%- if site.iubenda.remote_consent_url -%}
data-block-on-consent-purposes="1,3,4"
{%- else -%}
{%- case consent_type %}
{%- when "built-in" -%}
data-block-on-consent-purposes="advertising"
data-npa-on-unknown-consent=true
{%- endif -%}
{% endif -%}
{%- when "iubenda" -%}
data-block-on-consent-purposes="1,3,4"
{% endcase -%}
type="adsense"
data-ad-client="{{ site.adsense.client_id }}"
data-ad-slot="{{ site.adsense.ad_slot.before_content }}"
Expand Down
20 changes: 13 additions & 7 deletions _includes/blocks/disqus.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
{%- if site.amp_disqus -%}
{%- if site.consent == true -%}
{%- if site.iubenda.remote_consent_url -%}
{%- assign consent_type = "iubenda" -%}
{%- else -%}
{%- assign consent_type = "built-in" -%}
{%- endif -%}
{%- endif -%}
<div class="disqus">
<amp-iframe width=600 height={{ site.amp_disqus.height | default: 140 }} layout="responsive"
{%- if site.consent == true %}
{%- if site.iubenda.remote_consent_url -%}
data-block-on-consent-purposes="1,2,3"
{%- else -%}
data-block-on-consent-purposes="functional"
{%- endif -%}
{% endif -%}
{%- case consent_type %}
{%- when "built-in" -%}
data-block-on-consent-purposes="functional"
{%- when "iubenda" -%}
data-block-on-consent-purposes="1,2,3"
{% endcase -%}
sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms" resizable
src="{{ site.amp_disqus.url }}?url={{ page.url | absolute_url }}&title='{{ page.title | url_encode }}'">
<div overflow style="background-color: #0003;display: block;position: relative;">
Expand Down
18 changes: 12 additions & 6 deletions _includes/sidebar/custom/ad-sidebar.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
<div class="sidebar-section">
<h3><span>Ads</span></h3>
{%- if site.adsense -%}
<!-- github_resp_sidebar -->
<amp-ad width="100vw" height="292"
{%- if site.consent == true %}
{%- if site.consent == true -%}
{%- if site.iubenda.remote_consent_url -%}
data-block-on-consent-purposes="1,3,4"
{%- assign consent_type = "iubenda" -%}
{%- else -%}
{%- assign consent_type = "built-in" -%}
{%- endif -%}
{%- endif -%}
<!-- github_resp_sidebar -->
<amp-ad width="100vw" height="292"
{%- case consent_type %}
{%- when "built-in" -%}
data-block-on-consent-purposes="advertising"
data-npa-on-unknown-consent=true
{%- endif -%}
{% endif -%}
{%- when "iubenda" -%}
data-block-on-consent-purposes="1,3,4"
{% endcase -%}
type="adsense"
data-ad-client="{{ site.adsense.client_id }}"
data-ad-slot="{{ site.adsense.ad_slot.sidebar }}"
Expand Down
1 change: 1 addition & 0 deletions _layouts/blank.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{{ content }}
43 changes: 24 additions & 19 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
<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>
{%- if site.iubenda.remote_consent_url -%}
{%- assign consent_type = "iubenda" -%}
{%- else -%}
{%- assign consent_type = "built-in" -%}
{%- endif -%}
{%- 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 -%}
Expand All @@ -25,7 +30,7 @@
{%- 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 -%}
{%- if consent_type == "built-in" 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>
{%- endif -%}
{%- if page.amp.youtube -%}
Expand Down Expand Up @@ -61,6 +66,9 @@
{%- 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 }}">
{%- endif -%}
{%- if consent_type == "iubenda" -%}
<meta name="amp-consent-blocking" content="amp-analytics,amp-ad,amp-auto-ads,amp-iframe,amp-youtube,amp-gist,amp-form">
{%- endif -%}
{%- if page.custom_head -%}
{{ page.custom_head }}
{%- endif -%}
Expand All @@ -69,12 +77,10 @@
{% include css/amp-bs4.min.css %}
{% include css/amp-theme.min.css %}
{% include css/amp-navigation.min.css %}
{%- if site.consent == true -%}
{%- if site.iubenda.remote_consent_url and site.iubenda.tp_btn_style -%}
{% include css/amp-iubenda-consent.min.css %}
{%- else -%}
{% include css/amp-consent.min.css %}
{%- endif -%}
{%- if consent_type == "iubenda" and site.iubenda.tp_btn_style -%}
{% include css/amp-iubenda-consent.min.css %}
{%- else -%}
{% include css/amp-consent.min.css %}
{%- endif -%}
{%- if site.invitation_codes != false -%}
{% include css/amp-invitation-codes.min.css %}
Expand Down Expand Up @@ -113,13 +119,13 @@
{%- capture layout -%}{% if page.layout %}layout-{{ page.layout }}{% endif %}{%- endcapture -%}

<body class="{{ layout }}" data-amp-auto-lightbox-disable>
{%- if site.consent == true -%}
{%- if site.iubenda.remote_consent_url -%}
{% include consent/iubenda-amp-consent.html %}
{%- else -%}
<!-- Consent UI -->
{%- case consent_type -%}
{%- when "built-in" -%}
{% include consent/granular-user-consent.html %}
{%- endif -%}
{%- endif -%}
{%- when "iubenda" -%}
{% include consent/iubenda-amp-consent.html %}
{%- endcase -%}

{%- if site.gtm -%}
<!-- Google Tag Manager -->
Expand All @@ -128,14 +134,13 @@
{%- endif -%}
{%- if site.adsense.client_id and site.adsense.auto_ads != false -%}
<amp-auto-ads type="adsense" data-ad-client="{{ site.adsense.client_id }}"
{%- if site.consent == true %}
{%- if site.iubenda.remote_consent_url -%}
data-block-on-consent-purposes="1,3,4"
{%- else -%}
{%- case consent_type %}
{%- when "built-in" -%}
data-block-on-consent-purposes="advertising"
data-npa-on-unknown-consent=true
{%- endif -%}
{% endif -%}
{%- when "iubenda" -%}
data-block-on-consent-purposes="1,3,4"
{% endcase -%}
{%- if jekyll.environment != 'production' -%}
data-adtest="on"
{%- endif -%}
Expand Down
6 changes: 4 additions & 2 deletions _posts/2021-08-02-config-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ Our Jekyll theme offers two cookie consent settings: Simple Granular User Consen
| `consent` | <span>v2.9</span>{:.badge.badge-success}<br> Set to `true`{:.green} to enable the cookie consent user interface.<br> _Default:_ `false`. |
| `consent_preview` | <span>v3.3</span>{:.badge.badge-success}<br> Set to `false` to disable cookie consent in the development environment.<br> _Default:_ `true`{:.green}. |

#### Simple Granular User Consent <span>v2.9</span>{:.badge.badge-success}
#### Built-In Granular User Consent <span>v2.9</span>{:.badge.badge-success}

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.

Expand All @@ -300,7 +300,9 @@ For more information, refer to our detailed guide on [Introducing iubenda AMP Co

| Attribute | Property | Description |
| --------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `iubentu` | | |
| `iubenda` | | |
| | `siteId` | Your site’s unique ID code, used to share preferences among the same website/app. |
| | `cookiePolicyId` | Your cookie policy’s unique ID code, used to manage and customize the cookie banner/consent banner. |
| | `remote_consent_url` | Specify the URL for the remote AMP consent banner to be loaded. |
| | `tp_btn_style` | Set to `true`{:.green} to enable the Iubenda icon and style for the floating consent button.<br> _Default:_ `false`. |
| | `tp_btn_position` | Define the position of the Iubenda style consent button.<br> _Default:_ `bottom-left`.<br> Other options:`top-left`, `top-right`, and `bottom-right`<br> (effective only if `tp_btn_style` is `true`) |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ A: You can personalize the consent banner by:
- Logging into your iubenda account and customizing the cookie notice via the [iubenda dashboard](https://www.iubenda.com/en/help/3831-customize-cookie-banner).
- Configuring the settings in the remote consent UI's HTML file as outlined in [iubenda's instructions](https://www.iubenda.com/en/help/22135-cookie-solution-amp-wordpress#websites-not-powered-by-wordpress) and [advanced guide](https://www.iubenda.com/en/help/1205-how-to-configure-your-cookie-solution-advanced-guide).

For more detailed customization options, please refer to the iubenda documentation.
For more detailed customization options, please refer to the [iubenda documentation](https://www.iubenda.com/en/help/3182-cookie-consent-amp-pages).

{% endcapture %}

Expand Down
53 changes: 53 additions & 0 deletions embeds/disqus-for-amp.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
---
layout: blank
---

<div id="disqus_thread"></div>
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event)
{
if (event.data) {
var msg;
try {
msg = JSON.parse(event.data);
} catch (err) {
// Do nothing
}
if (!msg)
return false;

if (msg.name === 'resize' || msg.name === 'rendered') {
window.parent.postMessage({
sentinel: 'amp',
type: 'embed-size',
height: document.body.offsetHeight
}, '*');
}
}
}
</script>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
*/
var disqus_config = function () {
var params = new URLSearchParams(window.location.search);
this.page.url = params.get("url");
this.page.title = params.get("title");
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');

s.src = 'https://{{ site.amp_disqus.shortname }}.disqus.com/embed.js';

s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<style>
iframe[src*="ads-iframe"] {
display:none;
}
</style>
40 changes: 40 additions & 0 deletions embeds/iubenda-cs-for-amp.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
layout: blank
---

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="robots" content="noindex">
<title>AMP Cookie Consent</title>
</head>

<body class="iubenda-cookie-solution">
<span class="iubenda-cs-preferences-link"></span>
<script type="text/javascript">
var _iub = _iub || [];
// Your own Privacy Controls and Cookie Solution configuration
_iub.csConfiguration = {
lang: 'en',
siteId: {{ site.iubenda.siteId }}, // Your own site ID
cookiePolicyId: {{ site.iubenda.cookiePolicyId }}, // Your own cookie policy ID
enableTcf: true,
askConsentIfCMPNotFound: true,
googleAdditionalConsentMode: true,
googleAdsPreferenceManagement: true,
floatingPreferencesButtonDisplay: false,
banner: {
acceptButtonDisplay: true, // Recommended
customizeButtonDisplay: true, // Recommended
rejectButtonDisplay: true // Advisable
}
};
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
</body>

</html>
15 changes: 9 additions & 6 deletions gulpfile.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { src, dest, watch, series, parallel } from 'gulp';
import { src, dest, watch } from 'gulp';
import changed from 'gulp-changed';
import csso from 'gulp-csso';
import ext_replace from 'gulp-ext-replace';
Expand All @@ -11,8 +11,11 @@ import AmpOptimizer from '@ampproject/toolbox-optimizer';

const ampOptimizer = AmpOptimizer.create();

const buildFilesGlob = ['./_site/**/*.html', '!./_site/embeds/**'];
const cssFilesGlob = ['./_includes/css/*.css', '!**/*.min.css'];

function build(cb) {
return src('./_site/**/*.html')
return src(buildFilesGlob)
.pipe(
through2.obj(async (file, _, cb) => {
if (file.isBuffer()) {
Expand All @@ -31,7 +34,7 @@ function build(cb) {
}

function test() {
return src('./_site/**/*.html')
return src(buildFilesGlob)
// Validate the input and attach the validation result to the "amp" property
// of the file object.
.pipe(gulpAmpValidator.validate())
Expand All @@ -43,7 +46,7 @@ function test() {
}

function validate() {
return src('./_site/**/*.html')
return src(buildFilesGlob)
.pipe(
through2.obj(async (file, _, cb) => {
if (file.isBuffer()) {
Expand All @@ -70,15 +73,15 @@ function validate() {
}

function minifyCSS() {
return src(['./_includes/css/*.css', '!**/*.min.css'])
return src(cssFilesGlob)
.pipe(changed('./_includes/css/'))
.pipe(csso())
.pipe(ext_replace('.min.css'))
.pipe(dest('./_includes/css/'));
}

export default function () {
watch(['./_includes/css/*.css', '!**/*.min.css'], minifyCSS);
watch(cssFilesGlob, minifyCSS);
}

export { build, test, minifyCSS, validate };

0 comments on commit ae79800

Please sign in to comment.