The TCF design
Suppose you use the IAB Transparency & Consent Framework (TCF) and send the correct consent string to your vendors. In that case, you must use a consent pop-up that IAB has approved 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 ensure our clients follow these requirements, Cookie Information has created a consent pop-up design that the IAB has approved.
The picture above displays an unstyled version of the consent pop-up, which you can style. You can also change the IAB logo to your logo in the template Javascript code. See the guide here.
The toggles on the first view of the pop-up are from cookie control SDK provided by Cookie Information. Using these toggles will require you have set up the cookie control SDK. Read more about it here.
The functionality of the pop-up automatically hides empty cookie categories. This functionality blocks you from seeing the final design before the complete scan, and the cookies are listed. Only domains listed as "public domains" will be scanned. The scan will finish 24-48 hours after adding the domains as a "public domain" in the Cookie Information Platform.
That means a Consent Solution with only a TEST domain will not show these toggles.
You can see the template here in action:
How to implement TCF
Navigate to the specific consent solution where you wish to apply the new consent pop-up template.
Go to the Pop-up appearance tab under the Change Template section
In the dropdown, choose the template called IAB TCF 2.0.
To finalize, click "Save & Publish." The IAB TCF pop-up design now applies to the domains in the consent solution you are editing. This implementation will not affect other consent solutions within your account.
Implementing it on your website
Adjust the consent pop-up script by adding an attribute. To ensure that you send the correct consent string via TCF, you need to add the exchange pop-up script from the standard version. The correct version is the one containing 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 ensure that you reset consent, 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 functionality ensures that if a user declines the marketing category, they would also decline in the TCF consent string and vice versa.
Managing vendors and purposes
When using TCF 2.0, you can manage the data shown in the consent pop-up about vendors and purposes you want to use.
So instead of using TCF global vendor list with all registered services, you can create your 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 shown. Only these vendors are on the vendor view, and only these will get consent in the TC consent string.
vendorsRestrictions= An 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 specified in the disallowedPurposes collection will also be removed from a specific vendor's legitimate interests purposes list.
For the purposes, primary view, the list of vendors will be adjusted according to the above setup.
Note: Some vendors don't set the cookies themselves, and therefore they don't need to receive the general consent, due to them only having "legitimate interest purpose"
Here is an example, where the general consent isn't toggled on, but the legitimate interest purpose is after users' accept all.
Country-specific design requirements
Local laws and guidelines can differ from the IAB requirements for how your consent pop-up should look and the text. The above guidance might have to adjust for your specific need.
If you need help on determining how your consent pop-up should look, 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 to be used without any amendments.
See the danish version here:
Configuring TCF for legitimate interests on the decline all CTA
Suppose you use the IAB TCF template, then by default, when a visitor chooses "Decline All". In that case, they will be opted out of legitimate interests. In some cases, it is beneficial to change this behaviour.
Suppose you want to ensure that legitimate interests are set to TRUE when a user selects "Decline All". In that case, you will need to make a small adjustment to the configuration file for TCF in the <head> of your site by adding the following line:
enableAllPurposesLegitimateInterestsOnDeclineAll: true
The full script should look like this:
<script type="text/javascript">
window.cookieInformationCustomConfig = {
IABTCF2Framework: {
enableAllPurposesLegitimateInterestsOnDeclineAll: true
}
};
<script>
How do I know it's working correctly?
You'll be able to see that the legitimate interests are configured correctly on the pop-up.
Visit your site and on the pop-up click "View purpose" (formål).
Select one of the dropdown menu items.
Scroll until you get to a toggle (which is active).
Decline all cookies, then re-open the pop-up. Repeat the same steps with the pop-up, and you should see that the toggle is still active, even declining cookies.
How to customize the third-party vendor list on your IAB consent pop-up?
If you would like to customize the third-party vendor list these are the steps you will need to take:
1. Head to vendorlistgenerator.eu
2. From the list, select the vendors that you would like to include. You can also use the "Option" button under the vendor if you would like to have granular control over which purposes the vendor can use the data.
3. Once you have chosen the vendors click "Generate"
4. Now you can copy the customized vendor list and paste it above the consent banner script (uc.js ).
5. After refreshing the page, only your chosen vendors will be included in your IAB consent banner.
Related articles: