{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-@l10n/ja/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"TD JavaScript Consent UI Add onの使用","description":"Treasure Data Product Documentation · Collect and Unify · Segment and Activate · Experiment and Analyze · Decisioning Automate with AI Scale and Trust.","siteUrl":"https://docs.treasuredata.com","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"td-javascript-consent-ui-add-onの使用","__idx":0},"children":["TD JavaScript Consent UI Add onの使用"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["このadd-onは、UIでTD JavaScript SDK Consent Extension APIを使用して、完全にカスタマイズ可能なconsent managementを構築する方法の例を提供します。以下の例に示すように、cookie bannerとconsent preferenceを管理するためのweb formを作成できます。"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#banner"},"children":["Banner"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#form"},"children":["Form"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#supported-browsers"},"children":["サポートされているBrowser"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#installing-the-add-on"},"children":["Add-Onのインストール"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#polyfill"},"children":["Polyfill"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#npm"},"children":["npm"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#configuring-the-ui"},"children":["UIの設定"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#showbanner"},"children":["showBanner()"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#openconsentmanager"},"children":["openConsentManager"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#full-example"},"children":["完全な例"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"banner","__idx":1},"children":["Banner"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ウェブサイトの上部に小さなoverlayが表示され、ウェブサイトがユーザー体験を向上させるためにデータを収集するためにcookie(および他の類似技術)を使用していることをユーザーに知らせます。ユーザーは希望に応じてpreferenceを調整できます。"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/banner.fc29920901be8ceb7238a80204a71894d84f4bc8191317c884b038e7c7a30325.ad50cbca.png","alt":""},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"form","__idx":2},"children":["Form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["consent preferenceを管理するためのweb form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/form.659f4a56e5575c85b1ac62b7cd783ddcb33004db52f560fe712c95c8b19dccf1.ad50cbca.png","alt":""},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"サポートされているbrowser","__idx":3},"children":["サポートされているBrowser"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"IE/Edge"},"children":["IE/Edge"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Chrome"},"children":["Chrome"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Firefox"},"children":["Firefox"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Safari"},"children":["Safari"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["IE11Edge 15以降"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["60以降"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["60以降"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["9以降"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"add-onのインストール","__idx":4},"children":["Add-Onのインストール"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["このadd-onは、正しく動作するために",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/treasure-data/td-js-sdk"},"children":["Treasure Data JavaScript SDK"]},"に依存しています。最初にTreasure Data JavaScript SDKをウェブサイトにロードする必要があります。詳細については、",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/treasure-data/td-js-sdk#installing"},"children":["td-js-sdkのインストール方法"]},"を参照してください。"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["以下のJavaScriptスニペットをウェブサイトに追加します。",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body"]},"タグの最後に配置することをお勧めします。"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<script src=\"link to js file\"></script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["scriptのロードが完了すると、browserのglobal contextで",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TDConsentManager"]},"オブジェクトが使用可能になります。そのオブジェクトを使用して、設定を適切にセットアップできます。"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"polyfill","__idx":5},"children":["Polyfill"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["add-onはWeb Componentを使用してUIを構築し、",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<head>"]},"タグに以下のscriptスニペットを含めます。"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<script src=\"<https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0\"></script>>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Internet Explorer 11などのlegacy browserでは、一部の機能が使用できない場合があります。このloaderは、機能検出を使用して最小限のpolyfill bundleを動的にロードします。"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["詳細については、",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"},"children":["Web Component loader"]},"を参照してください。"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"npm","__idx":6},"children":["npm"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["このNPM packageは",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["browserのみ"]},"で動作します。"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm install --save td-consent-ui\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Yarn"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"yarn add td-consent-ui\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"import TDConsentManager from 'td-consent-ui'\n// or\nconst TDConsentManager = require('td-consent-ui')\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"uiの設定","__idx":7},"children":["UIの設定"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["scriptの準備ができたら、UIの設定を開始できます。"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"    TDConsentManager.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","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["パラメータ"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["タイプ"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["説明"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["sdk"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object(required)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Treasure Data JavaScript SDKインスタンス"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["container"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String/Object(optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Element selectorまたはDOMオブジェクト。デフォルト",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["document.body"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["bannerContent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String(required)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["bannerのcontent"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["bannerSubContent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String(required)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["web formへのlinkのtext"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["dialogTitle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String(optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Formのタイトル"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["dialogDescription"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String(optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Formの説明"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["cancelButtonText"]}," :"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String(optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cancellingボタンのtext。デフォルト",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Cancel"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["saveButtonText"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String(optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Savingボタンのtext。デフォルト",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Save Settings"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["セットアップが完了したら、",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showBanner"]},"を使用してbannerを表示するか、",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["openConsentManager"]},"を使用してweb formを表示して、ユーザーがpreferenceを調整できるようにできます"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"showbanner","__idx":8},"children":["showBanner()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ウェブサイトの上部に小さなoverlayを表示して、パフォーマンスとユーザー体験を向上させるためにデータを収集していることをユーザーに知らせます。"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"TDConsentManager.showBanner()\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"openconsentmanager","__idx":9},"children":["openConsentManager"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["consent preferenceを管理するためのweb formを表示します。追加のconsent preferenceと共にweb formを表示できます。"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"TDConsentManager.openConsentManager(options)\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["オプションで、以下のパラメータを使用してconsent preferenceをカスタマイズできます。"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["パラメータ"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["タイプ"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["説明"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["options.customConsents"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object(optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object - 追加のconsent"]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"TDConsentManager.openConsentManager({\n  customConsents: {\n    'marketing': { // <--- 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': { // <--- 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': { // <--- 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","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"完全な例","__idx":10},"children":["完全な例"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// ************\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","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<!-- ************\nindex.md\n************ -->\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Website Title</title>\n\n  <script src=\"https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>\n  <script type=\"text/javascript\">\n    <!-- Load TD JavaScript SDK here -->\n  </script>\n</head>\n<body>\n  ...\n  <footer>\n    <span><a href=\"#\" class='edit-preferences'>Website Data Collection Preferences</a></span>\n  </footer>\n</div>\n<script src=\"link_to_cdn\"></script>>\n<script src=\"script.js\"></script>\n</body>\n</html>\n","lang":"html"},"children":[]}]},"headings":[{"value":"TD JavaScript Consent UI Add onの使用","id":"td-javascript-consent-ui-add-onの使用","depth":1},{"value":"Banner","id":"banner","depth":3},{"value":"Form","id":"form","depth":3},{"value":"サポートされているBrowser","id":"サポートされているbrowser","depth":3},{"value":"Add-Onのインストール","id":"add-onのインストール","depth":1},{"value":"Polyfill","id":"polyfill","depth":3},{"value":"npm","id":"npm","depth":3},{"value":"UIの設定","id":"uiの設定","depth":2},{"value":"showBanner()","id":"showbanner","depth":3},{"value":"openConsentManager","id":"openconsentmanager","depth":3},{"value":"完全な例","id":"完全な例","depth":2}],"frontmatter":{"seo":{"title":"TD JavaScript Consent UI Add onの使用"}},"lastModified":"2026-05-14T07:31:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/using-the-td-javascript-consent-ui-add-on","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}