I’m using this code to create a custom cookie consent banner on Webflow for a client. On the original site https://google-consent-mode.webflow.io/ it appears to functioning properly, it remembers when a selection is made from a user and doesn’t reappear when the site is reloaded.
But when I clone the site, the banner appears after each reload not remembering my selection https://google-consent-mode.webflow.io/
Here’s the read only link in Webflow: https://preview.webflow.com/preview/google-consent-mode-cookie-consent-bann?utm_medium=preview_link&utm_source=designer&utm_content=google-consent-mode-cookie-consent-bann&preview=8054fe45be8a93ef82b1ea1fa5475aec&workflow=preview
I believe the issue is that when a selection is made, the variable ‘consentMode’ is not being updated with a value, thus the below code runs showing the banner each time:
// If consentMode has not been set, show Cookie Banner
if(localStorage.getItem('consentMode') === null) {
document.getElementById('cw-cookie-banner').style.display = 'block';
}
Here’s the full code, please help!
<!-- Cookie Consent Mode by Code & Wander -->
<script>
// Check selection
document.getElementById('cw-cookie-icon').addEventListener('click', function() {
setConsentCheckboxes();
hideOptions();
document.getElementById('cw-cookie-banner').style.display = 'block';
})
// Hide Cookie Banner
function hideBanner() {
document.getElementById('cw-cookie-banner').style.display = 'none';
}
// Hide more options
function hideOptions() {
document.getElementById('cw-cookie-options').style.height = '0px';
}
// If consentMode has not been set, show Cookie Banner
if(localStorage.getItem('consentMode') === null) {
document.getElementById('cw-cookie-banner').style.display = 'block';
}
//Logic to populate the preferences
function setConsentCheckboxes() {
uncheckAllConsentCheckboxes();
const consentModeString = localStorage.getItem('consentMode');
if (consentModeString) {
const consentMode = JSON.parse(consentModeString);
const consentMapping = {
'functionality_storage': 'consent-necessary',
'ad_storage': 'consent-ad-marketing',
'analytics_storage': 'consent-analytics',
'ad_user_data': 'consent-ad-user',
'ad_personalization': 'consent-ad-personalization',
'personalization_storage': 'consent-personalization',
'security_storage': 'consent-security',
};
Object.entries(consentMapping).forEach(([storageKey, checkboxId]) => {
const checkbox = document.getElementById(checkboxId);
if (checkbox) {
const isChecked = consentMode[storageKey] === 'granted';
checkbox.checked = isChecked;
const checkboxDiv = checkbox.previousElementSibling;
if (checkboxDiv) {
if (isChecked) {
checkboxDiv.classList.add('w--redirected-checked');
} else {
checkboxDiv.classList.remove('w--redirected-checked');
}
}
}
});
}
}
//Logic to uncheck all checkboxes
function uncheckAllConsentCheckboxes() {
['consent-analytics', 'consent-ad-personalization', 'consent-ad-marketing', 'consent-ad-user', 'consent-personalization', 'consent-security'].forEach(checkboxId => {
const checkbox = document.getElementById(checkboxId);
if (checkbox) {
checkbox.checked = false;
const checkboxDiv = checkbox.previousElementSibling;
if (checkboxDiv && checkboxDiv.classList.contains('w--redirected-checked')) {
checkboxDiv.classList.remove('w--redirected-checked');
}
}
});
}
// Logic to update the preferences
document.getElementById('cw-btn-accept-all').addEventListener('click', function() {
setConsent({
necessary: true,
analytics: true,
adpersonalized: true,
admarketing: true,
aduser: true,
personalized: true,
security: true,
});
hideBanner();
});
document.getElementById('cw-btn-accept-some').addEventListener('click', function() {
setConsent({
necessary: true,
analytics: document.getElementById('consent-analytics').checked,
adpersonalized: document.getElementById('consent-ad-personalization').checked,
admarketing: document.getElementById('consent-ad-marketing').checked,
aduser: document.getElementById('consent-ad-user').checked,
personalized: document.getElementById('consent-personalization').checked,
security: document.getElementById('consent-security').checked,
});
hideBanner();
});
document.getElementById('cw-btn-reject-all').addEventListener('click', function() {
setConsent({
necessary: true,
analytics: false,
adpersonalized: false,
admarketing: false,
aduser: false,
personalized: false,
security: false,
});
hideBanner();
});
// Map the preferences to Google Consent Mode
function setConsent(consent) {
const consentMode = {
'functionality_storage': consent.necessary ? 'granted' : 'denied',
'ad_user_data': consent.aduser ? 'granted' : 'denied',
'ad_storage': consent.admarketing ? 'granted' : 'denied',
'analytics_storage': consent.analytics ? 'granted' : 'denied',
'ad_personalization': consent.adpersonalized ? 'granted' : 'denied',
'personalization_storage': consent.personalized ? 'granted' : 'denied',
'security_storage': consent.security ? 'granted' : 'denied',
};
gtag('consent', 'update', consentMode);
localStorage.setItem('consentMode', JSON.stringify(consentMode));
}
</script>
JS was never my strong suit, and I’ve forgotten most of what I’ve learned. I remember enough of the logic to speculate that the consentMode value isn’t being updated, otherwise the Show Cookie Banner Boolean expression wouldn’t run. I tried adding 'consentMode':true,
to the logic to update the preferences, which obviously didn’t work.
Any help is hugely appreciated!