@nextlevelbros
I use this script to do just that; it’s a pretty simple (i.e., not so sophisticated) script.
Paste this code into Settings -> Custom Code -> Body End, the styling is subjective 
:
<!-- Cookie Consent HTML -->
<div id="cookie-consent-banner" style="display: none;">
<div style="
position: fixed;
bottom: -3%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
z-index: 9999;
font-family: 'Lato', arial;
padding: 16px 32px;
border-radius: 16px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
display: flex;
justify-content: space-between;
align-items: center;
">
<div style="
max-width: 300px;
margin-right: 48px;">
<p><span style="font-size:18px;"><b>Accept Cookies</b></span><br />
<span style="font-size:12px;">This website uses cookies to give users like yourself the best possible content and experience.</span></p>
</div>
<div>
<button id="cookie-consent-button" style="
margin-left: 10px;
padding: 0px 24px;
border-radius: 24px;
border: none;
background: #0C1E32;
color: white;
cursor: pointer;">
<p>I Accept</p>
</button>
</div>
</div>
</div>
<!-- Cookie Consent SCRIPT -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var consentGiven = localStorage.getItem('cookieConsentGiven');
if (!consentGiven) {
document.getElementById("cookie-consent-banner").style.display = "block";
} else {
loadGTM();
}
document.getElementById("cookie-consent-button").addEventListener("click", function() {
localStorage.setItem('cookieConsentGiven', 'true');
document.getElementById("cookie-consent-banner").style.display = "none";
loadGTM();
});
});
function loadGTM() {
// Load Google Tag Manager Script
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','YOUR-GTM-ID');
}
</script>
Replace YOUR-GTM-ID with your actual Google Tag Manager ID and the GTM should fire after consent is selected and a local storage item is saved as “cookieConsentGiven=true”.
Remove GTM from Header and Body (if set):
Given that you’re loading GTM dynamically based on user consent, you should remove the GTM script from "Settings -> Custom Code -> Head Start" and the "noscript" version from Body End.
I check my site here, to see if I am compliant: https://2gdpr.com/
The styling needs to be done in code. I wish we could access the div ID and be able to style that inside the Builder instead…
@dejan @Pakic : Can we pass ID’s and Classes between the Custom Code Editor and the Builder?
