Setup instructions

Script for the website

The first step is to include the CookieTractor script on your website. Inside our setting 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 the 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 Google Tag Manager or similar tools.

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 be able to replace the players with cookie-less versions.

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 by clicking a link. You place the link somewhere on your site, preferably in the footer section. There are two ways to construct the link:

1. Insert a link with the class-attribute "cookie-consent-settings"

<a href="javascript:void(0)" class="cookie-consent-settings">Cookie settings</a>

1. Insert a link with the href-attribute "javascript:cookieTractor.openConsentSettings()"

<a href="javascript:cookieTractor.openConsentSettings()">Cookie settings</a>

When the visitor change consent settings, we'll remove cookies based on the new settings. Third-party cookies can not be deleted by us, why you should inform how they are deleted in the browser on your privacy policy page.


Google Tag Manager (GTM) settings for User Consent

To control which of your scripts belong to the respective cookie category, the scripts need to be categorized. 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" for any "Tags" 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);

You can also test if a consent if given with code:

if (cookieTractor.consentGivenFor('statistical')){
   console.log('Consent is given for statistical cookies');
}
if (cookieTractor.consentGivenFor('marketing')){
   console.log('Consent is given for marketing cookies');
}


Customized appearance

The most basic font and primary color settings 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 on the buttons, use this CSS:

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


Exclude the cookie dialog from an individual page

If you have a page where you don't want to display the cookie popup, you can apply the CSS class cc-hidden anywhere in the markup, for example, in body text that comes from your CMS. For example, pages with your Integrity Policy linked from the dialogue can be displayed before the visitor has given their consent.


Consent Mode is a technology from Google that makes it possible to use some of Google's tags and scripts without cookies being set until the user has given their consent for its use. Without consent, Google will carry out a limited tracking of the traffic and possible conversions. The advantage of this is that we can then see statistics and conversions in our tools even though the visitor has not given us consent for cookies.

Consent Mode is currently supported by the following Google products:

  • Google Analytics
  • Google Ads (Google Ads Conversion Tracking & Remarketing)
  • Floodlight

Our solution supports all the defined Consent Types that exist within the scope of Consent Mode::

  • analytics_storage, when consenting to statistics.
  • ad_storage, when consenting to marketing.
  • functionality_storage, upon consent for necessary.
  • personalization_storage, upon marketing consent.
  • security_storage, upon consent for necessary.

We automatically update the underlying APIs in Google Consent Mode and this works both with global site tags (gtag.js) and Google Tag Manager.

Getting Started:

For those of you using Google Tag Manager, we still recommend that you implement and use the Triggers we mention above for any Tags/Scripts that do not support Google Consent Mode. The tags/scripts that support Consent Mode should use the All Pages, built-in trigger, that way the Tag will always load but adapt its behavior based on the visitor's consent.

Test that Consent Mode works with Google Analytics:

  1. Delete all cookies and reload the page.
  2. Now you should see our cookie popup, and a request to *.google-analytics.com should have been sent with a querystring that includes gcs=G100. This means that Analytics has been called but without consent for cookies.
  3. In this mode, no cookie starting with _ga should have been saved on the domain.
  4. Then click "Accept All" in our dialog box. Within a few seconds, cookies with the name _ga should be created, indicating that the analytics tag has picked up the updated consent and started using cookies.

Support

If you have any questions about the installation process, please email info@cookietractor.com.