When integrating a cookie notice on WordPress websites, we use the "Beautiful Cookie Banner" plugin. This plugin is based on the Osano Cookie Consent script, which we have already used in our other blog posts.
Unfortunately, as of 20 May 2020, the plugin does not provide an option to load scripts located in the website's head section only after consent has been given.
Simply installing the tool does not ensure that scripts are loaded only after the cookies have been accepted.
Paradoxically, cookie notices that offer the option to accept or reject cookies also set cookies themselves. While this may sound strange at first, it is technically easy to explain. If a website visitor rejects the use of cookies, this decision needs to be stored somewhere – in a cookie. These cookies are considered essential cookies, which are necessary for the operation of the website and are therefore permitted even without consent.
The plugin therefore creates another cookie after the visitor has made a decision, storing the result of that choice. However, the tracking scripts cannot know anything about this decision. We therefore need to make a small change in the head section of the website to block the scripts.
In our case, we assume that the Analytics script is integrated using the Head, Footer and Post Injections plugin.
After installation, go to
Settings --> Header and Footer --> Head and footer
There, the Analytics code needs to be inserted into the Section Injection field.
Let's take the standard Analytics code:
<script> (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-XXXXX-Y', 'auto'); ga('send', 'pageview'); </script>
All we need to do is wrap the script in an if statement:
<script>
if (document.cookie.indexOf('cookieconsent_status=allow') > -1) {
(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-XXXXX-Y', 'auto'); ga('send', 'pageview');
}
</script>
That's all there is to it.
So what are we doing above? We are creating an if statement in which we use document.cookie to access the cookies. This returns a string containing all cookies stored in the browser for our website. The subsequent indexOf('cookieconsent_status=allow') method searches for the cookie with the value allow specified in the parentheses. If the method does not find the cookie cookieconsent_status=allow in the cookie string, it returns the value -1. If it finds the cookie, it returns its position within the string. We then check whether this value is greater than -1.
In other words: if the result is -1, consent was either rejected or has not yet been given, so the script contained within the if statement must not be executed. If the value is greater than -1, consent to the use of cookies has been given and the Analytics script can be executed. Implemented by our web agency on a website running WordPress 5.
