Cookie Disclaimer Popup

Add a Cookie Disclaimer that turns on or off google cookies based on user response.

You will also need to set up Cookie Consent Mode within Tag Manager in the Tag Consent Settings, by following these instructions.

Example

Add script above Google Tag Manager script

			
				<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'
				});
				</script>
			
		

CSS

        
          /* Cookie Disclaimer */
          #cookie-disclaimer { position: fixed; bottom: 10px; right: 10px; margin-left: 10px; background: var(--gray); padding: 20px; z-index: 99999; border-radius: 4px; display: flex; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 2px 4px rgba(0, 0, 0, 0.23); align-items: center; }
          #cookie-disclaimer p { margin: 0; }
          #cookie-disclaimer a { text-decoration: underline; }
          #cookie-disclaimer button { border: 0; border: 1px solid var(--primary); background: var(--primary); color: #fff; padding: 10px 25px; margin-left: 15px; transition: 0.4s; }
          #cookie-disclaimer button:hover { background: #fff; color: var(--primary); }
          #cookie-disclaimer button[data-consent="decline"] { border: 1px solid #666; background: #666; }
          #cookie-disclaimer button[data-consent="decline"]:hover { color: #666; background: #fff; }
        
      

Javascript

Add to Master.js

        

		// Cookie Disclaimer
		function allConsentGranted() {
		   gtag('consent', 'update', {
		     'ad_storage': 'granted',
		     'ad_user_data': 'granted',
		     'ad_personalization': 'granted',
		     'analytics_storage': 'granted'
		   });
		};
		function allConsentDenied() {
		   gtag('consent', 'update', {
		     'ad_storage': 'denied',
		     'ad_user_data': 'denied',
		     'ad_personalization': 'denied',
		     'analytics_storage': 'denied'
		   });
		};

		function showDisclaimer() {
		   var shownDate = new Date();
		   shownDate.setDate(shownDate.getDate() + 1); //Set Expiration for 1 day from now
		   localStorage.setItem('disclaimerDate', shownDate);
		   $('body').append(`<div id="cookie-disclaimer" class="animated-slow animate-5 fadeInRight"><p>This website uses cookies to ensure you get the best experience on our website. <a href="/privacy-policy">Learn More</a></p><button data-consent="accept" type="button">Accept</button><button data-consent="decline" type="button">Decline</button></div>`)
		};

		function loadDisclaimer() {
		   var currentDate = Date();
		   var expDate = localStorage.getItem('disclaimerDate');
		   if ( localStorage.getItem('disclaimer') != 'shown' || Date.parse(expDate) < Date.parse(currentDate) ) {
		     showDisclaimer();
		   }
		   if (localStorage.getItem('consent') == 'accept'){
		     allConsentGranted();
		  } else {
		    allConsentDenied();
		  }
		};

		loadDisclaimer();

		$('#cookie-disclaimer button').click(function(){
		   let consent = $(this).data('consent');
		   if (consent == 'accept') {
		     allConsentGranted();
		   } else {
		     allConsentDenied();
		   }
		   localStorage.setItem('consent', consent);
		   localStorage.setItem('disclaimer', 'shown');
		   $('#cookie-disclaimer').fadeOut();
		});