Segment Consent Manager in Sage9

segment-consent-analytics.blade.php

{{-- inEU() needs to be added with yarn add @segment/in-eu --save  --}}
{{-- needs to be imported in common.js -> import inEU from '@segment/in-eu';  --}}
{{-- and needs to be declared as a global in common.js -> window.inEU = inEU();  --}}

<div id="consent-manager"></div>
<script type="text/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: '<Your Segment Write Key>',
            /* initialPreferences allows for customizing which categories already pre-loaded */
            initialPreferences: {
                marketingAndAnalytics: true,
                // functional: true will automatically record consent for functional cookies
                functional: true,
                advertising: true,
            },
            /*
                The consent manager ships with a lightweight version of 
                React (preact) that you can use to customize the consent manager further
            */
            shouldRequireConsent: window.inEU,
            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>
{{--   
  <button type="button" onclick="event.stopPropagation();
  window.consentManager.openConsentManager()">
      Data Collection and Cookie Preferences
  </button>
   --}}
  <script src="https://unpkg.com/@segment/consent-manager@5.4.0/standalone/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", "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 = "J9dFCkRIMAuYnMR0F3yKAsVOg55ezGbA";;
                  analytics.SNIPPET_VERSION = "4.15.3";
                  //analytics.load("J9dFCkRIMAuYnMR0F3yKAsVOg55ezGbA");
                  analytics.page('{!! get_the_title() !!}', {
                    'enviroment': '{{ get_field('analytics_enviroment','option') }}',
                    'os_type': 'web',                        
                });
              }
      }();
  </script>