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.

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.

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:

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.

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.

Introductory Text

TCF v2 Panel Controls

TCF v2 Headings

TCF v2 Legitimate Interests

TCF v2.2 Vendor Information

Google's Additional Consent Mode

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: