TCF v2.0 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.0 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 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.0 specification) and behave accordingly.

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

Anchor point for Configuration Options 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 Text customisation 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.0 Panel Controls

TCF v2.0 Headings

TCF v2.0 Legitimate Interests

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:',
        },
    }
};

Anchor point for Example Configuration Example Configuration

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