Consent Manager Banner not rendered using standalone version

I'm trying to put the consent manager inside my Webflow playground space here.

I've put the standalone example snippet exactly 1-to-1 inside my body tag -- and added an analytics.track() call at the end just to double check my implementation.

You will find the following snippet inside the Webflow page -- which is identical from the Storybook example:

<!-- Consent Manager Code Start Here -->
<script type="application/javascript">
      window.consentManagerConfig = function(exports) {
        exports.preferences.onPreferencesSaved(function(prefs) {
          console.log("preferences saved!");
        })

        return {
          container: '#consent-manager',
          writeKey: 'xxx',
          initialPreferences: {
            marketingAndAnalytics: false,
            advertising: true,
            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.'
        }
      }
    </script>

    <div id="consent-manager"></div>

    <button
      type="button"
      onclick="event.stopPropagation(); window.consentManager.openConsentManager()"
    >
      Data Collection and Cookie Preferences
    </button>

    <!-- Setup the Segment Consent Manager tag -->
    <script src="https://unpkg.com/@segment/consent-manager@5.3.0/standalone/consent-manager.js" defer></script>

    <!-- Load analytics.js -->
    <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()
          }
      })()
     analytics.track("Sample Event");
    </script>

Two issues happened:

The Preact-based banner didn't render (it doesn't event rendered inside the consent-manager div tag)
Both the page() and track() call did not picked up inside Segment, even though all the tracking preferences settings has been saved to "yes".

Any idea why this happened?

Hi @davisdevhaus thank you for your report, we start looking into this.

Hi @davisdevhaus I found something on your code, are you include something hidden on your banner class? Captura de pantalla_20230214_055142

or now do you have a new issue?

For question 2, once the preferences are saved, you will receive the events inside the Segment

Hi @edsonjab thank you for the response.

The <div id="consent-manager-banner"> currently has nothing to do with the Consent Manager, since I don't tie it with the code snippet yet (see the code snippet I've sent earlier, it's #consent-manager instead of #consent-manager-banner). #consent-manager-banner was made because #consent-manager didn't work.

According to the docs, there should've been a pre-made Preact banner that should shown like this one: https://segmentio.github.io/consent-manager/?path=/story/standalone-tag--basic

But weirdly my project did not render anything:

For the second issue: there should be an analytics.track("Sample Event") and an analytics.page() call triggered when you visited the page. Currently, Segment didn't catch anything since last week (before I implemented the consent manager library)

Hi @davisdevhaus I copied your code and the banner is displayed, you can try updating the version to 5.7.0, for me works with 5.3.0 but you can try with that version.

<!-- Consent Manager Code Start Here -->
<script type="application/javascript">
      window.consentManagerConfig = function(exports) {
        exports.preferences.onPreferencesSaved(function(prefs) {
          console.log("preferences saved!");
        })

        return {
          container: '#consent-manager',
          writeKey: 'xxx',
          initialPreferences: {
            marketingAndAnalytics: false,
            advertising: true,
            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.'
        }
      }
    </script>

    <div id="consent-manager"></div>

    <button
      type="button"
      onclick="event.stopPropagation(); window.consentManager.openConsentManager()"
    >
      Data Collection and Cookie Preferences
    </button>

    <!-- Setup the Segment Consent Manager tag -->
  <script src="https://unpkg.com/@segment/consent-manager@5.3.0/standalone/consent-manager.js" defer></script>

    <!-- Load analytics.js -->
    <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()
          }
      })()
     analytics.track("Sample Event");
    </script>

Hello @edsonjab! I've found the issue. So the problem lies within the writeKey included. Using my own writeKey, the banner does not show; but using the writeKey included in Storybook actually makes the banner renders.

Reason is last week, I haven't put any destinations inside Segment -- I know this is a rookie mistake but I also feel the docs should state that you need an active destination inside Segment in order for the banner to actually renders. I ended up adding a GA4 Destination and my banner is now renders.

Thank you for the assistance @edsonjab! I will close this issue.

segmentio / consent-manager

Consent Manager Banner not rendered using standalone version #305