User Opt-out With Gtag.js

We're looking to implement the option for our website visitors to disable tracking. I've read the Google Analytics opt-out dev guide but I'm still not totally clear on how to do th

Solution 1:

Paste the following into the head tag before the Analytics code (replacing the UA with your own UA)

<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';

// 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>

And use this to trigger it:

<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>

Solution 2:

Thanks for the reply!

Since I replied to your post, I too came up with a solution but have yet to find a way of removing the cookie if a user chooses to opt out. While data doesn't get sent back to Google, it would just be nice to remove the cookie for completion. Here's what I came up with.

<script async type="text/javascript">

function optIn() {
    sessionStorage.setItem('aValue', false);
}

function optOut() {
    sessionStorage.setItem('aValue', true);
    setCookie('_gat_gtag_TRACKING-ID', 'value', 0); 

}

var getCookieValue = sessionStorage.getItem('aValue');

var b = (getCookieValue == 'true');

window['ga-disable-TRACKING-ID'] = b;

</script>

And this is triggered by

<form class="form-inline">
<button value="optin" onClick="optIn();" class="btn btn-primary mb-2">Opt In</button>
<br />
<button value="optout" onClick="optOut();" class="btn btn-primary mb-2">Opt Out</button>
</form>

So what this is doing is setting window['ga-disable-TRACKING-ID'] to either true or false, depending on the visitors response, which gets stored in SessionStorage. Hope this helps anyone as well as the solution above.

Solution 3:

GTag Opt In is a tool that does it for you plus allows you to have cookies disabled by default and enable them later, disable again, enable again, and so on.

Disable cookies

   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-Y"></script>
-- <script>
-- window.dataLayer = window.dataLayer || [];
-- function gtag(){dataLayer.push(arguments);}
-- gtag('js', new Date());
-- gtag('config', 'UA-XXXXXX-Y');
-- </script>

At the point where GA is implemented, this needs to be updated by just importing the gtag.js script and removing the GA initialisation.

Enable GTag when user accepts cookies

GTag Opt In is a tool that enable and disable GA when user accepts/rejects cookies.

<script src="https://www.npmcdn.com/gtag-opt-in@2.0.0/dist/index.js"></script>

<script>
  GTagOptIn.register('UA-XXXXXX-Y');
</script>

<a href="javascript:GTagOptIn.optIn()">ACCEPT</a>
<a href="javascript:GTagOptIn.optOut()">REJECT</a>

First, library is loaded.
Second, the GA tracking ID is registered.
Third, the optIn and optOut functions are bind to user actions' accept/reject.

You can read more about it on How To Implement Google Analytics With Opt In.