IAB TCF v2.2


If you are not interested in IAB Europe's Transparency and Consent Framework and wish to set up your own custom solution, please read the getting started guide for Optional Categories.

TCF v2 has less flexibility than Cookie Control's default Optional Category form of consent management; though it can generally just be enabled with minimal manual set up - assuming your site only needs to support TCF's registry of vendors known as the Global Vendor List (GVL).

You don't need to set optionalCookies with this form of consent management since IAB purposes will be the settings displayed on the first panel of Cookie Control. The TCF v2 Policies and Technical Specification also requires vendor disclosure of storage duration (Planet49 ruling) - this information is maintained by each third party vendor and CIVIC assumes no responsibility for the accuracy or delivery of this information.

Due to the asynchronous nature in which Cookie Control loads, IAB Europe recommends a TCF stub be included in the <head> section of your website to signal a CMP is in the process of loading and to wait before proceeding. This is essential for tools like the CMP Validator to function correctly. More information on the TCF stub functionality can be found here.

Anchor point for How to enable IAB Consent Framework

To enable this form of consent management, simply extend your configuration by adding the property iabCMP :

const config = {
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    product: 'XXX',
    iabCMP: true,
}

This will render Cookie Control as an IAB registered Consent Management Provider (CMP) and in turn present IAB Europe's standard purposes, features, vendors and legal descriptions to users so that they may signal their consent at various levels of granularity.

The onus is then on IAB registered vendors to test the consent state recorded (encoded as a TC String in accordance to the TCF v2.2 specification) and behave accordingly.

No further set up is required, though Cookie Control does supports the CMP API v2.2 as outlined by TCF v2.2 should you wish add any additional behaviour.

Due to TCF v2.2 policies and specifications, the use of more subtle opening interfaces like notify is prohibited. Certain text must be visible on the initial load without any user action - this means that Cookie Control can only support initialState: "OPEN" when iabCMP is enabled.

Anchor point for Configuration Options

Currently, Cookie Control only supports the global list of vendors and purposes that are centrally managed by IAB Europe. Though you may customise how this information is displayed via the the iabConfig object, which has the following properties:

OptionDescription
dropDowns

If set to true, Purposes, Special Purposes, Features and Special Features will be hidden by default so that the interface is more concise. The user will be able to see them after expanding the corresponding drop down.

boolean default: false

fullLegalDescriptions

If set to true, the full legal description for each Purpose or Feature will be shown, otherwise it will be hidden and the user can see them after expanding the corresponding drop down.

boolean default: true

saveOnlyOnClose

Cookie Control will wait until the user closes the widget before saving the consent, rather than doing so every time the user toggles a purpose on or off.

boolean default: false

publisherCC

The country code of the country that determines legislation of reference. Commonly, this corresponds to the country in which the publisher’s business entity is established.

string default: GB

includeVendors

The array of vendor ids that you wish to seek consent for. When left empty, consent will sought for all IAB TCF vendors. See Vendor Options below for more information.

array default: []

Anchor point for Vendor Options

An emphasis of TCF v2.2 is to allow site owners (Publishers) the ability to limit the number of vendors detailed by the CMP and avoid requesting user’s consent for Vendors that operate in technical environments and jurisdictions that are not relevant to their online services.

This can be achieved via the property includeVendors within the iabConfig object.

By default, this property will be an empty array - which Cookie Control will interpret as no preferences being set, and in turn showing all vendor's information to the end user.

To customise and limit which vendors are displayed, the property includeVendors needs to be populated with an array specifying each vendor's id that you wish to support.

The id's and additional information for each vendor can be found here. For example, Exponential Interactive would be as follows:

"vendors": {
    "1": {
        "id": 1,
        "contact": "tim.sleath@vdx.tv",
        "internationalTransfers": true,
        "name": "Exponential Interactive, Inc d/b/a VDX.tv",
        "legalAddress": "Exponential Interactive Spain S.L.;General Martinez Campos Num 41;Madrid;28010;Spain",
        "transferMechanisms": ["SCCs"],
        "serviceTypes": ["SSP", "DSP", "Ad Serving"],
        "territorialScope": ["FR", "DE", "NL", "ES", "GB"],
        "environments": ["Web", "Native App (CTV)"]
    },

If you wished to seek consent for only Exponential Interactive, then your configuration would need to include the vendor's id value (1) as follows:

iabConfig: {
    includeVendors: [1]
}

To make this more convenient, we have created the tool below where you can set the territorial scopes, environments and service types you are interested in and the tool will find all vendors operating within these parameters and create the array of their ids for you.

Territorial Scope
Environments
Service Types

Select from the options above to generate your code.

includeVendors: [];

Anchor point for Text customisation

You may also configure the text used to introduce the IAB panels via the iabCMP object, within the main text object.

As with the other text string properties, these are entirely optional. Cookie Control will use sensible defaults for any property not present in your configuration; and all properties may in turn be overwritten by your locale property, should the user's preferences coincide.

Please be aware, special care has to be taken when customising the text to ensure that your implementation properly adheres to the policies and specifications set out by IAB Europe.

Introductory Text

panelTitleThe main heading (h2) that appears first within the main preference panel and, depending on other settings, may become fixed to the top of the panel as the user scrolls.
panelIntroThe main introductory text that appears after the panelTitle and above all other controls. This opening paragraph needs to introduce the user to cookies and other tracking technology, including information on the processing of personal data.
panelIntro2The main introductory text that appears after the panelTitle and above all other controls. This second paragraph needs to introduce the user to the purposes, features and third party vendors outlined by the TCF v2.2
panelIntro3The main introductory text that appears after the panelTitle and above all other controls. This closing paragraph needs to introduce the user to the concept of legitimate interests and how they may freely give or revoke their consent at any time.
aboutIabThe descriptive text used to make the user aware of IAB Europe and TCF v2.
iabNameThe text used within the link for the user to find out more about TCF v2.
iabLinkThe publicly accessible URL that the link referenced by iabName directs the user.
acceptAllThe text used within the general, affirmative button for opting into all available options.
rejectAllThe text used within the general, negative button for objecting to all available options.
savePreferencesThe text used within the close button that features as the last control and, depending on other settings, may become fixed to the bottom of the panel as the user scrolls..

TCF v2 Panel Controls

dataUse

The text used within the navigation control to display information about TCF v2 Purposes, Special Purposes, Features and Special Features.

vendors

The text used within the navigation control to display information about third-party TCF v2 vendors.

TCF v2 Headings

purposes

The heading (h3) text used to introduce the section on TCF v2 Purposes, Special Purposes, Features and Special Features.

specialPurposes

The text used within the navigation control to display information about third-party TCF v2 vendors.

features

The text used within the navigation control to display information about third-party TCF v2 vendors.

specialFeatures

The text used within the navigation control to display information about third-party TCF v2 vendors.

TCF v2 Legitimate Interests

purposeLegitimateInterest

The text used to describe acceptance of TCF v2 Purposes processing persona data on the grounds of legitimate interest.

vendorLegitimateInterest

The text used to describe acceptance of third party TCF v2 vendors processing persona data on the grounds of legitimate interest.

relyConsent

The text used to describe which Purposes or Features third party TCF v2 vendors process when given consent

relyLegitimateInterest

The text used to describe which Purposes or Features third party TCF v2 vendors process on the grounds of legitimate interest.

TCF v2.2 Vendor Information

vendorDataUses

The text used to describe the data collected and processed by the vendor.

dataRetention

The text used to describe the vendor's data retention period, which appears after a dynamic number value in days.

privacyPolicy

The text used to describe the link to the vendor's privacy policy URL.

liClaims

The text used to describe which legitimate interests are at stake.

vendorCount

The text on the main panel following a dynamic number used to describe how many vendors you are seeking consent for with the supplied configuration.

tcfVendors

The heading (h2) used to introduce individual TCF vendors on the Vendors panel.

Google's Additional Consent Mode

googleVendors

The heading (h2) used to introduce individual ad tech providers (ATP) on the Vendors panel.

googleVendorInformation

The text used to introduce the domains each of Google's ATPs may store cookies on.

Default Values

For convenience, you may extend your configuration with all of the properties discussed on this page and their default values by adding the following snippet:

const config = {
    // apiKey and other settings...
    text: {
        iabCMP: {
            panelTitle:
                'This site uses cookies to store information on your computer.',
            panelIntro1:
                'We and select companies use cookies to store and retrieve ' +
                'information from your browser. This information may be ' +
                'about you, your preferences or your device and is mostly ' +
                'used to make the site work as you expect. While the ' +
                'information does not usually  directly identify you, ' +
                'details such as the device, operating system and type of ' +
                'browser may be considered personal data as it helps to ' +
                'create a more personalised web experience.',
            panelIntro2:
                'You can review how this information is used and customise ' +
                'your consent preferences for cookies or for any other ' +
                'identifying technology below by either purpose, feature ' +
                'or third party vendor.',
            panelIntro3:
                'Certain vendors may process personal data on the basis of ' +
                'legitimate interests to offer certain services. You have the ' +
                'right to object to the processing of data in this manner ' +
                'and can do so on an individual basis or globally by ' +
                'clicking "Reject All". Please refer to the vendor tab for ' +
                'more details. You may freely change your preferences ' +
                'at any time by clicking the Cookie Control icon.',

            aboutIab:
                'The aforementioned personalised advertising services adhere to the',
            iabName: 'IAB Transparency and Consent Framework (TCF)',
            iabLink:
                'https://iabeurope.eu/iab-europe-transparency-consent-framework-policies/',

            acceptAll: 'Accept All',
            rejectAll: 'Reject All',
            savePreferences: 'Save Preferences and Exit',

            dataUse: 'How data is used',
            vendors: 'Third party vendors',

            purposes: 'Purposes',
            specialPurposes: 'Special Purposes',
            features: 'Features',
            specialFeatures: 'Special Features',

            purposeLegitimateInterest:
                'I accept the processing of personal data ' +
                'on the grounds of Legitimate Interest ' +
                'for the purpose:',
            vendorLegitimateInterest:
                'I accept the processing of personal data ' +
                'on the grounds of Legitimate Interest by:',

            relyConsent: 'Relying on consent for:',
            relyLegitimateInterest: 'Relying on legitimate interests for:',

            vendorDataUses: 'Data collected and processed by vendor:',
            dataRetention: 'day data retention period',
            privacy: 'Privacy Policy',
            liClaims: 'Legitimate Interests at stake',
            vendorCount:
                'TCF vendors are seeking consent or wishing to pursue data processing purposes on the basis of their legitimate interests.',

            illustrationsDescription:
                'Read illustrations of possible use scenarios',
            tcfVendors: 'TCF Vendors',
            googleVendors: 'Google ad technology providers',
            googleVendorInformation:
                'Cookies may be shared across the following domains:',
        },
    },
}

Anchor point for Example Configuration

The full code snippet, including optional properties and output can be found here: