The preferencesDialogTemplate doesn't work as expected #356

maracht-nn · 2023-11-09T10:21:11Z

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:

          preferencesDialogTemplate: {
            headings: {
              allowValue: 'AllowCustom',
              categoryValue: 'CategoryCustom',
              purposeValue: 'PurposeCustom',
              toolsValue: 'ToolsCustom',
            },
          },

Current result:

The headings still using the default value

Expected result:

The value of the headings are changed per provided values

Below is the relevant code snippet for reference:

<!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>

The text was updated successfully, but these errors were encountered:

bencehusi · 2023-11-21T14:51:34Z

👀
Have the same problem. Did you find a solution @maracht-nn ?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The preferencesDialogTemplate doesn't work as expected #356

The preferencesDialogTemplate doesn't work as expected #356

maracht-nn commented Nov 9, 2023 •

edited

Loading

bencehusi commented Nov 21, 2023

The preferencesDialogTemplate doesn't work as expected #356

The preferencesDialogTemplate doesn't work as expected #356

Comments

maracht-nn commented Nov 9, 2023 • edited Loading

Current result:

Expected result:

bencehusi commented Nov 21, 2023

maracht-nn commented Nov 9, 2023 •

edited

Loading