GDPR Compliant Cookie Consent Banner In JavaScript – GlowCookies

Category: Javascript , Recommended | November 24, 2021
Author:manucaralmo
Views Total:102 views
Official Page:Go to website
Last Update:November 24, 2021
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.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:


Leave a Reply