Skip to content

Setup instructions

Add CookieTractor to the website

Start with including the CookieTractor script on your website. In our setting tool, go to the tab Installation for the website and copy the script (note that you should not save the script to your own webserver, it will stop working when we do future updates). 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.

With the CookieTractor script in place, it's time to configure all cookie-enabling scripts loaded on your website to respect the user consent cookie category. CookieTractor does not automatically block any scripts, so this is crucial. Make sure you handle all scripts that set cookies on your site. You can trigger a search for cookies on the Cookies tab in the setting tool if this was not done when you added the website. Please note that there might be more cookies than those found, so make sure you cover all scripts.

CookieTractor has built in support for popular tag managers, read more about how to set it up:

Vanilla JavaScript events for User Consent

If you're not using a tag manager you can use vanilla JavaScript events to load your scripts based on the visitor's consent.

Listen for the following event to execute your code:

window.addEventListener('CookieConsent', function (event) {
    console.log('CookieConsent:', event.detail);
});

This event will pass details about the event, here are an example of the payload in event.detail:

{
    added : ['marketing'],
    removed : [],
    current : ['undefined','necessary','marketing'],
    trigger : 'initial'
}

Explanation of the properties:

  • added Contains categories where consent has been given as a result of the event.
  • removed Contains categories where consent has been revoked as a result of the event.
  • current Contains a categories where there is a consent granted after the event.
  • trigger Indicates what triggered the event, these are the possible values: 
    • initial = Indicate that this is the first/initial consent from the visitor after they made their first choice in the cookie screen. 
    • pageload = Indicates that this is a subsequent page load where there is an existing visitor consent.
    • update = Indicates that the visitor has opened the cookie settings and changed their consent. 

Here is an example on how to listen for marketing cookies consent:

window.addEventListener('CookieConsent', function (event) {
    if(!event.detail.current.includes('marketing'))
        return;
        
    console.log('We have marketing consent!');
});

If you want to listen to an event triggered when the user revokes a consent:

window.addEventListener('CookieConsent', function (event) {
    if(event.detail.trigger !== 'update')
        return;
        
    console.log('Added consents',event.detail.added);
    console.log('Removed consents',event.detail.removed);
});

You can also test if consent has been given using code:

if (cookieTractor.consent.contains(cookieTractor.category.functional)){
    console.log('Consent for functional cookies');
}
if (cookieTractor.consent.contains(cookieTractor.category.statistical)){
    console.log('Consent for statistical cookies');
}
if (cookieTractor.consent.contains(cookieTractor.category.marketing)){
    console.log('Consent for marketing cookies');
}

Here's an example of how to use vanilla events to load a javascript based on the visitor consent:

window.addEventListener('CookieConsent', function (event) {
    if(!event.detail.current.includes('marketing'))
        return;
    
    var script = document.createElement('script');
    script.src = "https://cdn.somewebsite.com/my-script.js";

    // use another target than head if necessary
    document.getElementsByTagName('head')[0].appendChild(script);
});

Find out more about our SDK in our JavaScript Reference

Consent Mode v2 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 v2 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 v2:

  • functionality_storage, upon consent for necessary.
  • security_storage, upon consent for necessary.
  • analytics_storage, upon consent for statistics.
  • ad_storage, upon marketing consent.
  • ad_user_data, upon marketing consent.
  • ad_personalization, upon marketing consent.
  • personalization_storage, upon marketing consent.

We automatically update the underlying APIs in Google Consent Mode v2 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 mentioned above for any Tags/Scripts that do not support Google Consent Mode v2. The tags/scripts that support Consent Mode v2 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.

Tag settings

When Google Consent Mode v2 is initiated, there are three settings on how the feature should act.

  • url_passthrough (default: false)
  • ads_data_redaction (default: true)
  • wait_for_update (default 1500)

If you want to adjust these settings, use the following code as a starting point:

<script type="text/javascript">
    cookieConsentSettings = {
        cmAdsDataRedaction: true,
        cmUrlPassthrough: false,
        cmWaitForUpdate: 1500,
    }
</script>
<script src="https://cdn.cookietractor.eu/cookietractor.js" data-lang="en-US" data-id="{{your-website-key}}"></script>

Test that Consent Mode v2 works with Google Analytics:

  1. Delete all cookies and reload the page.
  2. Now you should see the cookie modal, and a request to *.google-analytics.com should have been sent with a query string 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 cookie modal. 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.

You can also use Google Tag Assistant. You can follow the complete flow of a visit in the tool, including what consents are granted where. 

If you've got problems with Consent Mode, please contact us at info@cookietractor.com. Google can of course help, but we'd love to figure it out for you!

We have built in support for Microsoft Universal Event Tracking (UET) Consent Mode. This means that we'll automatically adjust the settings based on the visitors consent.

Our solution implements this according to the instructions from Microsoft, meaning that we'll:

  • Set ad_storage to denied by default
  • Update the value for ad_storage to granted when/if the visitor gives consent.

CSP:Blocked

Servers with content-security-policy enabled needs to allow access to *.cookietractor.com since we use several different subdomains to provide the service.

The visitor can reopen the cookie modal by clicking a button or a link. You place it on your site, preferably in the footer section. There are several ways to set it up:

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

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

2. Insert a button or a link that triggers the click event "cookieTractor.openConsentSettings()"

<button onclick="cookieTractor.openConsentSettings()">Cookie settings</button> 
... or:
<a href="javascript:cookieTractor.openConsentSettings()">Cookie settings</a>
... and you can of course attach the event to any kind of clickable element using Javascript.

When visitors change consent settings, we'll remove cookies based on the new settings. We can not delete third-party cookies, so you should inform users how they may be deleted in the browser on your privacy policy page.

Customized appearance

The cookie modal can be adjusted to your graphical profile. The most common adjustments can be made in our setting tool under the Design tab. Here you can set a custom font, adjust the primary color and change the border radius of the cookie modal and the buttons.

If you want to make further adjustments, it is easily done by writing CSS code. In the setting tool there is a built-in editor for this purpose. All design adjustments are therefore possible to do inside the setting tool; there is no need to add CSS code to your website.

There is the possibility to embed a list with all your cookies on a page of your choice. The visitor's current consent choice is also shown below the list. To embed the list, add a script to the page where you wish to show it. Then place a div-tag on the page on the position where you want to place it. The script and the div-tag can be found under the Installation tab in the setting tool.

The cookie declaration list will inherit the CSS on your website. If the page has no font CSS properties for the html or body tag the text might look wierd. Adjust this by adding CSS code under the tab Design. To set the text size to 18px add the code { font-size: 18px; }. You can of course change other properties for a more custom look.

Limit pages crawled for cookies

It is sometimes desired to limit which pages on the website to crawl for cookies. For example, a forum or webshop, where you know the cookies set are the same for a given page template. In the setting tool under the tab Settings > Crawler limits, you can enter a regular expression that states which pages the crawler should limit. You can then enter how many matching pages should be crawled under Crawl pages. If you set the value to 10, we will search the first 10 matching pages found and ignore the rest.

To limit pages below e.g., shop/ enter the RegEx: shop\/*

It's also possible to exclude pages with a query in the URL, which can be done with the expression: *\?*

To verify your RegEx, try regex101.com.

Exclude the cookie modal from an individual page

If you have a page where you don't want to display the cookie modal, 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 modal can be displayed before the visitor has given their consent.

If your website is used the css-class cc-hidden for other purposes our cookie modal will be hidden. To force the modal to show up, add the CSS class cc-hidden-ignore anywhere on the page.

Inactivate the video-player wrapper

CookieTractor will automatically replace YouTube and Vimeo videos with cookie less variants, as described here. If you want to disable this feature, add the following attribute to the CookieTractor script:

data-disable-youtube-wrapper="true"
data-disable-vimeo-wrapper="true"

Support

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