Welcome to our support center

How can we help you today?

Search our knowledge base for answers to common questions

FAQ

Installation and Configuration

Here you will find documentation on how to add the banner to your website, how to manage 3rd party scripts and the settings.
General Information

General info, pre-sales, resellers etc
Integrations

How to integrate CookieFirst with various other services like Google Tag Manager and others.
Advanced features

In this section you can find articles on our Javascript API and how to use it.

Promoted articles

So you created an account on CookieFirst and now are ready to integrate the banner on your website, great!

In your account select the website under "Sites" -> "Settings" for which you like to implement the banner. Look for the button "Your embed script".
On this page there are 3 fields.
1. The api key can be used if you use Wordpress, read more about that here.
2. The second field is the Javascript snippet which adds the banner to your website if you're not using Wordpress. Place this snippet as the first script after the opening <head> tag on your website.
3. The third field can be copied and pasted on your privacy policy page. It will show the up to date version of your cookie policy.
4. The last field has an embed which lets you only show the cookie table. This might be useful for when you have a great markup of your own cookie policy.

Block external scripts from loading or setting cookies

As you might know you cannot execute certain Third party scripts before a website visitor has actively consented to the Advertising/marketing category. In order to comply to this ruling you would need to change your third party tracking scripts on your website.
In this article you will read on what to do with those scripts in order for our banner to be fully compliant. You will have full control over your scripts and where they are executed.

This is an advanced feature, it is only available for our paid packages. Are you on the free plan? Please refer to this article.

Look up the scripts being used on your website. These might be advertising pixels, chat scripts or other integrations you might use for marketing, statistics or other purposes. For this example I use the setting up of a Facebook pixel.

You will receive this code from Facebook to embed the pixel on your website.

<!-- Facebook Pixel Code -->
<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', 'XXXXXXXXXXXXXX'); 
fbq('track', 'PageView');
</script>
<noscript>
 <img height="1" width="1" 
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXX&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

To add this code GDPR compliant to your website we would need to assign it to a category of cookies. In this case the Facebook pixel is third party advertising cookie.
We would need to change the <script> tag here on top of the code to the following:

Please pay attention to the part where you edit the “type=text/plain“ you need to change this or add this to your script to make sure it is only executed when a certain category is accepted.

For advertising/marketing we use

<script type="text/plain" data-cookiefirst-category="advertising">Your script here</script>

For functional scripts we use

<script type="text/plain" data-cookiefirst-category="functional">Your script here</script>

For necessary scripts we use

<script type="text/plain" data-cookiefirst-category="necessary">Your script here</script>

For performance scripts we use

<script type="text/plain" data-cookiefirst-category="performance">Your script here</script>

In the end our Facebook pixel script will look like this:

<!-- Facebook Pixel Code -->
<script type="text/plain" data-cookiefirst-category="advertising">
!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', 'XXXXXXXXXXXXXX');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXX&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

In order to be fully compliant you would need to change the appropriate scripts on your website.

Consent Mode v2: Basic versus Advanced

Explore the distinctions between basic and advanced modes of Consent Mode V2 for website or app implementation. These two approaches offer tailored solutions to manage user consent in compliance with privacy regulations.

Basic Consent Mode Implementation

Opting for the basic Consent Mode V2 setup ensures that Google tags are withheld from initiating until the user engages with a consent notification. This approach guarantees no data is shared with Google before the user's interaction. Upon receiving consent, Google tags are activated, employing Consent Mode V2 APIs to manage and transmit consent states in this sequence:
1. Dispatch initial consent states.
2. Update and dispatch revised consent states.

Should the user withhold consent, Google tags remain inactive, ensuring no data, including consent status, is shared. This leads to reliance on a generalized model for conversion modeling within Ads, emphasizing user privacy.

How to implement Basic Consent mode?
1. Make sure the google tags are blocked from loading before consent, add the cookie banner directly to the <head> of the website.

2. Configure the default settings of consent mode over the banner.

2. Block any google tags from loading before consent, alter the script tags: Change website's scripts to comply with the GDPR or if using Google Tag Manager Google Tag Manager cookie banner configuration (Default)

Advanced Consent Mode Implementation

The advanced variant of Consent Mode V2 allows Google tags to load immediately as the website or app is accessed, initiating the Consent Mode API. It proceeds to:
- Establish default consent states, typically set to non-consent unless altered.
- Send anonymized signals if consent is not granted.
- Await user consent via the consent banner to send complete data.

This method enhances modeling accuracy by offering an advertiser-specific model, in contrast to the basic version's generalized approach.

Comparative Overview

Feature	Basic Consent Mode	Advanced Consent Mode
Tag loading	Basic mode restricts tag loading until user consent	Loads tags before consent but with the default set to denied
Data transmission	No data, including the default consent is transmitted without user consent	If consent is denied the consent state and cookieless pings are send. If consent is granted cookies are set and all data is collected
Consent states	Set only after the user interacts with the cookie banner	The default settings are denied unless configured in another way and will update based on the choice of the user.
Tag behaviour after consent	Will only load and execute the consent mode api once a user grants consent.	Will modify the tag behaviour based on the consent of the user.
Conversion modeling	General, without a lot of defails	Advertiser-specific model

This tailored approach to consent management underlines the flexibility and precision offered by Consent Mode V2, ensuring compliance and user trust.

More information can be found in this article from Google. https://developers.google.com/tag-platform/security/concepts/consent-mode

How to implement Advanced Consent Mode:

1. If you are using Google Tag Manager: Google Tag Manager and Google Consent Mode v2

2. If you are loading google tags directly in your website and the cookie banner as well:

Google Consent Mode v2 without GTM (Manual integration)

If your website uses Google Adsense or Google Publisher Tag to display ads on your website you can now use the iab TCF framework to inherit consent settings and show ads with the corresponding consent settings.

To make sure your ads are correctly rendered on your website make sure to enable TCF for your cookie banner by following the article. How to enable iab TCF 2.2?

The next step is to make sure that the cookie banner is connected to the Adsense tag or Google Publisher tag. There are 3 options to do this:

1. Edit current tags on your website

Mark up your script tags by connecting the scripts to the advertising category of the banner:

Google Publisher Tag

Your current tag looks like below.
```
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
```
Change the tag to this:
```
<script type="text/plain" data-cookiefirst-category="advertising" data-src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
```
This makes sure that the script runs when the Advertising category is accepted and receives the correct signals.

Adsense

For adsense tags we recommend loading them over CookieFirst, see below .

2. Load your Adsense or GPT scripts over the CookieFirst banner

You can also decide to move your tags from your website and run them over the cookiefirst platform.

1. Go to your domain in the cookiefirst administration panel.

2. Click the "Scripts" button in the left menu.

3. Click the blue button "Add script" and search for Google Ads.

4. Select Load over banner

5. Copy the GPT.js or Adsense script and put in the code field.

6. Click enable and save the script.

3. Use Autoblock

Without making modifications to your adsense or gpt scripts you can also use the autoblocking feature. Important: the banner embed should be placed directly after the <head> tag and run before any Google scripts

1. Go to the scripts tab in CookieFirst.

2. Click "Add script"

3. And search for the Google Ads tag.

4. On the next screen select Integration Method Autoblock

5. Toggle to enable the autoblock and publish the script.
Important information

This feature is only available in Plus plans. Also predefined design options are enabled, visit the custom styling tab to look and check them out.

We have implemented the latest version (2.2) of IAB TCF in our banner to synchronize consent to IAB Vendors. To enable the feature you will need to make changes to your embed code to allow for this feature to work. So enabling the feature please go to the "Embed script" page to grab your new embed codes.

1. Enable TCF for your website

Go to the domain settings of the domain where you want to enable the IAB TCF. Look for the section called TCF settings.

Click the toggle to enable the feature and select the country where your website operates.

2. Select TCF vendors

You need to select the vendors that you want to share consent with, these vendors will receive the signals and are allowed to create advertising profiles of your visitors for advertising purposes.

You can easily select multiple or use the buttons to select all of them.

3. Optional: Enable Google Ad technology providers

If you do not want to enable these additional Ad technology providers you can skip this step.

The Ad Tech Providers are advertising vendors that are not yet registered on the IAB Europe Global Vendor List (GVL) but still might be used or you might want to use them on your website. In this case you need to make sure to ask consent for these providers as well.

Enable the this setting and select the vendors that you want to be using.

4. Optional for Adsense and Google Publisher tag

If your website is running advertising over the Google platform through either Google Adsense or Google Publisher Tag you need to make sure to connect your scripts to our cookie banner to make sure the consent is send to Google Advertising Products.

Read more in the following article on how to do this. Adsense and Google Publisher Tag

Google Tag Manager and Google Consent Mode v2

To effectively use Google Tag Manager and Cookie First you can use the following guide to implement the banner and to configure Google Consent Mode v2 for your website. More information about consent mode can also be found on the Google support pages.

We assume you already have knowledge of GTM and have created a website container to configure tags for your website.

Enable Google Consent Mode v2 for your cookie banner

Open your Domain settings and go to the tab "Google consent mode settings". Enable the option Google Consent mode and save your configuration. (so only enable the first toggle when using the GTM template)

1. Install over GTM gallery

1. Click New Tag, then click " Discover more tag types in the community Template gallery

2. Click the search icon in the right top corner and type CookieFirst

3 add the tag to your GTM and select it.

Another link here with options to install.

https://tagmanager.google.com/gallery/#/owners/cookiefirst/templates/gtm-template

2. Add the Cookie First banner to your site

There are two options here. Either you load the cookie banner over GTM or you load it directly in your website. If you load the banner already in your website code you can skip this step.

2.1 Load cookie banner over GTM

Add a new Tag to your GTM - give it a name eg. CookieFirst Config
Click "Tag Configuration" and on the panel select under "Custom" the Cookie First template.
Add the api key you copied from your Cookie First backend and paste it in the API key section.

You can also enable additional settings:

Pass Ad click information through URLs: When a visitor lands on an advertiser’s website after clicking an ad, information about the ad might be appended to the landing page URLs as a query parameter.

Redact Ads Data: When ad_storage is denied, new cookies will not be set for advertising purposes. Additionally, third-party cookies previously set on google.com and doubleclick.net will not be used. Data sent to Google will still include the full page URL, including any ad click information in the URL parameters.

3. Set the Default Consent State (Google Consent Mode v2)

In the next section of the template you can configure the default google Consent Mode settings for your tags. If you want to use them. You can also still use our legacy GTM configuration for your tags.

In this section you configure which Categories of Cookies and Scripts will be granted or denied before a user submits his/her consent. You can set defaults for specific regions. For a list of supported region codes check this wiki page.

Screenshot 2023-09-06 at 12.31.10.png

Important: the default setting for these categories is Denied. This is the most strict setting, most of the data protection legislations require and Opt-In basis called 'prior consent'. Which means only necessary cookies/scripts can be set before a user consents.

Click the New region setting and select the defaults for this region. By leaving the region empty this setting is for every user no matter the region.
To set the default consent for the EU + UK you can copy this comma separated list below and put it inside the region input field:

AT, BE, BG, CY, CZ, DK, EE, FI, FR, DE, GR, HU, HR, IS, IE, IT, LV, LI, LT, LU, MT, NL, NO, PL, PT, RO, SK, SI, ES, SE, CH, GB

Click Save to save your tag.

GTM and Consent Mode supports at this moment 7 different Consent Types which are mapped to the cookie first categories.

Consent Type	CookieFirst Category	Description
ad_storage	advertising	Enables storage, such as cookies (web) or device identifiers (apps), related to advertising.
ad_user_data	advertising	Sets consent for sending user data to Google for online advertising purposes.
ad_personalization	advertising	Sets consent for personalized advertising.
analytics_storage	performance (analytics)	Enables storage, such as cookies (web) or device identifiers (apps), related to analytics, for example, visit duration.
functionality_storage	functionality	Enables storage that supports the functionality of the website or app e.g. language settings
personalization_storage	functionality	Enables storage related to personalization e.g. video recommendations
security_storage	necessary	Enables storage related to security such as authentication functionality, fraud prevention, and other user protection. *No consent required although users are informed in the cookie policy about these scripts and cookies

3.1 Set the correct Trigger

1. Select under 'triggering' Consent Initialization - All Pages read more about this trigger.

2. Save your tag. If you use preview or publish your container the banner will be added to your website.

3. For Google tags use the normal triggers

Google tags like ga4 and adwords support built-in consent checks, meaning they will change behaviour according to the consent mode acceptance.

4. Configuring your Tags (NON-Google Tags)

Some Google Tags like Google Ads (ads conversion and re marketing), Floodlight and Google Analytics have built-in consent checks. You can execute these tags normally like you would. Unless you want to block Google tags before consent, in that case follow the steps from 4.1 (If you currently have our legacy GTM enabled you can disable these triggers)

How to check whether a tag has Built-in consent checks?

Open the tag and click Tag Configuration
Click Advanced Settings
On the bottom click "Consent Settings'

For tags that do not have built-in consent checks you will need to add the Consent Types yourself. These are called "Additional Consent Checks"

4.1 Additional Consent Checks & Basic Consent Mode

Your tags that do not support the Built-in consent checks now need to be configured to work with the Consent Types. This is also the case if you want to block Google tags from firing before consent.

Open a tag click Advanced settings -> Consent Settings and fill in the Consent Type required for this tag. In the tag below I added the advertising type. You can use the following types: ad_storage, analytics_storage, functionality_storage, personalization_storage or security_storage

Screenshot_2021-11-08_at_11.47.07.png

Create a new trigger in your container. Select "Custom Event" give it a name eg "cf_after_consent_update"
Parameters:
Event name: cf_after_consent_update
Fires on: All custom events

This makes sure that as soon as someone accepts the cookies the tag is fired. If you would add the "All Pages" trigger to these tags then the tag will fired upon reloading the page.
Your tags that do not support the Built-in consent checks now need to be configured to work with the Consent Types. Open a tag click Advanced settings -> Consent Settings and fill in the Consent Type required for this tag. In the tag below I added the advertising type. You can use the following types: ad_storage, analytics_storage, functionality_storage, personalization_storage or security_storage
To enable this tag to fire you need to setup the triggering, select here the Trigger you created in step 1. !Important: this is only for tags that need to run on for example the "All pages" event. For Tags that run on user actions you can just leave the triggers as they are.

Basic Consent Mode v2 with GTM

Basic Consent Mode means you actively block Google tags from loading on your website and then unblock them on consent. If all your tags are in Google Tag Manager it is best to block GTM from Loading and then let Consent Mode change the tag behaviour for the tags in gtm. !important: because we're blocking GTM from loading you need to load the cookie banner directly inside the website code above gtm.

First we add the Consent mode defaults inside theof the website. Then you add the banner embed code and then you can choose to either load the gtm container by adding it to the scripts section in your domain settings OR you can add it also to your website.

In the setup below I have added regions as well where the defaults apply to, you can set this up to your liking.


<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
// Set default consent to 'denied' as a placeholder
// Determine actual values based on your own requirements
  gtag('consent', 'default', {
      'ad_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'analytics_storage': 'denied',
      'functionality_storage': 'denied',
      'personalization_storage': 'denied',
      'security_storage': 'denied',
      'region': ['AT', 'BE', 'BG', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'HR', 'IS', 'IE', 'IT', 'LV', 'LI', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'CH', 'GB'
      ],
      'wait_for_update': 2000
      });
      gtag('consent', 'default', {
      'ad_storage': 'granted',
      'ad_user_data': 'granted',
      'ad_personalization': 'granted',
      'analytics_storage': 'granted',
      'functionality_storage': 'granted',
      'personalization_storage': 'denied',
      'security_storage': 'granted'
      });
      dataLayer.push({'gtm.start': new Date().getTime(), 'event': 'gtm.js'});
</script>
    <!-- Add your cookie banner embed code -->
<script src="https://consent.cookiefirst.com/sites/your-cookie-embed/consent.js"><script>

<!-- Google Tag Manager -->
<script type="text/plain" data-cookiefirst-category="functional">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');</script>

Setup your tags inside Google by using the regular triggers you would always use like "All Pages" or the Initialization Trigger (All pages)

To have a better overview of the settings for your tags and if Consent Mode is enabled you can enable the Consent Overview. Read more about how to enable this here.

How to implement Microsoft Ads Consent Mode with CookieFirst?

Over the course of the next months we will add it natively in our banner code but for now it's easy to implement consent mode. Just take the following helper script and put it in the <head> of the website before the UET code or if you're using gtm just put it above the gtm script.
```
  <script>
function handleConsentChange(e) {
    var consent = e.detail || {};
    var advertisingConsent = consent.advertising || null; // Get advertising consent from event detail

    // Set default Bing Ads consent to 'denied'
    window.uetq = window.uetq || [];
    window.uetq.push('consent', 'default', {
        'ad_storage': 'denied'
    });

    if (advertisingConsent === true) {
        // Bing Ads: Push Ads enabled
        window.uetq.push('consent', 'update', {
            'ad_storage': 'granted'
        });
    } else if (advertisingConsent === false || advertisingConsent === null) {
        // Bing Ads: Push Ads Disabled
        window.uetq.push('consent', 'update', {
            'ad_storage': 'denied'
        });
    } else {
        console.error("Unexpected advertising consent value:", advertisingConsent);
    }
}

// Add event listeners for cf_consent and cf_consent_loaded
window.addEventListener("cf_consent", handleConsentChange);
window.addEventListener("cf_consent_loaded", handleConsentChange);
</script>
  
```
Microsoft Ads Consent Mode: Enhancing Privacy and Compliance

In today's digital marketing world, privacy regulations like GDPR have made it essential for businesses to respect user preferences regarding data collection. Microsoft Ads Consent Mode is a powerful tool that helps advertisers balance compliance with effective campaign performance.

Consent Mode adjusts how Microsoft Ads collects and processes data based on user consent. When a user grants consent, data collection proceeds as usual, allowing full tracking of conversions and remarketing. However, if consent is denied, Microsoft Ads limits data collection to non-personalized data, ensuring compliance without compromising all insights.

Why is this Important?

Consent Mode helps businesses navigate privacy regulations while maintaining ad performance. By respecting user preferences, companies can build trust while still gathering essential data to optimize their campaigns. Additionally, it allows advertisers to create accurate remarketing lists and conversion tracking, even when consent isn't granted, by using non-personalized data.

To implement Consent Mode for Microsoft Ads effectively, ensure that your website's tracking tags are properly configured to respond to user consent. This approach ensures that your campaigns remain compliant and effective, providing a seamless user experience.

By integrating Microsoft Ads Consent Mode, you can protect your business from potential legal issues while optimizing your ad performance. It's a win-win for both privacy and marketing.

For more details, you can visit the official Microsoft Ads Help page.

How can we help you today?

Promoted articles

Basic Consent Mode Implementation

Advanced Consent Mode Implementation

Comparative Overview

1. Edit current tags on your website

2. Load your Adsense or GPT scripts over the CookieFirst banner

3. Use Autoblock

Important information

1. Enable TCF for your website

2. Select TCF vendors

3. Optional: Enable Google Ad technology providers

4. Optional for Adsense and Google Publisher tag