1. Add the following to Extra Header Data
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
if(localStorage.getItem('consentMode') === null){
gtag('consent', 'default', {
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'ad_storage': 'denied',
'analytics_storage': 'denied',
'wait_for_update': 500,
});
} else {
gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
}
</script>
2. Add the following to Footer
<div class="cookie-consent-banner" id="cookie-consent-banner">
<h3>Cookie settings</h3>
<p>We use cookies to provide you with the best possible experience. They also allow us to analyze user behavior in order to constantly improve the website for you.</p>
<button class="cookie-consent-button btn-success" id="btn-accept-all">Accept All</button><button class="cookie-consent-button btn-outline" id="btn-accept-some">Accept Selection</button><button class="cookie-consent-button btn-grayscale" id="btn-reject-all">Reject All</button>
<div class="cookie-consent-options"><label><input checked="checked" disabled="disabled" id="consent-necessary" type="checkbox" value="Necessary" />Necessary</label> <label><input checked="checked" id="consent-analytics" type="checkbox" value="Analytics" />Analytics</label> <label><input checked="checked" id="consent-preferences" type="checkbox" value="Preferences" />Preferences</label> <label><input id="consent-marketing" type="checkbox" value="Marketing" />Marketing</label></div>
</div>
<script>
function hideBanner() {
document.getElementById('cookie-consent-banner').style.display = 'none';
}
if(localStorage.getItem('consentMode') === null) {
document.getElementById('btn-accept-all').addEventListener('click', function() {
setConsent({
necessary: true,
analytics: true,
preferences: true,
marketing: true
});
hideBanner();
});
document.getElementById('btn-accept-some').addEventListener('click', function() {
setConsent({
necessary: true,
analytics: document.getElementById('consent-analytics').checked,
preferences: document.getElementById('consent-preferences').checked,
marketing: document.getElementById('consent-marketing').checked
});
hideBanner();
});
document.getElementById('btn-reject-all').addEventListener('click', function() {
setConsent({
necessary: false,
analytics: false,
preferences: false,
marketing: false
});
hideBanner();
});
document.getElementById('cookie-consent-banner').style.display = 'block';
}
function setConsent(consent) {
const consentMode = {
'functionality_storage': consent.necessary ? 'granted' : 'denied',
'security_storage': consent.necessary ? 'granted' : 'denied',
'ad_storage': consent.marketing ? 'granted' : 'denied',
'analytics_storage': consent.analytics ? 'granted' : 'denied',
'personalization': consent.preferences ? 'granted' : 'denied',
};
gtag('consent', 'update', consentMode);
localStorage.setItem('consentMode', JSON.stringify(consentMode));
}
</script>
3. Styles can be added to footer or to Styles Custom (OPTIONAL)
<!-- STYLES -->
<style>
/** G CONSENT **/
#cookie-consent-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 999;
padding: 20px;
text-align: center;
box-shadow: 0 0 40px #00000050;
display: none;
}
#cookie-consent-banner button {
margin: 10px 5px;
padding: 5px 10px;
border-radius: 5px;
border: none;
}
#cookie-consent-banner button:hover {
background: #5cb85c;
color: #fff;
}
.cookie-consent-options label {
margin: 5px;
color: #555
}
.cookie-consent-options input {
margin-right: 5px;
margin-left: 5px;
}
#cookie-consent-banner h3 {
font-size: 2.2rem;
color: #555;
}
#cookie-consent-banner p {
font-size: 1.6rem;
color: #555;
}
</style>
For Further Info see here:
https://developers.google.com/tag-platform/security/guides/consent?consentmode=basic