Before you start
Here are some things to know before you start:
The IAB Consent & Transparency Framework (TCF) is designed for companies involved in digital advertising and data processing. It primarily helps:
Publishers – Websites and apps that display ads and collect user data.
Advertisers – Businesses that use targeted ads to reach audiences.
AdTech vendors – Companies that provide technology for serving and managing ads (e.g., ad networks, data management platforms).
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.
You can view the IAB TCF 2.2 template in our template showcase or see the image below.
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 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.
Implementing the TCF template:
Changing to the template consists of 3 parts:
Changing the template in our platform
Adding a new attribute to our pop-up script
Pushing users for new consent
In the platform:
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 v2.2 with Google Providers"
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 exchange the standard pop-up script. The correct version is the one containing the two TCF attributes, as you see below.
<script id="CookieConsent" type="text/javascript" src="https://policy.app.cookieinformation.com/uc.js" data-culture="EN" data-tcf-v2-enabled="true" data-tcf-version="2.2"> </script>
If you already have implemented the standard consent pop-up script on your website, please exchange it for the one above.
Make sure to change the data-culture attribute to the specific language that you use for your pop-up. You can find all the language codes and information you may need here in this handy guide.
Here you can see the description of each data attribute in the TCF script:
data-culture="en" ---> CONTROLS THE LANGUAGES
data-tcf-v2-enabled="true" ---> ENABLES TCF
data-tcf-global-scope="false"---> ENABLES GLOBAL VS. LOCAL SCOPE OF THE CONSENT STRING
Pushing for consent
When switching from version 2.0 to 2.2, you should ensure that consent is reset, thereby complying with policies and refreshing the implementation on the website.
You are able to do so by pushing for consent. You can find this in your specific consent solution and in the "Settings" tab. This will ask all users for their consent again.
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 the 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 the 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.
The purpose's primary view will show the list of vendors adjusted according to the above setup.
Note: Some vendors don't set the cookies themselves, and therefore they don't need to receive general consent, due to them only having a "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 needs.
If you need help on determining how your consent pop-up should look, contact us at support@cookieinformation.com.