Using TD Javascript Consent Extension

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

Treasure Data JavaScript Consent Extension (TD JS Consent Extension) is a set of APIs that implement consent management solutions on the client-side. It allows the TD customers to define categories of data use as well as different contexts for consent collection.

The Consent Extension also empowers website visitors to control and customize their consent preferences for how data should be collected about them. Visitors can choose to opt out entirely or to selectively opt-out of data collection in a specific context if they don’t consent to the purpose of data use. There is also an add-on that enables you to fully build customizable consent management in your UI.

Prerequisites

• Familiarity with TD JS SDK

• Write API KEY to access Treasure Data Platform

About Context and Consent

Treasure Data JavaScript Consent Extension has the following concepts that allows you to define the consent information for your website:

• Context
• Consent

For example, you can include the parameters for context_id and purpose of a consent to make the consent unique. This combination allows you to query and filter consumer consent in Treasure Data.

Context

Context defines general information such as your brand, your domain, and the type of consent collection. These pieces of information identify in which context users have agreed or disagreed with the consents. Treasure Data provides the following default fields for context. You can always add additional fields to enrich the context.

context_id| An auto-generated ID for each context.

For example, a code snippet for context might look like this:

{
  brand: 'A brand',
  domain_name: 'abrand.com',
  collection_type: 'shopping_cart',
  collection_point_id: 'shopping_trnx_id',
  context_id: 'xxxxxxxxxx'
}

Consent

Consent defines the semantics of consent given by the consumer. Consent fields are defined as follows.

For example, a code snippet for consent might look like this:

{
  purpose: 'analytics',
  status: 'given',
  datatype: 'Purchase',
  context_id: 'xxxxxxxxxx',
  identifier: 'client id',
  expiry_date: 'YYYY-MM-DD'
}

Configuring TD Consent Manager

Consent Manager is the main JS object for the TD JS Consent Extension. The configuration for Consent Manager is set up along with the TD JavaScript SDK initialization. Type in your database name, API write key, and the host appropriate for your region.

Configure TD Consent Manager as follows:

1. Open or create a new js file, for example, td_initializations.js in which you are using JS SDK. Your file might look like this:

var td = new Treasure({
   database: 'database',
   writeKey: '1/xxxxxxxxxx',
   host: 'in.treasuredata.com',
   ...

2. Begin configuring the TD JS Consent Manager according to the previously listed parameters. Your example might look like this:

var td = new Treasure({
  database: 'database',
  writeKey: '1/xxxxxxxxxx',
  host: 'in.treasuredata.com',
  consentManager: {
    storageKey: 'storage key',
    successConsentCallback: function () {},
    failureConsentCallback: function () {},
    expiredConsentsCallback: function () {},
    consentTable: 'consent_table_name',
    contextTable: 'context_table_name',
    issuer: 'name of the consent management platform',
    dateFormat: 'YYYY-MM-DD'
  }
})

TD Consent Manager Parameters

You can configure TD Consent Manager using the following parameters.

Every time a page is loaded, TD JS Consent Manager will check the consent expiry date and if there’s any expired consent, then the expiredConsentCallback is triggered. It also updates the status of the expired consent to expired.

Creating Default Context

Adding context for consents, the context will be included when we send data to TD platform. You can specify their own context ID otherwise a new context ID will be generated as a return value.

For example, your code snippet might look like this:

sdk.addContext({
  brand: 'A Brand',
  domain_name: 'abrand.com',
  collection_type: 'shopping_cart',
  collection_point_id: 'shopping_trnx_id'
  context_id: 'uuid'
})

Creating Default Consent Preferences

For the consents that don’t have context ID, they will be added to a default context.

For example, your code snippet might look like this:

sdk.addConsents({
  'marketing': { // <--- purpose
description: 'description of consent',
datatype: 'Attibutes',
status: Given | Refused,
expiry_date: 'YYYY-MM-DD',
context_id: 'context_id'
  },
  'storing': { // <--- purpose
description: 'description',
datatype: 'datatype',
status: Given | Refused,
expiry_date: 'YYYY-MM-DD',
context_id: 'context_id'
  },
  'recommendations': { // <--- purpose
description: 'description',
datatype: 'datatype',
status: Given | Refused,
expiry_date: 'YYYY-MM-DD',
context_id: 'context_id'
  }
)

Configuring Callback Functions

The SDK also provides various callback functions including when consent has expired, when consent is updated, when consent is successfully sent to Treasure Data, or when the consent results in failure.

You can add additional code to determine what will be the behaviors when these callbacks are triggered.

For example, your code snippet might look like this:

function successCallback (preferences) {
  if (preferences['analytics'].status === 'given') {
td.setSignedMode()
td.unblockEvents()
  } else if (preferences['analytics'].status === 'refused') {
td.setAnonymousMode()
td.blockEvents()
  }

Ask for Consent from Website Visitors

You can create and deploy a cookie banner that is shown on your website to solicit consent from website visitors. A cookie banner usually contains a short statement that lets the visitors know their data is being collected and will be used for specific purposes according to their consent. In addition, you can add a link to the Consent Manager UI that allows site visitors to directly control their consent preferences.

See examples of cookie banner and Consent Manager UI in the Treasure Data GitHub repo.

Update Consent Preferences to TD Consent Manager

Similar to creating default consent preferences, you can update a consent status when a user approves or denies the consent for a specific data use. To do that, use the same names for the consent when you set them as defaults and call updateConsent (contextId, consentObject) with the following parameters:

Parameters for updating Consent preferences

For example, your code snippet might look like this:

sdk.updateConsent('xxxxxx-context-id', {
  'recommendations': {
status: 'refused'
  }
})

When you update a consent, only the updated consent is sent to the successConsentCallback after calling saveConsents.

Update Context to TD Consent Manager

You can also update an existing context to add more information for describing the context.

Parameters for updating Context :

sdk.updateContext('xxxxxx-context-id', {
  brand: 'Other brand',
  domain_name: 'otherdomain.com'
})

Saving Consent and Context to Treasure Data

You can save consent and context to local storage and to Treasure Data by using the following calls:

saveConsents(success, error);
saveContexts(success, error);

Parameters for saving Consent :

For example, your code snippet might look like this:

function success () {
  // yay()
}

function error (err) {
  /**
  * err: { success: false, message: 'Timeout' }
  */
}
sdk.saveContexts(success, error)

Parameters for saving Contexts:

For example, your code snippet might look like this:

function success () {
  // yay()
}

function error (err) {
  /**
  * err: { success: false, message: 'Timeout' }
  */
}
sdk.saveContexts(success, error)

Other Functions

These are other utility functions you can call for pulling consent information from TD Consent Manager locally.

getConsents()

| Return list of consents

getContexts()

| Return list of contexts

getConsentExpiryDate(contextId, consentPurpose)

Get expiry date for a specific consent getExpiredConsents()

Returns expired consents

Parameters for getConsentExpiryDate:

For example, your code snipped for getConsentExpiryDate might look like this:

sdk.getConsentExpiryDate('context_id', 'analytics')