GDPR Compliant Cookie Consent Banner In JavaScript – GlowCookies

Category: Javascript , Recommended | May 10, 2022
Author:manucaralmo
Views Total:no views
Official Page:Go to website
Last Update:May 10, 2022
License:MIT

Preview:

GDPR Compliant Cookie Consent Banner In JavaScript – GlowCookies

Description:

GlowCookies is a plain JavaScript library that displays a customizable, GDPR compliant cookie consent banner and automatically blocks third-party tracking codes (like Google Analytics, Facebook Pixel, etc) if the user rejects cookies.

How to use it:

1. Download the package and place the cookiesGlow.js library at the end of the document.

<link rel="stylesheet" href="/path/to/src/glowCookies.css" />
<script src="/path/to/src/glowCookies.js"></script>

2. Insert your own tracking codes or scripts as follows. The library currently supports Google Analytics, Facebook Pixel, and Hotjar. The first parameter is used to determine the language you wish to use. Available languages: ‘en’, ‘es’, ‘de’, ‘fr’, ‘th’, ‘sk’, or ‘pt_BR’.

glowCookies.start('en', { 
  analytics: 'G-XXX', 
  facebookPixel: 'XXX',
  HotjarTrackingCode: 'xxx',
  customScript: [{ type: 'custom', position: 'body', content: 'console.log('custom script');' }],
  // or 
  customScript: [{ type: 'src', position: 'head', content: 'https://www.googletagmanager.com/gtag/js?id=G-FH87DE17XF' }]
});

3. Specify the path to your own policy page. That’s it.

glowCookies.start('en', { 
  policyLink: 'https://cssscript.com/privacy-policy/'
});

4. Customize the appearance of the cookie consent banner.

glowCookies.start('en', { 
  style: 1, // 1, 2, 3
  hideAfterClick: true,
  border: 'none', // or 'border'
  position: 'right', // or 'left'
  bannerDescription: 'banner desc',
  bannerLinkText: 'banner link text',
  bannerBackground: '#000',
  bannerColor: '#fafafa',
  bannerHeading: '<h2>Cookies</h2>',
  acceptBtnText: 'accept btn text',
  acceptBtnColor: 'green',
  acceptBtnBackground: 'red',
  rejectBtnText: 'reject btn text',
  rejectBtnBackground: 'lightblue',
  rejectBtnColor: 'blue',
  manageColor: 'white',
  manageBackground: 'blue',
  manageText: 'cookies text'
});

Changelog:

v3.1.8 (05/10/2022)

  • Added Catalan Language

v3.1.7 (04/05/2022)

  • Added Ukrainian translation
  • Added Chinese Simple

v3.1.6 (12/16/2021)

  • Added support for Chinese Traditional

v3.1.5 (12/07/2021)

  • Added support for Russian language

v3.1.4 (11/24/2021)

  • Added support for Norwegian, Swedish & Danish

v3.1.3 (07/07/2021)

  • Added Japanese (ja)

v3.1.2 (06/06/2021)

  • Added Brazilian portuguese

v3.1.0 (01/31/2021)

  • 2 new banner designs
  • Banner animation
  • Languages support
  • Responsive fixes
  • Refactored js & css code

v3.0.1 (01/31/2021)

  • small correction

v3.0.0 (01/31/2021)

  • All new Refactored code
  • New: CSS hover states
  • New: custom scripts

v2.0.4 (01/19/2021)

  • Add GA IP anonymization

v2.0.3 (12/16/2020)

  • Bugfixes and improvements.

v2.0.2 (12/12/2020)

  • add hideAfterClick – Button disappearing after user decides

v2.0.1 (12/05/2020)

  • Minor bug fixes

v2.0.0 (12/05/2020)

  • Bug fixes
  • Refactorized Code
  • localStorage for cookie preferences
  • storage:none for Google Analytics when audience hits the dismiss button
  • Delete GA and/or Facebook cookies if audience accept the cookies but later decide to reject them

v1.7.1 (10/24/2020)

  • Code improvements and bug fixes

You Might Be Interested In:


One thought on “GDPR Compliant Cookie Consent Banner In JavaScript – GlowCookies

  1. Marc Boilloux

    Hi, does the script work with last version of Google Analytics (GA 4) ?

    Thanks and best regards,
    MB

    Reply

Leave a Reply