However, I encountered an issue while trying to customize the dialog template as described in the documentation here.
Other customizations, such as bannerBackgroundColor is working as expected.
preferencesDialogTemplate: {
headings: {
allowValue: 'AllowCustom',
categoryValue: 'CategoryCustom',
purposeValue: 'PurposeCustom',
toolsValue: 'ToolsCustom',
},
},
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ค้นหาไอเท็มในบ้าน | NocNoc</title>
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
<div id="consent-manager"></div>
<!-- Consent Manager Config -->
<script type="application/javascript">
window.consentManagerConfig = function (exports) {
exports.preferences.onPreferencesSaved(function (prefs) {
// could be used to store consent server side, or send it into an API
});
return {
container: '#consent-manager',
writeKey: '{Write key is omitted for showing snipping on Github}',
/* initialPreferences allows for customizing which categories already pre-loaded */
initialPreferences: {
// marketingAndAnalytics: false,
// functional: true will automatically record consent for functional cookies
// functional: true,
},
/*
The consent manager ships with a lightweight version of
React (preact) that you can use to customize the consent manager further
*/
bannerContent: exports.React.createElement('span', null, '🍪We like cookies 🍪'),
bannerSubContent: 'Change your preferences 👻',
preferencesDialogTitle: 'Website Data Collection',
preferencesDialogContent: 'We use data collected by cookies and JavaScript libraries.',
cancelDialogTitle: '🤔Are you sure you want to cancel?',
cancelDialogContent: 'Your preferences have not been saved.',
bannerBackgroundColor: 'red',
preferencesDialogTemplate: {
headings: {
allowValue: 'AllowCustom',
categoryValue: 'CategoryCustom',
purposeValue: 'PurposeCustom',
toolsValue: 'ToolsCustom',
},
},
};
};
</script>
<!-- Load analytics.js -->
<script src="./assets/js/consent-manager.js" defer></script>
<script>
!(function () {
var analytics = (window.analytics = window.analytics || []);
if (!analytics.initialize)
if (analytics.invoked)
window.console && console.error && console.error('Segment snippet included twice.');
else {
analytics.invoked = !0;
analytics.methods = [
'trackSubmit',
'trackClick',
'trackLink',
'trackForm',
'pageview',
'identify',
'reset',
'group',
'track',
'ready',
'alias',
'debug',
'page',
'once',
'off',
'on',
'addSourceMiddleware',
];
analytics.factory = function (t) {
return function () {
var e = Array.prototype.slice.call(arguments);
e.unshift(t);
analytics.push(e);
return analytics;
};
};
for (var t = 0; t < analytics.methods.length; t++) {
var e = analytics.methods[t];
analytics[e] = analytics.factory(e);
}
analytics.load = function (t, e) {
var n = document.createElement('script');
n.type = 'text/javascript';
n.async = !0;
n.src =
('https:' === document.location.protocol ? 'https://' : 'http://') +
'cdn.segment.com/analytics.js/v1/' +
t +
'/analytics.min.js';
var o = document.getElementsByTagName('script')[0];
o.parentNode.insertBefore(n, o);
analytics._loadOptions = e;
};
analytics.SNIPPET_VERSION = '4.1.0';
analytics.page();
}
})();
</script>
</body>
</html>
I'm integrating the stand-alone consent manager from Segment's Consent Manager into my project.
However, I encountered an issue while trying to customize the dialog template as described in the documentation here.
Other customizations, such as bannerBackgroundColor is working as expected.
The configuration provided:
Current result:
Expected result:
Below is the relevant code snippet for reference: