Hightouch Events offers the Consent Manager UI for managing user consent and tracking preferences. Users can opt in/out of specific categories of data collection, and those preferences are synced to your configured destinations.
Prerequisites
In order to use Consent Manager UI, you must use the Browser (Javascript) SDK snippet on your site.
Note: e.load('WRITE_KEY')
is removed from the snippet since the Consent Manager will load the Browser SDK for you.
<!-- Hightouch Events Browser SDK snippet -->
<script type="text/javascript">
!function(){var e=window.htevents=window.htevents||[];if(!e.initialize)if(e.invoked)window.console&&console.error&&console.error("Hightouch snippet included twice.");else{e.invoked=!0,e.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"],e.factory=function(t){return function(){var n=Array.prototype.slice.call(arguments);return n.unshift(t),e.push(n),e}};for(var t=0;t<e.methods.length;t++){var n=e.methods[t];e[n]=e.factory(n)}e.load=function(t,n){var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src="https://cdn.hightouch-events.com/browser/release/v1-latest/events.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(o,r),e._loadOptions=n,e._writeKey=t},e.SNIPPET_VERSION="0.0.1",
e.page()}}();
</script>
Installation
The Consent Manager is available via NPM. It can be installed on any site using a <script>
tag, we also offer React support.
<!-- Hightouch Consent Manager configuration -->
<script>
window.consentManagerConfig = function(exports) {
return {
container: '#consent-manager',
writeKey: 'WRITE_KEY',
shouldRequireConsent: exports.inEU // optional: require consent only for EU users
}
}
</script>
<!-- Hightouch Consent Manager JS -->
<script
src="https://unpkg.com/@ht-sdks/consent-manager@0.0.1/standalone/consent-manager.js"
defer
></script>
import React from 'react'
import { ConsentManager, openConsentManager } from '@ht-sdks/consent-manager'
export default function App() {
return (
<div>
<ConsentManager writeKey="WRITE_KEY" />
<button type="button" onClick={openConsentManager}>
Website Data Collection Preferences
</button>
</div>
)
}
API
For a full list of features and options, see the README.