<button class="button js-button-opt-out" id="button-3c75" data-google-analytics-property="UA-43049941-1" data-label-active="Tracking: aktiv" data-label-inactive="Tracking: inaktiv"></button>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.id = id || attr.id || `button-${randomString()}`;

  // Data
  if (property) attr['data-google-analytics-property'] = property;
  if (labels && labels.active) attr['data-label-active'] = labels.active;
  if (labels && labels.inactive) attr['data-label-inactive'] = labels.inactive; 

//- Render atom
button.button.js-button-opt-out&attributes(attr)
{
  "property": "UA-43049941-1",
  "labels": {
    "active": "Tracking: aktiv",
    "inactive": "Tracking: inaktiv"
  }
}
  • Content:
    export default class ButtonOptout {
      constructor($el) {
        this.$el = $el;
        this.gaProperty = this.$el.dataset.googleAnalyticsProperty;
        this.labelActive = this.$el.dataset.labelActive;
        this.labelInactive = this.$el.dataset.labelInactive;
        this.disabledKey = `ga-disable-${this.gaProperty}`;
    
        this.init();
      }
    
      init() {
        if (this.isDisabled()) {
          window[this.disabledKey] = true;
          this.showDisabledButton();
        } else {
          this.showEnabledButton();
        }
    
        this.$el.addEventListener('click', (event) => {
          event.preventDefault();
    
          if (this.isDisabled()) {
            this.enable();
            this.showEnabledButton();
          } else {
            this.disable();
            this.showDisabledButton();
          }
        });
      }
    
      showDisabledButton() {
        this.$el.innerText = this.labelInactive;
        this.$el.classList.remove('button--red');
      }
    
      showEnabledButton() {
        this.$el.innerText = this.labelActive;
        this.$el.classList.add('button--red');
      }
    
      enable() {
        document.cookie = `${this.disabledKey}=; expires=Thu, 01 Jan 1970 00:00:01 UTC; path=/;`;
        window[this.disabledKey] = undefined;
      }
    
      disable() {
        document.cookie = `${this.disabledKey}=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/;`;
        window[this.disabledKey] = true;
      }
    
      isDisabled() {
        return document.cookie.indexOf(`${this.disabledKey}=true`) > -1;
      }
    }
    
    // Initialize button with ga opt out
    document
      .querySelectorAll('.js-button-opt-out')
      .forEach($el => new ButtonOptout($el));
    
  • URL: /components/raw/button-optout/button-optout.js
  • Filesystem Path: src/components/atoms/button-optout/button-optout.js
  • Size: 1.5 KB

There are no notes for this item.