example-gdpr.html

<!doctype html>
<html dir="ltr" lang="en-US">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="style.css" rel="stylesheet">
    <link href="../build/cookieconsent.min.css" rel="stylesheet">
    <script src="../build/cookieconsent.min.js"></script>
    <!-- <script src="../src/bundle.js"></script> --> <!-- for dev testing-->
  </head>
<body>
  <div id="cc-revoke-choice" style="color: white; padding: 32px">Change my consent</div>
  
  <script>
    const CC = window.CookieConsent;
      const cc = new CC({
        // just some default styling
        "palette": {
          "popup": {
            "background": "black",
            "text": "white"
          },
          "button": {
            "background": "#f5d948"
          }
        },
        type: 'opt-in',
        consentSettingsElementId: 'cc-revoke-choice',
        layout: 'categories',
        showCategories: {
          [CC.UNCATEGORIZED]: false,
          [CC.ESSENTIAL]: true,
          [CC.PERSONALIZATION]: false,
          [CC.ANALYTICS]: true,
          [CC.MARKETING]: false
        },
        content: {
          privacyPolicyLink: '/privacy-policy',
          cookiePolicyLink: '/cookie-policy'
        },
        cookie: {
          domain: '[your domain here]',
          name: '[your cookie name if needed]',
        }
      });

      cc.on('initialized', function () {
        const { consents } = cc;

        if (consents[CC.ANALYTICS] === CC.ALLOW) {
          initializeGTM();
        }
      });

      cc.on('popupClosed', function () {
        const { consents } = cc;

        if (consents[CC.ANALYTICS] === CC.ALLOW) {
          initializeGTM();
        } else if (isGTMInitialized()) {
          uninitializeGTM();
        }
      });

      function isGTMInitialized() {
        return window.gtmInitialized;
      }

      function initializeGTM() {
        if (!isGTMInitialized()) {
          // window.dataLayer = window.dataLayer || [];
          // window.dataLayer.push({
          //   'gtm.start': new Date().getTime(),
          //   event: 'gtm.js'
          // });
          // var f = document.getElementsByTagName('script')[0];
          // var j = document.createElement('script');
          // j.async = true;
          // j.src =
          //   'https://www.googletagmanager.com/gtm.js?id=[ YOUR_GTM_CONTAINER_ID ]';
          // f.parentNode.insertBefore(j, f);
          window.gtmInitialized = true;
        }
      }

      function uninitializeGTM() {
        // remove cookies
        cc.deleteCookie('_ga');
        cc.deleteCookie('_gid');
        // cc.deleteCookie('_gat_YOUR_GOOGLE_ANALYTICS_TRACKING_ID');

        // reload page to get rid of GTM
        location.reload();
      }
    </script>
  </body>
</html>