New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GDPR & Google Analytics #290

Closed
it05jb opened this Issue Apr 12, 2018 · 17 comments

Comments

Projects
None yet
@it05jb

it05jb commented Apr 12, 2018

Hello all,

From what I can see on GDPR, non required cookies such as google analytics now need a soft opt in. Which obviously this script does.

However I am really struggling to understand where to put the google analytics script so that it is by default disabled unless someone opts in. The documentation isnt particularly descriptive of where it should go, and I can see other comments on here with people struggling. Anyone able to help?

onInitialise: function (status) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in' && didConsent) {
// enable cookies

HERE?

}
if (type == 'opt-out' && !didConsent) {
// disable cookies
}
},

onStatusChange: function(status, chosenBefore) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in' && didConsent) {
// enable cookies

HERE?

}
if (type == 'opt-out' && !didConsent) {
// disable cookies
}
},

onRevokeChoice: function() {
var type = this.options.type;
if (type == 'opt-in') {
// disable cookies
}
if (type == 'opt-out') {
// enable cookies
}
},

@NouvelleTechno

This comment has been minimized.

NouvelleTechno commented Apr 19, 2018

Hello,

I did this with my opt-in type

onInitialise: function (status) {
		var type = this.options.type;
		var didConsent = this.hasConsented();
		if (type == 'opt-in' && didConsent) {
			// enable cookies
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'UA-XXXXXX-XX');
		}
		},
		
		onStatusChange: function(status, chosenBefore) {
		var type = this.options.type;
		var didConsent = this.hasConsented();
		if (type == 'opt-in' && didConsent) {
			// enable cookies
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'UA-XXXXXX-XX');
		}
		},
		
		onRevokeChoice: function() {
		var type = this.options.type;
		if (type == 'opt-in') {
			// disable cookies
				clearCookie('_ga','.mydomain.com','/');
				clearCookie('_gat_gtag_UA_XXXXXX_XX','.mydomain.com','/');
				clearCookie('_gid','.mydomain.com','/');
			}
		},


@nika2000

This comment has been minimized.

nika2000 commented Apr 25, 2018

Hi NouvelleTechno!

I also try to use the code (only with al little different code to en- / disable) - but I don't know where to integrate this code.
Can you tell me on which place you have integrated it?

@NouvelleTechno

This comment has been minimized.

NouvelleTechno commented Apr 26, 2018

Hello,

I integrated it in the head

@nika2000

This comment has been minimized.

nika2000 commented Apr 28, 2018

Yes, thats clear.
But where in this code

`

<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "type": "opt-out" })}); </script>`

do you have integrated the hooks?
(for example)

onInitialise: function (status) { var type = this.options.type; var didConsent = this.hasConsented(); if (type == 'opt-in' && didConsent) { // enable cookies } if (type == 'opt-out' && !didConsent) { // disable cookies } },

I copied my google Adwords Code in the enable cookies - section.
But I think I haven't integrated the hook correctly in the other code, because there is no cookie if I press the accept button :-(

@NouvelleTechno

This comment has been minimized.

NouvelleTechno commented Apr 30, 2018

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
function clearCookie(d,b,c){try{if(function(h){var e=document.cookie.split(";"),a="",f="",g="";for(i=0;i<e.length;i++){a=e[i].split("=");f=a[0].replace(/^\s+|\s+$/g,"");if(f==h){if(a.length>1)g=unescape(a[1].replace(/^\s+|\s+$/g,""));return g}}return null}(d)){b=b||document.domain;c=c||"/";document.cookie=d+"=; expires="+new Date+"; domain="+b+"; path="+c}}catch(j){}};
window.addEventListener("load", function(){
	window.cookieconsent.initialise({
	"palette": {
		"popup": {
		"background": "#000000"
	},
	"button": {
		"background": "#65dc71",
		"text": "#000000"
	}
	},
		"position": "bottom-left",
		"type": "opt-in",
		"content": {
			"message": "Ce site utilise les cookies pour améliorer votre expérience de navigation. Ils sont actuellement désactivés",
			"dismiss": "",
			"allow": "Activer",
			"link": "En savoir plus",
			"href": "/vieprivee"
		},
		"revokeBtn": "<div class='cc-revoke @{{classes}}'>Désactiver les Cookies</div>",
		onInitialise: function (status) {
		var type = this.options.type;
		var didConsent = this.hasConsented();
		if (type == 'opt-in' && didConsent) {
			// enable cookies
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'UA-XXXXXX-XX');
		}
		},
		
		onStatusChange: function(status, chosenBefore) {
		var type = this.options.type;
		var didConsent = this.hasConsented();
		if (type == 'opt-in' && didConsent) {
			// enable cookies
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'UA-XXXXXX-XX');
		}
		},
		
		onRevokeChoice: function() {
		var type = this.options.type;
		if (type == 'opt-in') {
			// disable cookies
				clearCookie('_ga','.mysite.fr','/');
				clearCookie('_gat_gtag_UA_XXXXXX_XX','.mysite.fr','/');
				clearCookie('_gid','.mysite.fr','/');
				// Get an array of cookies
				var arrSplit = document.cookie.split(";");
				for(var i = 0; i < arrSplit.length; i++)
				{
					var cookie = arrSplit[i].trim();
					var cookieName = cookie.split("=")[0];
					// If the prefix of the cookie's name matches the one specified, remove it
					if(cookieName.indexOf("ssupp.") === 0) {
						// Remove the cookie
						document.cookie = cookieName + "=; Max-Age=-99999999;";
					}
				}
			}
		},
	})});
</script>
@nika2000

This comment has been minimized.

nika2000 commented Apr 30, 2018

Great, thak works! Thank a lot.
I had a problem with an other plugin, that disabled the cookies. My syntax in the popup seemed to be right :-)

@mindo2000

This comment has been minimized.

mindo2000 commented Apr 30, 2018

I have the problem, that GA needs a extern script. Without this extra script a get no call at GA.
<script async src='https://www.googletagmanager.com/gtag/js?id=UA_XXXXXX_XX'></script>
If i put this script in the head (outside this function), it calls google without a opt-in, too.
If i put this inside the function, i get a js-error:
..

onInitialise: function (status) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in' && didConsent) {
// enable cookies
document.write("<script async src='https://www.googletagmanager.com/gtag/js?id=UA_XXXXXX_XX'></script>");
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA_XXXXXX_XX');
}

..

I have no idea why.

@bobi33

This comment has been minimized.

bobi33 commented May 4, 2018

@NouvelleTechno and @nika2000 are either of you receiving a ReferenceError after clicking the "Revoke" button? In the storage tab of the web inspector the web browser gives an error using @NouvelleTechno 's code above...

ReferenceError: Can't find variable: clearCookie
-onRevokeChoice - site.com:80
-revokeChoice - cookie consent.min.js:1:12992
-h - cookie consent.min.js:1:4631
-h

@bobi33

This comment has been minimized.

bobi33 commented May 4, 2018

Nope, I must be tired...sorry @NouvelleTechno and @nika2000 ... simple syntax issue when defining clearCookie.

@bobi33

This comment has been minimized.

bobi33 commented May 4, 2018

@NouvelleTechno do you know how to add the revoke button to somewhere else? For example, inside the actual pop-up, so that the allow and dismiss appear, but if allow is chosen, then the revoke button replaces them...or even if the revoke button is always present with the allow and dismiss?

@TK8888

This comment has been minimized.

TK8888 commented May 17, 2018

I have the same issue as @mindo2000. The code from @NouvelleTechno is a great start, but it doesn't do anything without the gtag.js. When the gtag.js code is included, Google Analytics will launch as soon as a site (or page) is opened, making the cookieconsent script pretty much useless. Below is the default gtag.js code:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');
</script>

Accepting or declining doesn't do anything, since analytics is launched anyway.

Is anyone out there able to provide a full code from a working example, where the gtag scripts are included/merged into the cookieconsent code? Any help is appreciated.

@mindo2000

This comment has been minimized.

mindo2000 commented May 17, 2018

I found and create this workflow.
GA starts everytime with the anonymizeIp-function.

If the user clicks "Akzeptieren" the page loads again and the facebook- and hotjar-pixel too.
The dismiss-button is empty ;)

<script>
// Immer vor GA-Tracking
var gaProperty = 'UA-XXXXXXX-X';

// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}

// Opt-out function
function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
}
</script>

<script>
// GA-Tracking
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXXX-X', 'auto');
    ga('set', 'anonymizeIp', true);
    ga('send', 'pageview');
	
	
</script>



   <!-- Modified Facebook Pixel Code -->
    <script>
        

        var disableFb = 'facebook-disabled';
        if (document.cookie.indexOf(disableFb + '=true') > -1) {
          // don't fire facebook beacon
        }
		
		function FbOptIn() {
            // Insert Your Facebook Pixel ID below. 
            !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
            n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
            document,'script','https://connect.facebook.net/en_US/fbevents.js');
            
            fbq('init', 'XXXXXXXXXXXXXX');
            fbq('track', 'PageView');             
        }

        function customOptout() {
            document.cookie = disableFb + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
            gaOptout();
        }

    </script>
	
	<script>
	function HotOptIn() {
		(function(h,o,t,j,a,r){
			h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
			h._hjSettings={hjid:XXXXXXX,hjsv:X};
			a=o.getElementsByTagName('head')[0];
			r=o.createElement('script');r.async=1;
			r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
			a.appendChild(r);
		})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
	}
	</script>
	

  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
    
    <!-- Cookie Consent -->
    <script>
        window.addEventListener("load", function() {
            window.cookieconsent.initialise({
                "palette": {
                    "popup": {
                        "background": "#30C247",
                        "text": "#ffffff"
                    },
                    "button": {
                        "background": "#ffffff",
                        "text": "#30C247"
                    }
                },
                "theme": "classic",
                "position": "bottom-right",
                "type": "opt-in",
                "content": {
                    "message": "Wir verwenden Cookies zur Seitenanalyse und um Inhalte und Anzeigen unter anderem zu personalisieren. Bist du damit einverstanden, dass wir daf&uuml;r Cookies verwenden? (du kannst deine Entscheidung jederzeit widerrufen)",
                    "dismiss": "",
					"allow": "Akzeptieren",
                    "link": "mehr",
                    "href": "https://www.router24.info/datenschutz/"
					
                },
                //revokable: true,

               // animateRevokable: false,
                revokeBtn: "<div class='cc-revoke {{classes}}'>Cookiehinweis</div>",
                onInitialise: function(status) {
                    var type = this.options.type;
                    var didConsent = this.hasConsented();
                    if (type == 'opt-in' && didConsent) {
						// enable cookies
						window.FbOptIn();
						window.HotOptIn();
                    }
                },
                onStatusChange: function(status, chosenBefore) {
                    var type = this.options.type;
                    var didConsent = this.hasConsented();
					
                    if (type == 'opt-in' && didConsent) {
                        // enable cookies
						window.FbOptIn();
						window.HotOptIn();
                    }
                    location.reload();
                },
                onRevokeChoice: function() {
                    var type = this.options.type;
                    if (type == 'opt-in') {
                        // disable cookies

                    }
                    
                    var cookies = document.cookie.split(";");

                    for (var i = 0; i < cookies.length; i++) {
						var cookie = cookies[i];
                        var eqPos = cookie.indexOf("=");
                        var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
                    }
                    
                    location.reload();
                }
            })
        });

    </script>
@studioart

This comment has been minimized.

studioart commented May 17, 2018

just add the code in the script block field: youtube.com/watch?v=_M-xKn8NN54

@lazykins

This comment has been minimized.

lazykins commented May 26, 2018

mindo2000, thank you for your code, it's been the most helpful so far.

I am not a programmer and I am having two problems and I hope you can help me.

  1. When the user accepts, the page reloads but Analytics does not load. What code am I missing?(Note: I have replaced the XXXXX's with my own UA number.)
  2. How do I make sure the revoke button is accessible somewhere?

Thank you in advance.
L.

<script>
// Immer vor GA-Tracking
var gaProperty = 'UA-XXXXXX-X';

// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}

// Opt-out function
function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
}
</script>

<script>
// GA-Tracking
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXX-X', 'auto');
    ga('set', 'anonymizeIp', true);
    ga('send', 'pageview');
	
</script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
    
    <!-- Cookie Consent -->
    <script>
        window.addEventListener("load", function() {
            window.cookieconsent.initialise({
                "palette": {
                    "popup": {
                        "background": "#30C247",
                        "text": "#ffffff"
                    },
                    "button": {
                        "background": "#ffffff",
                        "text": "#30C247"
                    }
                },
                "theme": "classic",
                "position": "top",
                "type": "opt-in",
                "content": {
                    "message": "We use cookies on this site. Do you consent?",
                    "dismiss": "Dismiss",
					"allow": "I accept",
                    "link": "Privacy Policy",
                    "href": "privacy.html"
					
                },
               revokable: true,
               animateRevokable: true,
                revokeBtn: "<div class='cc-revoke {{classes}}'>Revoke Cookies</div>",
                onInitialise: function(status) {
                    var type = this.options.type;
                    var didConsent = this.hasConsented();
                    if (type == 'opt-in' && didConsent) {
						// enable cookies
                    }
                },
                onStatusChange: function(status, chosenBefore) {
                    var type = this.options.type;
                    var didConsent = this.hasConsented();
					
                    if (type == 'opt-in' && didConsent) {
                        // enable cookies
                    }
                    location.reload();
                },
                onRevokeChoice: function() {
                    var type = this.options.type;
                    if (type == 'opt-in') {
                        // disable cookies

                    }
                    
                    var cookies = document.cookie.split(";");

                    for (var i = 0; i < cookies.length; i++) {
						var cookie = cookies[i];
                        var eqPos = cookie.indexOf("=");
                        var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
                    }
                    
                    location.reload();
                }
            })
        });

    </script>
@mindo2000

This comment has been minimized.

mindo2000 commented May 28, 2018

Hello lazykins,

in the script the GA-Code ist already load (with the anonymizeIp-function). If you want to exclude the GA-code the script must modifize. But than the user will not be count bevor they accept.

The script works only without the revoke -button. The script wait for a chance. And accept und revoke is a chance. So in both ways you would accept. So the script have no revoke-button :)

@digamber89

This comment has been minimized.

digamber89 commented May 29, 2018

Hey guys a lot of examples here using the

 var type = this.options.type;
                    var didConsent = this.hasConsented();
					
                    if (type == 'opt-in' && didConsent) {
                        // enable cookies
					
                    }

I found that this won't work because even when user clicks dismiss hasConsented returns true and even though the user hasn't explicitly "ALLOWED" cookie to be used this fires on the initialize callback.

So to avoid this i did the following

` onInitialise: function (status) {
            var type = this.options.type;
            $status = this.getStatus();
            var didConsent = false;
            if( $status === 'allow'){
                didConsent = true;
            }


            if (type === 'opt-in' && didConsent) {
                // enable cookies
                alert('consent given');
            }else{
                alert('did not consent')
            }



        }`

Anyone else run into this issue ?

@ph168

This comment has been minimized.

ph168 commented Jun 10, 2018

@digamber89 You're right. hasConsented() returns true in either case.
Also you don't need to call this.getStatus(), since the status is already passed to your function.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment