frontpack / cookie-consent
Cookie consent bar
Installs: 8
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Language:JavaScript
Requires
- frontpack/lucy.js: ^0.1.3
README
Cookie consent bar
Installation
Download a latest package or use Composer:
composer require frontpack/cookie-consent
Usage
On begin of page:
window.dataLayer = window.dataLayer || []; window.gtag = window.gtag || function () { window.dataLayer.push(arguments); } const CookieConsent = new FrontpackCookieConsent('storageKey-cc', function (consent) { consent.setDefaults({functional: true}); const status = consent.getGCMValue('analytics'); gtag('consent', 'default', { analytics_storage: status, personalization_storage: status, ad_storage: status, ads_data_redaction: status === 'granted' ? 'false' : 'true', wait_for_update: 500 }); dataLayer.push({event: 'default_consent'}); dataLayer.push({event: 'consentSettingsUpdated'}); }, function (consent) { const status = consent.getGCMValue('analytics'); gtag('consent', 'update', { analytics_storage: status, personalization_storage: status, ad_storage: status, ads_data_redaction: status === 'granted' ? 'false' : 'true', wait_for_update: 500 }); dataLayer.push({event: 'consentSettingsUpdated'}); });
Cookie bar
HTML:
<div class="cookie-bar" role="dialog" aria-describedby="cookie-bar__description"> <div class="cookie-bar__description" id="cookie-bar__description"> Description <a href="/privacy">Link</a> </div> <div class="cookie-bar__category cookie-bar__category--disabled"> <label for="cookie-bar__category--functional"> <div class="cookie-bar__checkbox"> <input id="cookie-bar__category--functional" tabindex="0" data-cookie-bar-category="functional" checked disabled type="checkbox" value="1"> <span class="cookie-bar__checkbox-round"></span> </div> <span class="cookie-bar__category-label">Functional</span> </label> </div> <div class="cookie-bar__category"> <label for="cookie-bar__category--analytics"> <div class="cookie-bar__checkbox"> <input id="cookie-bar__category--analytics" tabindex="0" data-cookie-bar-category="analytics" type="checkbox" value="0"> <span class="cookie-bar__checkbox-round"></span> </div> <span class="cookie-bar__category-label">Analytics</span> </label> </div> <div class="cookie-bar__buttons"> <button class="cookie-bar__button cookie-bar__button--accept">Accept</button> <button class="cookie-bar__button cookie-bar__button--dismiss">Dismiss</button> <button class="cookie-bar__button cookie-bar__button--settings">Settings</button> <button class="cookie-bar__button cookie-bar__button--save">Save</button> </div> </div>
JS (in page footer):
const bem = new LucyBem(document); const cookieBar = new FrontpackCookieBar(bem, cookieConsent); cookieBar.tryOpen();
License: New BSD License
Author: Jan Pecha, https://www.janpecha.cz/