cookieconsent/cookieconsent.js at main · script-php/cookieconsent · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/*
    Overview: Consent mode parameters

    Setting Name            Used by Google    Description
    ad_storage              Yes               Enables storage (such as cookies) related to advertising
    analytics_storage       Yes               Enables storage (such as cookies) related to analytics e.g. visit duration
    ad_user_data            Yes               Whether Google’s services can use user data for building advertising audiences
    ad_personalization      Yes               Whether Google’s services can use the data for remarketing
    functionality_storage   No                Enables storage that supports the functionality of the website or app e.g. language settings
    personalization_storage No                Enables storage related to personalization e.g. video recommendations
    security_storage        No                Enables storage related to security such as authentication functionality, fraud prevention, and other user protection
*/
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }

if (localStorage.getItem('consentMode') === null) {
  gtag('consent', 'default', {
    'functionality_storage': 'denied',
    'security_storage': 'denied',
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'personalization_storage': 'denied',
    'wait_for_update': 500,
  });
} else {
  gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
}

window.onload = function() {
  const cookie_consent_banner_dom = `
    <div id="cookie-consent-banner" class="cookie-consent-banner">
        <h3>This website uses cookies</h3>
        <p>We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.</p>
        <div class="cookie-consent-options">
          <label><input id="consent-necessary" type="checkbox" value="Necessary" checked disabled>Necessary</label>
          <label><input id="consent-analytics" type="checkbox" value="Analytics" checked>Analytics</label>
          <label><input id="consent-marketing" type="checkbox" value="Marketing" checked>Marketing</label>
          <label><input id="consent-preferences" type="checkbox" value="Preferences" checked>Preferences</label>
          <label><input id="consent-partners" type="checkbox" value="Partners">Partners</label>
        </div>
        <div class="cookie-consent-buttons">
          <button id="cookie-consent-btn-reject-all" class="cookie-consent-button btn-grayscale">Reject All</button>
          <button id="cookie-consent-btn-accept-some" class="cookie-consent-button btn-outline">Accept Selection</button>
          <button id="cookie-consent-btn-accept-all" class="cookie-consent-button btn-success">Accept All</button>
        </div>
    </div>
  `

  document.body.insertAdjacentHTML('beforeend', cookie_consent_banner_dom)
  const cookie_consent_banner = document.body.lastElementChild

  function dnt () {
    return (navigator.doNotTrack == "1" || window.doNotTrack == "1")
  }

  function gpc () {
    return (navigator.globalPrivacyControl || window.globalPrivacyControl)
  }

  function showBanner() {
    const cm = JSON.parse(window.localStorage.getItem('consentMode'))
    if (cm && cm.functionality_storage) {
      if (cm.functionality_storage == 'granted') {
        document.querySelector('#consent-necessary').checked = true
        document.querySelector('#consent-necessary').disabled = true
      } else {
        document.querySelector('#consent-necessary').checked = false
        document.querySelector('#consent-necessary').disabled = false
      }
      document.querySelector('#consent-analytics').checked = (cm.analytics_storage == 'granted') ? true : false
      document.querySelector('#consent-preferences').checked = (cm.ad_personalization == 'granted') ? true : false
      document.querySelector('#consent-marketing').checked = (cm.ad_storage == 'granted') ? true : false
      document.querySelector('#consent-partners').checked = (cm.ad_personalization == 'granted') ? true : false
    }
    cookie_consent_banner.style.display = 'flex';
  }

  function hideBanner() {
    cookie_consent_banner.style.display = 'none';
  }

  window.cookieconsent = {
    show: showBanner,
    hide: hideBanner
  }

  function setConsent(consent) {
    const consentMode = {
      'ad_storage': (consent.marketing && !dnt()) ? 'granted' : 'denied',
      'analytics_storage': (consent.analytics && !dnt()) ? 'granted' : 'denied',
      'ad_user_data': (consent.marketing && !dnt()) ? 'granted' : 'denied',
      'ad_personalization': (consent.partners && !gpc()) ? 'granted' : 'denied',
      'functionality_storage': consent.necessary ? 'granted' : 'denied',
      'personalization_storage': consent.preferences ? 'granted' : 'denied',
      'security_storage': consent.necessary ? 'granted' : 'denied',
    };
    window.cookieconsent.consentMode = consentMode
    gtag('consent', 'update', consentMode);
    localStorage.setItem('consentMode', JSON.stringify(consentMode));
  }

  if (cookie_consent_banner) {
    Array.from(document.querySelectorAll('.cookie-consent-banner-open')).map(btn => {
      btn.addEventListener('click', () => {
        showBanner()
      })
    })

    if (window.localStorage.getItem('consentMode')) {
      hideBanner()
    } else {
      showBanner()
    }

    cookie_consent_banner.querySelector('#cookie-consent-btn-accept-all').addEventListener('click', () => {
      setConsent({
        necessary: true,
        analytics: true,
        preferences: true,
        marketing: true,
        partners: true
      });
      hideBanner();
    });
    cookie_consent_banner.querySelector('#cookie-consent-btn-accept-some').addEventListener('click', () => {
      setConsent({
        necessary: true,
        analytics: document.querySelector('#consent-analytics').checked,
        preferences: document.querySelector('#consent-preferences').checked,
        marketing: document.querySelector('#consent-marketing').checked,
        partners: document.querySelector('#consent-partners').checked
      });
      hideBanner();
    });
    cookie_consent_banner.querySelector('#cookie-consent-btn-reject-all').addEventListener('click', () => {
      setConsent({
        necessary: true,
        analytics: false,
        preferences: false,
        marketing: false,
        partners: false
      });
      hideBanner();
    });
  }
}