<head>
<!-- This should be included before the Hightouch snippet -->
<script
src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
type="text/javascript"
charset="UTF-8"
data-domain-script="0000-0000-000-test"
></script>
</head>
- Debugging: this library expects the OneTrust Banner SDK to be available in order interact with OneTrust. This library derives the group IDs that are active for the current user from the
window.OneTrustActiveGroupsobject provided by the OneTrust SDK. Read this for more information.
- Install the package
# npm
npm install @ht-sdks/events-sdk-js-consent-wrapper-onetrust
# yarn
yarn add @ht-sdks/events-sdk-js-consent-wrapper-onetrust
# pnpm
pnpm add @ht-sdks/events-sdk-js-consent-wrapper-onetrust- Initialize with
HtEventsBrowser
import { withOneTrust } from '@ht-sdks/events-sdk-js-consent-wrapper-onetrust'
import { HtEventsBrowser } from '@ht-sdks/events-sdk-js-browser'
export const htevents = new HtEventsBrowser()
withOneTrust(htevents).load({ writeKey: 'WRITE_KEY' })- In your head
<head>
<!-- OneTrust -->
<script
src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
type="text/javascript"
charset="UTF-8"
data-domain-script="YOUR-DOMAIN-SCRIPT-ID"
></script>
<!-- OneTrust Consent Wrapper -->
<script src="https://unpkg.com/@ht-sdks/events-sdk-js-consent-wrapper-onetrust@latest/dist/umd/htevents-onetrust.umd.js"></script>
<!-- Hightouch SDK -->
<script type="text/javascript">
!function(){var e=window.htevents...
....
// replace `e.load('WRITE_KEY')` with `withOneTrust(e).load('WRITE_KEY')`
withOneTrust(e).load('WRITE_KEY')
....
</script>
</head>[!NOTE] You must replace
e.load(...)in the original Hightouch SDK snippet withwithOneTrust(e).load(...)in order to integrate with OneTrust.
- We build three versions of the library:
-
cjs(CommonJS modules) - for npm library users -
esm(es6 modules) - for npm library users -
umd(bundle) - for snippet users (typically)
-
cjs/esm- Support modern JS syntax (ES2020). These are our npm library users, so we expect them to transpile this module themselves using something like babel/webpack if they need extra legacy browser support. -
umd- Support back to IE11, but do not polyfill . See our docs on supported browsers.
In order to get full ie11 support, you are expected to bring your own polyfills. e.g. adding the following to your script tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.7.0/polyfill.min.js"></script>or
<script src="https://polyfill.io/v3/polyfill.min.js?features=es5,es2015,es2016,es2017,es2018,es2019,es2020&flags=gated"></script>