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.

Change website's scripts to comply with the GDPR

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.

Google Tag Manager and Google Consent Mode

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 for your website.

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

Enable Google Consent Mode for your cookie banner

Open your Domain settings and go to the tab "Banner settings". Enable the option Google Consent mode and save your configuration.

1. Install over GTM gallery

Go to your container, then under templates click add variable template from gallery. Look up Cookie First and you'll find the template to add to your container. Or go here and add it to your workspace. 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)

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.

Click Save to save your tag.

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

GTM Consent Type	Cookie First Category	Description
ad_storage	advertising	Enables storage (such as cookies) related to advertising
analytics_storage	performance	Enables storage (such as cookies) related to analytics e.g. visit duration
functionality_storage	functional	Enables storage that supports the functionality of the website or app e.g. language settings
personalization_storage	functional	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.

4. Configuring your 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. (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

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

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.

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.