Daily: Nicepage – Add GA and Cookies

Nicepage is an awesome Web Page Builder with 400+ Features and 10000+ Templates.

One of the features is to connect to Google Analytics, another is a Cookie Consent Plugin.

Unfortunately, i didn’t succeed in getting both together work. The goal was, only to load the GA code if the consent plugin allowed this.

So i created a workaround:

  • i didn’t configure the Google Tag Manger in the Settings
  • i add custom code to check cookie state and load Google Tag Manager

Add HTML Code to Site:

<script>    
	window.dataLayer = window.dataLayer || [];
    function gtag(){
    	console.log('gtag: arguments=', arguments);
    	dataLayer.push(arguments);
    }
    
    function setupGoogleTagManager(w,d,s,l,i){
        console.log('google tag manager: setup with', 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);
    }
    
	
	function setCookie(cname, cvalue, exdays) {
  		const d = new Date();
  		d.setTime(d.getTime() + (exdays*24*60*60*1000));
  		let expires = "expires="+ d.toUTCString();
  		document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
	}
	
    function getCookie(cname) {
      let name = cname + "=";
      let decodedCookie = decodeURIComponent(document.cookie);
      let ca = decodedCookie.split(';');
      for(let i = 0; i <ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
          c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    }
    
    function buildConsentCookie(consent) {
		console.log('buildConsentCookie: consent=', consent);
	    const consentCookie = {
    	    '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',
    	};	
        
    	console.log('buildConsentCookie: consentCookie=', consentCookie);
    	return consentCookie
    }
    
    function setConsent(consent) {
    	console.log('setConsent: ', consent);
    	const consentCookie = buildConsentCookie(consent);
		gtag('consent', 'default', consentCookie);  
    
		console.log('store consentMode: ',consentCookie);
    	localStorage.setItem('consentMode', JSON.stringify(consentCookie));
    }
    
    if(localStorage.getItem('consentMode') === null){
    	const consent = {
    	    necessary: false,
    	    marketing: false,
    	    analytics: false,
    	    preferences: false,
    	};
        consentCookie = buildConsentCookie(consent);
    	gtag('consent', 'default', consentCookie);
    } else {
    	consentCookie = JSON.parse(localStorage.getItem('consentMode'));
    	gtag('consent', 'default', consentCookie);
    }
</script>

Add HTML Code to Cookies Section

const consent = {
	necessary: true,
	marketing: true,
	analytics: true,
	preferences: true,
};

setCookie('u-gdpr-cookie', true, 180);
setConsent(consent);
setupGoogleTagManager(window,document,'script','dataLayer','GTM-#######');