Question: multiple categories for the same service?

[schmitch]

Hello is there a guide how to integrate something like the example page with google tag manager where I have one script tag but multiple categories?

i.e. does this work:

    // List all the categories you want to display.
    categories: {
      analytics: {
        needed: false,
        wanted: false,
        checked: true,
        language: {
          locale: {
            de: {
              name: 'User Tracking',
              description: '',
            }
          }
        }
      },
      marketing: {
        needed: false,
        wanted: false,
        checked: true,
        language: {
          locale: {
            de: {
              name: 'Marketing',
              description:
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            },
          },
        },
      },
    },
    consentModeControls: {
      ad_storage: 'marketing',
      ad_user_data: 'marketing',
      ad_personalization: 'marketing',
      analytics_storage: 'analytics'
    },
    // List actual services here.
    services: {
      // Unique name.
      analytics: {
        category: 'analytics',
        type: 'dynamic-script',
        search: 'analytics',
        language: {
          locale: {
            de: {
              name: 'Google Analytics'
            }
          }
        }
      },
      marketing: {
        category: 'marketing',
        type: 'dynamic-script',
        search: 'marketing',
        language: {
          locale: {
            de: {
              name: 'Google Ads'
            }
          }
        }
      }
    },
    // whether consent mode updates will be handled by gtag or via custom GTM template. The value by default is null. Can have 'gtag' or 'gtm-template' values.
    consentModeHandler: 'gtm-template'

and will it block the script tag only if one of them has no consent?

In the example Page it is always script however I do not want to load googletagmanager by default, only if either category is set. something like: https://github.com/brainsum/cookieconsent/blob/master/docs/index.html#L183 just with the following script tag:

<script type="text/plain" data-consent="googletagmanager"> <!-- no matter what I put into data-consent -->
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      const defaultSettings = {
        ad_storage: 'denied',
        ad_user_data: 'denied',
        ad_personalization: 'denied',
        analytics_storage: 'denied',
      };
      if (localStorage.getItem('consentMode') === null) {
        gtag('consent', 'default', defaultSettings);
      } else {
        gtag('consent', 'default', {
          ...defaultSettings,
          ...JSON.parse(localStorage.getItem('consentMode')),
        });
      }
      (function (w, d, s, l, i) {
        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-ID');
    </script>

whats even more wierd, that the script will only fire if "all" consent is given?

Edit: it looks like the save button does not work, when wanted defaults to false, I need to click multiple times........

[schmitch]

I also found another problem that if I press "Accept All" gtm correclty works when using consentModeHandler: 'gtag' however when putting it behind a category and going into the settings and only activate a single option it won't set the consent of gtag correctly.

what works is to always run:

<script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      const defaultSettings = {
        ad_storage: 'denied',
        ad_user_data: 'denied',
        ad_personalization: 'denied',
        analytics_storage: 'denied',
      };
      if (localStorage.getItem('consentMode') === null) {
        gtag('consent', 'default', defaultSettings);
      } else {
        gtag('consent', 'default', {
          ...defaultSettings,
          ...JSON.parse(localStorage.getItem('consentMode')),
        });
      }
      </script>

and put:

      (function (w, d, s, l, i) {
        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-ID');

into its own script block.

I created a fork where I actually add the support for multiple categories in a dirty way: https://github.com/brainsum/cookieconsent/compare/master...envisia:cookieconsent:schmitch/fixed-cookie-consent

and also fixed the save dialog (which I can probably provide a fix if needed?)