<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'functionality_storage': 'denied',
    'personalization_storage': 'denied',
    'security_storage': 'granted'
  });
</script>

<!-- 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','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<div id="consent-banner" style="display: none;">
      <p>
      We use cookies to ensure that we give you the best experience on our website. <a href="/privacy-policy/" target="_blank">See our Privacy Policy for more info.</a>
    </p>
    <p><a id="consent-button" class="btn" href="javascript:consentAll();">OK</a></p>
</div>
body {
  margin: 0;
}

#consent-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-family: system-ui;
  display: flex;
  justify-content: center;
  align-items: center;
  
  p {
    margin: 1rem;
  }
  
  a {
    color: #fff;
  }
  
  .btn {
    text-decoration: none;
    background: #fff;
    color: #000;
    padding: .25rem .5rem;
  }
}
var allGranted = {
  'ad_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted'
};

function consentAll()
{
  gtag('consent', 'update', allGranted);
  createCookie('google-consent', true, 30);
  document.getElementById('consent-banner').style = 'display: none;';
  dataLayer.push({'event': 'consent-updated'});
}

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";               

    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

document.addEventListener("DOMContentLoaded", function() {
  if(readCookie('google-consent') == null)
    document.getElementById('consent-banner').style = '';
  else
    consentAll();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.