Setup instructions

Script for the website

The first step is to include the CookieTractor script on your website. Inside our tool, go to the tab "Installation" for the website and copy the script. Place the script as early as possible in the head-tag of the website, this is even more important if you're relying on CookieTractor to replace video-player for YouTube or Vimeo with their cookie-less contra parts. For the same reason, it's not recommended to load our script from ie. Google Tag Manager.

Our script will still work when triggered from Google Tag Manager or if it's placed before the closing body tag but the feature that replaces the video players will not be triggered early enough to replace the players with cookie-less versions.

Settings for the script

Our script supports several settings to customize its appearance on your website.

Inactivate the video-player wrapper

Add the following attribute to the script tag to inactivate this feature:

data-disable-youtube-wrapper="true"

Cookie settings for the visitor

The consent-modal can be reopened by the visitor at any time. Just include a a-tag with the class-attribute "cookie-consent-settings" anywhere on the website. Ie:

<a href="#" class="cookie-consent-settings">Cookie settings</a>

When the visitor change consent settings we'll remove any removable cookies based on the new settings.

Setting up Google Tag Manager (GTM)

CookieTractor has built-in support for Google Tag Manager and will trigger events based on the visitor's consent settings. To use these inside Google Tag Manager we need to create "Triggers" to use for any "Tags" that are dependent on the consent settings.

Create the following triggers inside your Google Tag Manager account:

Name

Trigger Type

Event Name

Consent - Necessary (All Pages)

Custom Event

cookies_necessary

Consent - Statistical (All Pages)

Custom Event

cookies_statistical

Consent - Marketing (All Pages)

Custom Event

cookies_marketing

Now, update any Tags that require consent from your users to be triggered by any of these Triggers.

Variables to check for consent

In some cases, one might need to check if a visitor has consented to a specific type of cookies using "Conditions" in Google Tag Manager. To make it easier to access this information we can add User-Defined Variables to get this information. In Google Tag Manager, go to "Variables" and add the following:

CookieConsent_AllowMarketing

Name: CookieConsent_AllowMarketing

Type: Custom Javascript

Code:
function(){
  return cookieTractor.consentGivenFor('marketing')
}

CookieConsent_AllowStatistical

Name: CookieConsent_AllowStatistical

Type: Custom Javascript

Code:
function(){
  return cookieTractor.consentGivenFor('statistical')
}

Vanilla Javascript-events for User Consent

If you're not using Google Tag Manager you can use vanilla JavaScript-events to load your scripts based on the visitor's consent.

The following code will react to consents given by the visitor

window.addEventListener('CookieConsentGiven', function (event) {

  console.log('CookieConsentGiven::PageEvent', event);
  console.log('CookieConsentGiven::PageEvent::Consents', event.detail.consents);

  var allowMarketing = event.detail.consents.indexOf('marketing') > 1;
  console.log('CookieConsentGiven::AllowMarketing', allowMarketing);

}, false);

Customized appearance

The most basic settings for font and primary color can be configured inside our application. You find them on the Settings tab. If you need to make further adjustments this is easily done using CSS in your website code.

To overwrite our rules use the following selectors:

html #CookieConsent .cookie-popup {

If you for example want to remove the rounded corners of the modal, use this CSS:

html #CookieConsent .cookie-popup > div { border-radius: 0; }