{"id":27627207,"url":"https://github.com/treasure-data/td-js-consent","last_synced_at":"2025-06-15T09:36:43.043Z","repository":{"id":40753467,"uuid":"293980163","full_name":"treasure-data/td-js-consent","owner":"treasure-data","description":"This repo is for Treasure Data JavaScript Consent Management UIs","archived":false,"fork":false,"pushed_at":"2023-09-04T18:43:12.000Z","size":1756,"stargazers_count":2,"open_issues_count":14,"forks_count":3,"subscribers_count":61,"default_branch":"master","last_synced_at":"2025-05-27T09:34:34.692Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/treasure-data.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-09-09T02:24:50.000Z","updated_at":"2023-06-22T15:57:54.000Z","dependencies_parsed_at":"2025-04-23T13:57:15.854Z","dependency_job_id":"8873ec26-e54d-47ea-a096-95c10a34d3a9","html_url":"https://github.com/treasure-data/td-js-consent","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/treasure-data/td-js-consent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treasure-data%2Ftd-js-consent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treasure-data%2Ftd-js-consent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treasure-data%2Ftd-js-consent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treasure-data%2Ftd-js-consent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/treasure-data","download_url":"https://codeload.github.com/treasure-data/td-js-consent/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treasure-data%2Ftd-js-consent/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259952596,"owners_count":22936961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-23T13:53:32.119Z","updated_at":"2025-06-15T09:36:43.007Z","avatar_url":"https://github.com/treasure-data.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Treasure Data JavaScript Consent UIs\n\nAdd-on UIs for [Treasure Data JavaScript SDK](https://github.com/treasure-data/td-js-sdk)  Consent Extension\n\nThis add-on provides an example of how you can use TD JavaScript SDK Consent Extension APIs with your UI to build a fully customizable consent management. It includes a cookie banner and a web form for managing consent preferences.\n\n### Banner\n\nA small overlay displays on top of your website to let users know that the website is using cookies (and other similar technologies) to collect data for improving user experiences. Users can choose to adjust the preferences as they want.\n\n![banner](https://user-images.githubusercontent.com/2680785/94783615-23f50e00-03f7-11eb-9f21-fddb963cc7dc.png)\n\n### Form\n\nA web form for managing consent preferences\n\n![form](https://user-images.githubusercontent.com/2680785/94783608-20fa1d80-03f7-11eb-8ac9-919f9747c345.png)\n\n## Installing\nThis add-on depends on  Treasure Data JavaScript SDK to work properly, you need to load Treasure Data JavaScript SDK into your website first, see [this](https://github.com/treasure-data/td-js-sdk#installing) for more information.\n\nAdd the following JavaScript snippet to your website, it is better to put it at the end of the body tag\n\n```javascript\n\u003cscript src=\"https://cdn.treasuredata.com/cm/0.1/td-cm.min.js\"\u003e\u003c/script\u003e\n```\n\nWhen the script finishes loading, an object TDConsentManager is available in browser’s global context. You can use that object to setup your configurations accordingly\n\n### Polyfill\n\nThe add-on is using Web Component to build the UIs, some features might not be available in legacy browsers (IE11 for example), includes the following script snippet into your `\u003chead\u003e` tag\n\n```javascript\n\u003cscript src=\"https://unpkg.com/@webcomponents/webcomponentsjs@2.5.0/webcomponents-loader.js\"\u003e\u003c/script\u003e\n```\nThis loader dynamically loads the minimum polyfill bundle, using feature detection.\n\nFor more Information: [Web Component loader](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs)\n\n### NPM\n\nDoes not work with NodeJS. **Browser only**\n```javascript\nnpm install --save td-consent-ui\n```\nYarn\n```javascript\nyarn add td-consent-ui\n```\nImport\n```javascript\nimport TDConsentManager from 'td-consent-ui'\n```\n```javascript\nconst TDConsentManager = require('td-consent-ui')\n```\n\n## Usage\n\nWhen the scripts are ready, you can start configuring the UIs\n\n```javascript\nTDConsentManager.setConfig({\n  sdk: td, // Treasure Data JavaScript SDK instance\n  container: 'selector',\n  bannerContent: 'banner content'\n  bannerSubContent: 'banner sub content',\n  dialogTitle: 'dialog title',\n  dialogDescription: 'description',\n  cancelButtonText: 'Cancel',\n  saveButtonText: 'Save'\n})\n```\n\n**Parameters**:\n\n- **sdk**: Object (required) - Treasure Data JavaScript SDK instance\n- **container**: String | Object (optional) - Element selector or DOM object. Default `document.body`\n- **bannerContent**: String (required) - The banner's content\n- **bannerSubContent**: String (required) - Text of the link to the web form\n- **dialogTitle**: String (optional) - Form's title\n- **dialogDescription**: String (optional) - Form's description\n- **cancelButtonText**: String (optional) - Cancelling button's text. Default `Cancel`\n- **saveButtonText**: String (optional) - Saving button's text. Default `Save Settings`\n\nAfter finishing the setup, you can use method `showBanner` to show the banner or you can use `openConsentManager` to show the web form and let users adjust their preferences\n\n### showBanner()\n\nShow a small overlay on top of the website to let users know that you are collecting their data to improve performance and user experience\n\n```javascript\nTDConsentManager.showBanner()\n```\n\n### openConsentManager\n\nShow a web form for managing consent preferences. You can show the web form with your additional consents, please see [Context and Consent](https://github.com/treasure-data/td-js-sdk/blob/master/CONSENTMANAGER.md#context-and-consent) for how a consent looks like.\n\n```javascript\nTDConsentManager.openConsentManager(options)\n```\n\n**Parameters**:\n\n- **options**: Object (optional)\n  - **customConsents**: Object (optional) - Additional consents\n\n```javascript\nTDConsentManager.opentConsentManager({\n\tcustomConsents: {\n    'marketing': { // \u003c--- purpose\n      description: 'description of consent',\n      datatype: 'Attibutes',\n      status: 'given | refused',\n      expiry_date: 'YYYY-MM-DD',\n      context_id: 'context_id'\n    },\n    'storing': { // \u003c--- purpose\n      description: 'description',\n      datatype: 'datatype',\n      status: 'given | refused',\n      expiry_date: 'YYYY-MM-DD',\n      context_id: 'context_id'\n    },\n    'recommendations': { // \u003c--- purpose\n      description: 'description',\n      datatype: 'datatype',\n      status: 'given | refused',\n      expiry_date: 'YYYY-MM-DD',\n      context_id: 'context_id'\n    }\n  }\n})\n```\n\n## Full example\n\n```javascript\n// ************\n// script.js\n// ************\n!(function () {\n  function successCallback (preferences) {\n    var analytics = preferences['analytics'] || {}\n    if (analytics.status === 'given') {\n      td.setSignedMode()\n      td.unblockEvents()\n    } else if (analytics.status === 'refused') {\n      td.setAnonymousMode()\n      td.blockEvents()\n    }\n\n    td.trackPageview()\n  }\n\n  var td = new Treasure({\n    database: 'database_name',\n    writeKey: '1/xxxxxxxxxx',\n    host: 'in.treasuredata.com',\n    consentManager: {\n      successConsentCallback: successCallback,\n      expiredConsentsCallback: function (consents) {\n        console.log(consents)\n      },\n      failureConsentCallback: function (error) {\n        console.log(error)\n      }\n    }\n  })\n  td.ready(function () {\n    // setup the UIs\n    TDConsentManager.setConfig({\n      sdk: td,\n      bannerContent: 'We use cookies (and other similar technologies) to collect data to improve your experience on our site.',\n      bannerSubContent: 'You can change your preferences at any time'\n    })\n\n    // check if the preferences exists\n  \t// otherwise don't do the setup again.\n    if (!td.getPreferences()) {\n      var contextId = td.addContext({\n        brand: 'All',\n        domain_name: '',\n        collection_type: 'Whole website',\n        collection_point_id: 'whole_website'\n      })\n\n      td.addConsents({\n        analytics: {\n          description: 'Consent description',\n          status: td.consentManager.states.GIVEN,\n          datatype: 'Visits',\n          context_id: contextId,\n          expiry_date: '2050-01-01'\n        }\n      })\n\n      // You might want to save contexts and consents\n      // td.saveContexts()\n      // td.saveConsents()\n\n      TDConsentManager.showBanner()\n    }\n  })\n\n  var editPreference = document.querySelector('.edit-preferences')\n  editPreference.addEventListener('click', function (event) {\n    event.preventDefault()\n    TDConsentManager.openConsentManager()\n  })\n})()\n\n// ************\n// index.html\n// ************\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eWebsite Title\u003c/title\u003e\n\n  \u003cscript src=\"https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    \u003c!-- Load TD JavaScript SDK here --\u003e\n  \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \t...\n    \u003cfooter\u003e\n      \u003cspan\u003e\u003ca href=\"#\" class='edit-preferences'\u003eWebsite Data Collection Preferences\u003c/a\u003e\u003c/span\u003e\n    \u003c/footer\u003e\n  \u003c/div\u003e\n  \u003cscript src=\"https://cdn.treasuredata.com/cm/0.1/td-cm.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Browsers support\n| IE/Edge          | Chrome | Firefox | Safari |\n| ---------------- | ------ | ------- | ------ |\n| IE11, Edge \u003e= 15 | \u003e= 60  | \u003e= 60   | \u003e= 9   |\n\n## Support\n\nNeed a hand with something? Shoot us an email at support@treasuredata.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftreasure-data%2Ftd-js-consent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftreasure-data%2Ftd-js-consent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftreasure-data%2Ftd-js-consent/lists"}