The TCF design

To use the IAB TCF Consent Framework and send the consent string to your vendors, you must use a consent pop-up that has been approved by IAB based on specific criteria.

The IAB has strict design requirements for how the UI of the consent pop-up should be before it complies with the framework. To make sure our clients follow these requirements, Cookie Information has created a consent pop-up design that has been approved by the IAB.

image__27_.png

This is an unstyled version of the Consent pop-up, which you can style to fit your brand. You can also change the IAB logo to your own logo very easily in the template Javascript code. See the guide here

The toggles on the first view of the popup are from Cookie Control SDK provided by Cookie Information (this will require you have set up the Cookie Control SDK. Read more about it here).

The design will adjust to fit the cookie categories which are found on your website automatically. This means that you only can see the final design after we have finalized a scan our your website and only if you have a public domain within your consent solution. This will happen 24 hours after you add the domains as a "public domain" in the Cookie Information Platform.

That means on a Consent Solution with only a TEST domain in it, will not show these toggles.

You can see the template here in action here:
https://iab.cookieinformation.com/

How to implement TCF

  • Navigate to the specific consent solution where you wish to apply the new consent pop-up template.
  • Choose the tab Pop-up and click Change template
Screenshot_2020-02-19_at_11.50.49.png
  • In the dropdown, choose the template called IAB - tcf 2.0 and click Update. The template will now be copied into the current Consent Solution and the domains connected to it. This will not affect other Consent Solution within your account as their designs will stay the same.
  • To finalize, click "Save & Publish."ยด

Implementing it on your website

  • Adjust the consent pop-up script by adding an attribute. To make sure that you are sending the correct consent string via IAB tcf, you need to add exchange the consent pop-up script from the standard version to one that contains the two tcf attributes, as you see below.
<script id="CookieConsent" src="https://policy.app.cookieinformation.com/uc.js" data-culture="en" data-tcf-v2-enabled="true" data-tcf-global-scope="false" type="text/javascript"></script>

If you already have implemented a consent pop-up script on your website please exchange it for this.

Here you can see the description of each data attribute

data-culture="en" ---> CONTROLS THE LANGAUGESdata-tcf-v2-enabled="true"---> ENABLES TCFdata-tcf-global-scope="false"---> ENABLES GLOBAL VS. LOCAL SCOPE OF THE CONSENT STRING. This is sometimes also refered to as Out-of-band.

  • To make sure that you reset consents, thereby complying with IAB policies and refreshing the implementation on your website, please use the push for consent function for that specific consent solution.

Working with TCF and the Cookie Control SDK

The consent pop-up will include the full functionality of the Cookie Control SDK with the one addition that the marketing category also will fire the IAB TCF consent string. This means that if a user declines on the Marketing toggle they would also decline in the TCF consent string, and vice versa.

Managing vendors and purposes

When using TCF 2.0 you have the possibility to manage the data shown in the consent popup about vendors and purposes you want to use.

So instead of using TCF global vendor list with all registered services, you can create your own vendor list.

When you manage or change TCF data it instructs Cookie Information, as your CMP, to update the TCF -String object accordingly.


To manage your vendor list you need to add a configuration in your source code (as an inline script) before the main Cookie Information uc.js script.

It's in JSON format. All of the settings are optional and if not defined CMP will make a fallback to TCF global vendor list.


Config is named 'IABTCF2Framework' :

<script> window.cookieInformationCustomConfig = {
IABTCF2Framework: {

allowedVendors: [1, 2, 3],
vendorsRestrictions: [
{

vendorId: 1,
disallowedPurposes: [1, 2, 3]
},
{ vendorId: 2,
disallowedPurposes: [2, 4]
}
]
}
};
</script>

allowedVendors= list of vendors that you want to be shown. Only these will be listed on the vendor view and only these will get consent in the TC consent string.

vendorsRestrictions= A option that enables you to make restrictions per each vendor independently.


The above setup explained: a vendor that has id 1 on the Global Vendor List is not allowed to use purposes that have ids: 1, 2, 3.


Purpose ids that are specified in the disallowedPurposes collection will also be removed from the legitimate interests purposes list for specific vendor.

On the purposes main view, lists of vendors under each of the purposes will be adjusted accordingly to above setup (only allowed vendors will be visible there).

How to generate your own Vendor JSON:
To make the setup easier for our clients we have made a vendor generator what will help you create the JSON File

Go to the IAB Vendor Generator here!

Country specific design requirements

Since local laws and guidelines can differ from the IAB TCF requirements for how your consent pop-up should look and how the text should be, the above guidance might have to adjust for your specific need.


If you need help determining how your consent pop-up please contact us at support@cookieinformation.com

One of the country-specific requirements is the design and text in Denmark. Here IAB Denmark has approved a different text which should be used without any amendments.


See the danish version here:

Screenshot_2020-09-10_at_12.56.03.png
Did this answer your question?