segmentio / consent-manager

Drop-in consent management plugin for analytics.js
https://segmentio.github.io/consent-manager/
MIT License
341 stars 144 forks source link

Rendering empty div #196

Closed davichetebadger closed 3 years ago

davichetebadger commented 3 years ago

Hello everyone, I'm trying to show the banner with both the standalone script and the React way, and none of them works. This is the code I'm using (I just used the code examples):

<div id="target-container"></div>

    <!--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","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="YOUR_WRITE_KEY";analytics.SNIPPET_VERSION="4.15.2";
  //analytics.load("YOUR_WRITE_KEY");
  analytics.page();
  }}();
</script>

<script>
  window.consentManagerConfig = function (exports) {
    return {
      //Need to update with the container where you want Consent Manager to load
      container: "#target-container",
      //Need to update with you
      writeKey: "HERE I USE MY KEY",
      bannerContent:
        "Consent manager is awesome! We use cookies (and other similar technologies) to collect data to improve your experience on our site. Also, Segment is Awesome",
      bannerSubContent: "You can change your preferences at any time.",
      preferencesDialogTitle: "Website Data Collection Preferences",
      preferencesDialogContent:
        "We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.",
      cancelDialogTitle: "Are you sure you want to cancel?",
      cancelDialogContent:
        "Your preferences have not been saved. By continuing to use our website, you are agreeing to our Website Data Collection Policy",
      closeBehavior: "accept",
    };
  };
</script>
<!--script that loads Prebuilt Consent Manager UI via Preact-->
<script src="https://unpkg.com/@segment/consent-manager@5.3.0/standalone/consent-manager.js"></script>

Is there anything I'm missing? Shouldn't this work out of the box? Thanks in advance.

helloanil commented 2 years ago

Hey @davichetebadger, this issue is happening for me when I implement the Consent Manager on our Webflow page. Did you manage to solve the issue before closing? If so, can I kindly ask you how?

vjsingh commented 2 years ago

@helloanil @davichetebadger I'm also running into this on Webflow, any ideas or solutions?