Cookie Control from CIVIC

IAB TCF v2.0


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.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.

Should you enable iabCMP, we recommend loading the Cookie Control module as early as possible in your document so that the stub functionality becomes available to queue commands from vendors. This typically means adding the Cookie Control <script> tag within the document's <head>. Alternatively, you may add your own stub functionality to queue commands from vendors, which Cookie Control will then process when after it loads.
Due to TCF v2.0 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 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.

boolean default: GB

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.

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

panelTitle The 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.0
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.0.
iabNameThe text used within the link for the user to find out more about TCF v2.0.
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.0 Panel Controls

dataUseThe text used within the navigation control to display information about TCF v2.0 Purposes, Special Purposes, Features and Special Features.
vendorsThe text used within the navigation control to display information about third-party TCF v2.0 vendors.

TCF v2.0 Headings

purposesThe heading (h3) text used to introduce the section on TCF v2.0 Purposes, Special Purposes, Features and Special Features.
specialPurposesThe text used within the navigation control to display information about third-party TCF v2.0 vendors.
featuresThe text used within the navigation control to display information about third-party TCF v2.0 vendors.
specialFeaturesThe text used within the navigation control to display information about third-party TCF v2.0 vendors.

TCF v2.0 Legitimate Interests

purposeLegitimateInterestThe text used to describe acceptance of TCF v2.0 Purposes processing persona data on the grounds of legitimate interest.
vendorLegitimateInterestThe text used to describe acceptance of third party TCF v2.0 vendors processing persona data on the grounds of legitimate interest.
relyConsentThe text used to describe which Purposes or Features third party TCF v2.0 vendors process when given consent
relyLegitimateInterestThe text used to describe which Purposes or Features third party TCF v2.0 vendors process on the grounds of legitimate interest.

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: