Didomi 反应

Didomi React 是一个 React 组件,在我们的SDK上方创建了一层.

安装组件

1. 使用 npm 安装库.

$ npm install --save @didomi/react

2. 导入您的应用程序中的模块 .

import { DidomiSDK } from '@didomi/react';

我们建议立即 DidomiSDK 中. 越快将组件即时化,横幅显示得越快,或者越快与合作伙伴共享同意和显示广告.

创建 DidomiSDK 组件

以来自 Didomi 控制台( 建议) 的配置来证实组件

1. 在控制台创建和配置您的同意通知 : https://console.didomi.io (英语)

2. 证明您的应用程序中的组件

<DidomiSDK
  apiKey="API_KEY"
  noticeId="NOTICE_ID" // If you want to target the notice by ID and not by domain
  platform="ctv" // If you want to target a CTV notice, default value is null
  gdprAppliesGlobally={true}
  sdkPath="https://sdk.privacy-center.org/"
  embedTCFStub={true}
  embedGPPStub={false} // Set to true to embed the IAB GPP stub before loading the SDK
  country="FR" // Override the user's country (ISO 3166-1 alpha-2 code)
  region="IDF" // Override the user's region (ISO 3166-2 code)
  onReady={didomi => console.log('Didomi SDK is loaded and ready', didomi)}
  onConsentChanged={cwtToken => console.log('A consent has been given/withdrawn', cwtToken)}
  onNoticeShown={() => console.log('Didomi Notice Shown')}
  onNoticeHidden={() => console.log('Didomi Notice Hidden')}
  onNoticeBackdropclick={() => console.log('Didomi Notice Backdrop Click')}
  onNoticeClickAgree={() => console.log('Didomi Notice Click Agree')}
  onNoticeClickMoreInfo={() => console.log('Didomi Notice Click More Info')}
  onPreferencesClickAgreeToAll={() => console.log('Didomi Preferences Click Agree to All')}
  onPreferencesClickDisagreeToAll={() => console.log('Didomi Preferences Click Disagree to All')}
  onPreferencesClickPurposeAgree={purposeId => console.log('Didomi Preferences Click Purpose Agree', purposeId)}
  onPreferencesClickPurposeDisagree={purposeId => console.log('Didomi Preferences Click Purpose Disagree', purposeId)}
  onPreferencesClickViewVendors={() => console.log('Didomi Preferences Click View Vendors')}
  onPreferencesClickSaveChoices={() => console.log('Didomi Preferences Click Save Choices')}
  onPreferencesClickVendorAgree={vendorId => console.log('Didomi Preferences Click Vendor Agree', vendorId)}
  onPreferencesClickVendorDisagree={vendorId => console.log('Didomi Preferences Click Vendor Disagree', vendorId)}
  onPreferencesClickVendorSaveChoices={() => console.log('Didomi Preferences Click Vendor Save Choices')}
/>

Didomi SDK将自动从Didomi Console下载其配置. 通过 Didomi 控制台应用的配置修改将自动分发给您的用户,而不修改您的代码 .

该组件仅支持IAB TCF v2. 何时 embedTCFStub 启用后,在装入 SDK 之前自动嵌入 TCF v2 stub .

如果您的同意通知也使用 IAB GPP 框架, 您可以选择通过设置嵌入 GPP stub embedGPPStub={true}。GPP 根不是默认嵌入的.

以本地配置来证明组件

如果您喜欢,您可以通过本地配置Didomi SDK,而不是通过Didomi Console管理配置.
通过这个设置, 修改您的配置需要您重新部署您的应用程序 .

您也可以使用本地配置来覆盖一些远程配置 。 例如,您可以自行提供通知(参见: Customize the notice ),同时在其余配置中仍然使用Didomi Console.

说明您的应用程序中的组件:

const didomiConfig = {  
  app: {
    vendors: {
      iab: {
        all: true
      }
    }
  }
}

...

<DidomiSDK
  config={didomiConfig}
  noticeId="NOTICE_ID" // If you want to target the notice by ID and not by domain
  gdprAppliesGlobally={true}
  sdkPath="https://sdk.privacy-center.org/"
  embedTCFStub={true}
  onReady={didomi => console.log('Didomi SDK is loaded and ready', didomi)}
  onConsentChanged={cwtToken => console.log('A consent has been given/withdrawn', cwtToken)}
  onNoticeShown={() => console.log('Didomi Notice Shown')}
  onNoticeHidden={() => console.log('Didomi Notice Hidden')}
  onNoticeBackdropclick={() => console.log('Didomi Notice Backdrop Click')}
  onNoticeClickAgree={() => console.log('Didomi Notice Click Agree')}
  onNoticeClickMoreInfo={() => console.log('Didomi Notice Click More Info')}
  onPreferencesClickAgreeToAll={() => console.log('Didomi Preferences Click Agree to All')}
  onPreferencesClickDisagreeToAll={() => console.log('Didomi Preferences Click Disagree to All')}
  onPreferencesClickPurposeAgree={purposeId => console.log('Didomi Preferences Click Purpose Agree', purposeId)}
  onPreferencesClickPurposeDisagree={purposeId => console.log('Didomi Preferences Click Purpose Disagree', purposeId)}
  onPreferencesClickViewVendors={() => console.log('Didomi Preferences Click View Vendors')}
  onPreferencesClickSaveChoices={() => console.log('Didomi Preferences Click Save Choices')}
  onPreferencesClickVendorAgree={vendorId => console.log('Didomi Preferences Click Vendor Agree', vendorId)}
  onPreferencesClickVendorDisagree={vendorId => console.log('Didomi Preferences Click Vendor Disagree', vendorId)}
  onPreferencesClickVendorSaveChoices={() => console.log('Didomi Preferences Click Vendor Save Choices')}
/>

配置选项( 道具)

下列配置选项可作为道具传递到 DidomiSDK 组件 :

配置对象( 选项)

通知通常通过Didomi Console配置. 如果您选择通过配置对象管理配置,则 config prop允许您通过从控制台上覆盖配置且是可选的配置选项.

这是传输到 config 道具 (英语). 详情请访问我们 SDK 文档。 。 。 .

{
  app: {
    ignoreCountry: true,
    privacyPolicyURL: 'http://example.com',
    name: 'Example',
    apiKey: '<Your API key>',
    logoUrl: 'http://logo.png',
    vendors: {
      iab: { // You either choose the option 'all', with optionaly 'exclude', or the 'include' option where you add the vendors manually
        all: true,
        exclude: [1],
        // OR
        include: [3],
      },
      didomi: ['google'],
      custom: [
        {
          id: 'custom-vendor', // Unique ID for the vendor
          name: 'Custom Vendor', // Display name of the vendor
          purposeIds: ['cookies'], // List of purposes that you want to collect consent for, for this vendor
          policyUrl: 'http://www.vendor.com/privacy-policy' // URL to the privacy policy of the vendor
        }
      ]
    },
    customPurposes: [
      {
        id: 'my_custom_purpose',
        name: {
          en: 'My custom purpose',
        },
        description: {
          en: 'Description',
        }
      }
    ]
  },
  languages: {
    enabled: ['en', 'fr', 'es', 'nl', 'ca', 'it', 'de', 'pt'], // List of languages that visitors can use
    default: 'fr', // Default language to use if the visitor uses a language that is not enabled
  },
  notice: {
    position: 'popup',
    closeOnClick: true,
    closeOnClickBackdrop: false,
    daysBeforeShowingAgain: 0,
    textAlignment: 'left',
    learnMorePosition: null,
    learnMoreMargin: '20px 0 0 0',
    logoAlignment: 'flex-start',
    content: {
      popup: {
        en: 'Text',
      },
      notice: {
        en: 'Text',
      },
      dismiss: {
        en: 'Text',
      },
      learnMore: {
        en: 'Text',
      }
    }
  },
  preferences: {
    defaultChoice: true,
    enableAllButtons: true,
    content: {
      text: {
        en: 'Text',
      },
      title: {
        en: 'Text',
      },
      disagreeToAll: {
        en: 'Text',
      },
      agreeToAll: {
        en: 'Text',
      },
      save: {
        en: 'Text',
      },
      textVendors: {
        en: 'Text'
      },
      subTextVendors: {
        en: 'Text'
      }
    },
    information: {
      enable: true,
      content: {
        text: {
          en: 'Text',
        },
        learnMore: {
          en: 'Text',
        },
        agreeAndClose: {
          en: 'Text',
        }
      }
    }
  },
  theme: {
    color: '#3F51B5', // Principal color used by the SDK
    linkColor: '#3F51B5', // Color used for the links in the notice/popup
    font: 'Arial', // Font used by the SDK
    buttons: {
      regularButtons: { // Learn more/disagree/disagree to all buttons.
        backgroundColor: '#eeeeee',
        textColor: '#999999',
        borderColor: 'rgba(34, 34, 34, 0.2)',
        borderWidth: '1px',
        borderRadius: '0px',
      },
      highlightButtons: { // Agree/save/agree to all buttons.
        backgroundColor: 'rgb(194, 39, 45)',
        textColor: '#ffffff',
        borderColor: 'rgba(194, 39, 45, 0.3)',
        borderWidth: '1px',
        borderRadius: '0px',
      }
    }
  },
  tagManager: {
    provider: 'gtm'
  },
  integrations: {
    vendors: { // Setup the integration with Google (ask Didomi to share consent with Google tags)
      google: {
        enable: true,
        eprivacy: true
      }
    },
    refreshOnConsent: true // by default, ads are reloaded after consent is given
  }

示例

import React, { Component } from 'react'

import { DidomiSDK } from '@didomi/react'

/**
 * This is the configuration object that will set the Didomi SDK
 */
const didomiConfig = {  
  app: {
    name: 'Didomi',
    apiKey: 'API_KEY',
    vendors: {
      iab: {
        all: true,
        version: 2
      }
    }
  },
  notice: {
    position: 'bottom'
  },
  languages: {
    enabled: ['fr', 'en', 'es'],
    default: 'fr'
  }
}


class DidomiDemo extends Component {

  constructor(props) {
    super(props);
    this.didomiObject = {};
  }

  /**
   * Called once we have the callback from the SDK informing that Didoni is loaded and ready
   */
  onDidomiReady(didomi) {
    this.didomiObject = didomi;

    console.log('Didomi Ready - Is the consent required ? : ', this.didomiObject.isConsentRequired());
    console.log('Didomi Ready - Do we have the consent for the vendor IAB 1 : ', this.didomiObject.getUserConsentStatusForVendor(1));
    console.log('Didomi Ready - Do we have the consent for the vendor IAB 1 and the purpose cookies : ', this.didomiObject.getUserConsentStatus('cookies', 1));

  }

  /**
   * Called everytime the consent changes
   */
  consentHasChanged(cwtToken) {
    console.log('Didomi Consent Changed - cwtToken : ', cwtToken);
    console.log('Didomi Consent Changed - Is the consent required ? : ', this.didomiObject.isConsentRequired());
    console.log('Didomi Consent Changed - Do we have the consent for the vendor IAB 1 : ', this.didomiObject.getUserConsentStatusForVendor(1));
    console.log('Didomi Consent Changed - Do we have the consent for the vendor IAB 1 and the purpose cookies : ', this.didomiObject.getUserConsentStatus('cookies', 1));
  }

  render() {
    return <div>
      <h1>Didomi React Demo</h1>
      <DidomiSDK
        config={didomiConfig}
        gdprAppliesGlobally={true}
        onReady={this.onDidomiReady.bind(this)}
        onConsentChanged={this.consentHasChanged.bind(this)}
      />
      <button onClick={() => this.didomiObject.setUserAgreeToAll()}>Set Agree to All</button>
    </div>
  }
}

自定义通知

您可以使用自己的自定义通知来替换标准的Didomi SDK通知(banner或弹出). 此选项保留一些本土行为,如通知的位置,背景(用于弹出通知)或逻辑来决定何时显示通知.

将您的 HTML 设置在 notice.content.html 键 config 道具 :

自定义通知中的响应组件

如果您想要保留React的所有优点,您可以调用我们的回调函数,该函数返回通知的 HTML 元素,并在其中使自己的React 组件:

import { render } from 'react-dom'

class NoticeHTML extends Component {
openPreferences() {
  Didomi.preferences.show()
}

render() {
  const noticeStyle = {
    color: 'red'
  }

  return (
    <div style={noticeStyle}>
      <span>Custom Notice HTML. <a onClick={this.openPreferences.bind(this)}>Open Preferences</a></span>
      {
        this.props.shouldDisplayMoreText &&
        <p>More Text</p>
      }
    </div>
  )
}
}

const didomiConfig = {
app: {
  apiKey: '<Your API key>',
  notice: {
    content: {
      html: {
        en: element => {
          render(<NoticeHTML shouldDisplayMoreText={false} />, element)
        }
      }
    }
  }
}
}

...

<DidomiSDK config={didomiConfig}/>

其他密钥在 notice.content 将被忽略.

自定义通知中的 HTML

您可以通过 HTML 进行所有工作 :

const didomiConfig = {
app: {
  apiKey: '<Your API key>',
  notice: {
    content: {
      html: {
        en: '<div>Custom Notice</div>'
      }
    }
  }
}
}

...

<DidomiSDK config={didomiConfig}/>

Didomi SDK 文档

见 文档

许可证

此插件为 根据BSD-3许可证发放。 。 。 .