minsky-kit/js/components/VCookieConsent.js

Kit of components for MINSKY web agency

// imports
import Component from './Component';
import * as CookieConsent from 'vanilla-cookieconsent';
import '@orestbida/iframemanager';
import { _merge } from '../utils/lodash';

// private statics
const CAT_NECESSARY = 'functional';
const CAT_ANALYTICS = 'analytics';
const CAT_SOCIAL = 'social';

const SERVICE_AD_STORAGE = 'ad_storage';
const SERVICE_AD_USER_DATA = 'ad_user_data';
const SERVICE_AD_PERSONALIZATION = 'ad_personalization';
const SERVICE_ANALYTICS_STORAGE = 'analytics_storage';

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}

// class definition
export default class VCookieConsent extends Component {
  // constructor
  constructor(args = {}, objectName = 'VCookieConsent') {
    args.debug = args.debug || true;

    // super
    super(args, objectName);
    this._args = args;
    this.manager = CookieConsent;
    this._im = iframemanager();
    this._$triggers = document.querySelectorAll(args.trigger);

    if (this._$triggers.length) {
      this._$triggers.forEach(($ck) => {
        $ck.addEventListener('click', (e) => {
          e.preventDefault();
          this.manager.showPreferences();
        });
      });
    }
  }

  setConfig(config) {
    this._args.config = _merge(this._args.config, config);
  }

  init() {
    // Set default consent to 'denied' (this should happen before changing any other dataLayer)
    gtag('consent', 'default', {
      [SERVICE_AD_STORAGE]: 'denied',
      [SERVICE_AD_USER_DATA]: 'denied',
      [SERVICE_AD_PERSONALIZATION]: 'denied',
      [SERVICE_ANALYTICS_STORAGE]: 'denied',
    });

    this.manager.run(
      _merge(this._args.config, {
        onConsent: ({ cookie }) => {
          this.updateGtagConsent();

          this.dispatch('onConsent', { cookie });
        },
        onChange: ({ cookie, changedCategories }) => {
          this.updateGtagConsent();

          this.dispatch('onChange', { cookie, changedCategories });
        },
        categories: {
          [CAT_NECESSARY]: {
            enabled: true, // this category is enabled by default
            readOnly: true, // this category cannot be disabled
          },
          [CAT_ANALYTICS]: {
            readOnly: false,
            autoClear: {
              cookies: [
                {
                  name: /^(_ga)/,
                },
                {
                  name: '_gid',
                },
              ],
            },
          },
          [CAT_SOCIAL]: {
            services: {
              youtube: {
                label: 'Youtube Embed',
                onAccept: () => this._im.acceptService('youtube'),
                onReject: () => this._im.rejectService('youtube'),
              },
            },
          },
        },
      })
    );

    this._im.run({
      currLang: 'en',
      onChange: ({ changedServices, eventSource }) => {
        if (eventSource.type === 'click') {
          const servicesToAccept = [...this.manager.getUserPreferences().acceptedServices.analytics, ...changedServices];

          this.manager.acceptService(servicesToAccept, 'social');
        }
      },
      services: {
        youtube: {
          embedUrl: '{data-id}',
          languages: {
            en: {
              notice: Drupal.t('cookies.declined-consent.text'),
              loadBtn: Drupal.t('cookies.declined-consent.once'), // Load only current iframe
              loadAllBtn: Drupal.t('cookies.declined-consent.always'), // Load all iframes configured with this service + set cookie
            },
          },
        },
      },
    });
  }

  /**
   * Update gtag consent according to the users choices made in CookieConsent UI
   */
  updateGtagConsent() {
    // IMPORTANT: Trigger this event before calling gtag().
    // If gtag() is called first, the consent node will not be triggered correctly.
    window.dataLayer.push({
      event: `cookieConsent-update`,
    });

    gtag('consent', 'update', {
      [SERVICE_ANALYTICS_STORAGE]: this.manager.acceptedCategory(CAT_ANALYTICS) ? 'granted' : 'denied',
      [SERVICE_AD_STORAGE]: this.manager.acceptedCategory(CAT_ANALYTICS) ? 'granted' : 'denied',
      [SERVICE_AD_USER_DATA]: this.manager.acceptedCategory(CAT_ANALYTICS) ? 'granted' : 'denied',
      [SERVICE_AD_PERSONALIZATION]: this.manager.acceptedCategory(CAT_ANALYTICS) ? 'granted' : 'denied',
    });
  }

  // methods

  destroy() {
    super.destroy();
  }

  // getters & setters
}

// Utils

// Event handlers