tarteaucitron.js

When adding services, the default state (e.g., 'wait', 'true', or 'false') can be controlled in two ways:

1. Per Service: Define service.defaultState within the service object itself.
2. Globally: Set tarteaucitron.parameters.serviceDefaultState in the main configuration object.

If neither is set, the service defaults to 'wait'.

Tarteaucitron can automatically manage Google Consent Mode (GCM) and push consent updates to the Google Data Layer.

To enable Data Layer updates, set dataLayer: true in your configuration. When consent is updated, an event tac_consent_update is pushed to the window.dataLayer containing the list of authorized vendors.

When googleConsentMode is enabled (default), the library sets default consent states to denied and updates them to granted based on user interaction or service loading events.

tarteaucitron.init({
    dataLayer: true,
    googleConsentMode: true
});

Tarteaucitron.js manages services through a lifecycle driven by user consent. When a service is triggered (either via init() or a manual response):

1. Consent Check: The library checks if the service is allowed or if it's a 'safe' analytics service.
2. Cookie Creation: If allowed, a cookie is created to persist the choice.
3. Execution: If the service is allowed and hasn't been launched yet, the library executes the service's js() function (the script loader).
4. Fallback: If consent is denied, the library executes the service's fallback() function (if provided), allowing you to run a privacy-friendly version of the service.
5. UI Update: The UI is updated to reflect the new state (colors, progress bars, and status text).

To override default translations, define a tarteaucitronCustomText object before calling tarteaucitron.init(). This object is merged with the default translations.

For service-specific engagement text (e.g., changing "X is disabled"), use the key format engage-{SERVICE_KEY}.

tarteaucitronCustomText = {
  'support': {
    'title': 'Support client',
  },
  'close': 'Enregistrer et fermer',
  'engage-twitter': 'Follow us on Twitter!'
};
tarteaucitron.init(...);

The library emits several events that you can listen for on the document or window objects to react to consent changes or UI interactions.

Document Events

Triggered for each enabled service (replace {SERVICE_KEY} with the actual service key):

• {SERVICE_KEY}_added: Service has been added.
• {SERVICE_KEY}_loaded: Service has been loaded.
• {SERVICE_KEY}_allowed: Service was allowed by the user.
• {SERVICE_KEY}_disallowed: Service was disallowed by the user.

Window Events

• tac.root_available: The root element with the panel has been created and services will be loaded.
• tac.open_alert: Triggered when an alert is opened.
• tac.close_alert: Triggered when an alert is closed.
• tac.open_panel: Triggered when the control panel is opened.
• tac.close_panel: Triggered when the control panel is closed.

You can extend tarteaucitron.js by defining a new service object on the tarteaucitron.services namespace. This allows you to manage custom third-party scripts, their cookies, and their loading logic based on user consent.

tarteaucitron.services.mycustomservice = {
  "key": "mycustomservice",
  "type": "ads|analytic|api|comment|other|social|support|video",
  "name": "MyCustomService",
  "needConsent": true,
  "cookies": ['cookie', 'cookie2'],
  "readmoreLink": "/custom_read_more", // If you want to change readmore link
  "js": function () {
    "use strict";
    // When user allow cookie
  },
  "fallback": function () {
    "use strict";
    // when use deny cookie
  }
};

Tarteaucitron supports integration with Piano Analytics and Bing/Clarity consent modes.

Piano Consent Mode

Set pianoConsentMode: true. If pianoConsentModeEssential is also true, it sets the default preset to essential. Otherwise, it defaults to opt-out.

Bing Consent Mode

Set bingConsentMode: true. This will initialize window.uetq and window.clarity with default 'denied' states and update them to 'granted' or 'denied' based on user consent.

To start the cookie consent manager, call tarteaucitron.init(params) where params is a configuration object. This method sets up event listeners (scroll, resize, keydown, etc.), loads the necessary CSS and language files, and prepares the user interface.

Note that tarteaucitron.init() can only be called once per page load. If you need to trigger logic after initialization, use the events object to hook into the init or load lifecycle stages.

tarteaucitron.init({
    // your configuration options here
    privacyUrl: 'https://example.com/privacy',
    // ...
});

The tarteaucitron.engage(id) method generates the HTML for an 'engagement' element (a floating button or banner) that asks the user for consent for a specific service. This is useful for 'soft' opt-ins where you want to prompt the user to enable a service they haven't consented to yet.

It uses the service's name and localized fallback text to create a button with the class tarteaucitronAllow.

// Returns an HTML string for a service with ID 'google_analytics'
const engagementHtml = tarteaucitron.engage('google_analytics');
document.body.innerHTML += engagementHtml;

Use tarteaucitron.addScript to inject scripts into the document. This is used to ensure third-party scripts are only loaded after consent is given.

Parameters:

• url (string): The source URL of the script.
• id (string): The ID to assign to the script element.
• callback (function): Function to execute once the script has loaded.
• execute (boolean): If false, the callback is executed immediately without loading the script.
• attrName (string): Optional attribute name to set on the script.
• attrVal (string): Optional attribute value to set.
• internal (boolean): If true, bypasses tarteaucitron.parameters.useExternalJs checks.

tarteaucitron.addScript('https://example.com/script.js', 'my-script', function() {
    console.log('Script loaded and ready!');
});