How to implement CookieHub

To fully implement CookieHub and make sure no cookies are set on your user’s browsers until they have consented you’ll need to modify any JavaScript code used to load external services.

We offer three integration methods which as described below. You can use one or more methods and choose the one that fits your websites’s structure:

Delay inline JavaScripts block

The easiest method is to change inline JavaScript blocks so that they won’t be loaded right away. When configured correctly, CookieHub will modify the JavaScript blocks to instruct the browser to load them if the user consented to the assigned cookie category.

To integrate using this method, you’ll need to change the type of the script block to text/plain and set a new attribute: data-consent which contains the Id of the category that this external service fits into. 

Example

For this example we’ll use the standard Facebook Pixel code which looks like this:

<script>
!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', '1746710111111111');
fbq('track', 'PageView');
</script><br>

If we want to assign this to the marketing cookie category, we'll only have to modify the first line:

<script type="text/plain" data-consent="marketing">
!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', '1746710111111111');
fbq('track', 'PageView');
</script><br>

Please note. In this case, there is not type attribute on the script block so we'll just add it. If the type attribute would be already set to type="text/javascript" we would change it to type="text/plain"

JavaScript API

CookieHub offers JavaScript API with various events, methods and properties which you can use to determine if a user has consented to a cookie category and conditionally load javascript code.

You can find detailed information in the JavaScript API section.

Google Tag Manager

If you are already using Google Tag Manager to load external services, it may be a good idea to use the Google Tag manager integration method as described in this article:

Google Tag Manager implementation

Still need help? Contact Us Contact Us