网站分析>> GlowCookies>> 返回
项目作者： manucaralmo

项目描述 ：
GlowCookies - Cookie Consent Banner In JavaScript for Google Analytics, Facebook Pixel & more
高级语言： JavaScript
项目地址: git://github.com/manucaralmo/GlowCookies.git
创建时间： 2020-10-03T14:31:01Z
项目社区：https://github.com/manucaralmo/GlowCookies
开源协议：GNU General Public License v3.0
下载


Badge-glow jsDelivr hits (GitHub) GitHub contributors GitHub Repo stars

GlowCookies 🍪 - Powerful Cookie Consent Banner In JavaScript

Simple and full automated cookies banner for any website. Complies with the new European regulations with GlowCookies. Activate and deactivate Google Analytics, Facebook Pixel, Hotjar (and coming soon) cookies whenever the user wishes, with just 1 click.

Foo

The cookies banner

How it works

You just have to install the code. When the user clicks on accept cookies, the google analytics tracking code, Facebook Pixel and/or Hotjar starts tracking. If the user rejects cookies, the tracking code will not start working.

How to use

Add this code to your html <head> or <body> tag.

  1. <script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.8/src/glowCookies.min.js"></script>
  2. <script>
  3.     glowCookies.start('en', {
  4.         style: 1,
  5.         analytics: 'G-FH87DE17XF',
  6.         facebookPixel: '990955817632355',
  7.         policyLink: 'https://link-to-your-policy.com'
  8.     });
  9. </script>

Banner styles

Now you can choose between these available banner styles:

  • Style 1, 2 or 3

Set style in config object glowCookies.start('en', { style: 3 })

Languages

Now you can choose between these available languages:

  • Afrikaans (af)
  • Brazilian portugese (pt_BR)
  • Bulgarian (bg)
  • Catalan (ca)
  • Chinese Simple (zh)
  • Chinese Traditional (zh_TW)
  • Danish (da)
  • Dutch (nl)
  • English (en)
  • French (fr)
  • German (de)
  • Italian (it)
  • Japanese (ja)
  • Malagasy (mg)
  • Norwegian (no)
  • Occitan (oc)
  • Polish (pl)
  • Russian (ru)
  • Slovak (sk)
  • Spanish (es)
  • Swedish (sv)
  • Thai (th)
  • Turkish (tr)
  • Ukrainian (uk)

Set language in the first parameter of glowCookies.start('en', { }) method.

Tracking options

These are the parameters that you can modify to add your tracking codes or custom scripts.

Parameter Type Values
analytics String Example: "G-FH87DE17XF" (Analytics tracking code)
facebookPixel String Example: "990955817632355" (Facebook Pixel code)
HotjarTrackingCode String Example: "990955817632355" (Hotjar tracking code)
customScript (Inline) Object Example: [{ type: 'custom', position: 'body', content: 'console.log('custom script');' }]
customScript (src) Object Example: [{ type: 'src', position: 'head', content: 'https://www.googletagmanager.com/gtag/js?id=G-FH87DE17XF' }]

Config Banner

These are the parameters that you can modify to change certain banner options

Parameter Type Values
policyLink String Example: "https://yourlink.com" (Your cookies policy link)
hideAfterClick Boolean (true or false) Default: true (Hide banner after Accept or Reject cookies)

Customize Banner

Now there are certain parameters that you can change to customize your banner.

Parameter Type Values
border String ("border" or "none") Default: "border"
position String ("left" or "right") Default: "left"
bannerDescription String Example: "We use our own and third-party cookies to personalize content and to analyze web traffic."
bannerLinkText String Example: "Read more about cookies"
bannerBackground String Example: "#FAFAFA" Example: "lightblue"
bannerColor String Example: "#000" Example: "blue"
bannerHeading String Example: "Use of cookies" Default: None
acceptBtnText String Example: "Accept cookies"
acceptBtnColor String Example: "#000" Example: "blue"
acceptBtnBackground String Example: "#fff" Example: "white"
rejectBtnText String Example: "Reject"
rejectBtnBackground String Example: "#000" Example: "blue"
rejectBtnColor String Example: "#fff" Example: "white"
manageColor String Example: "#fff" Example: "white"
manageBackground String Example: "#f2f2f2" Example: "blue"
manageText String Example: "Manage cookies"

Fully customized banner

  1. <script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.8/src/glowCookies.min.js"></script>
  2. <script>
  3.     glowCookies.start('en', {
  4.         style: 2,
  5.         analytics: 'G-FH87DE17XF',
  6.         facebookPixel: '990955817632355',
  7.         hideAfterClick: true,
  8.         border: 'none',
  9.         position: 'right',
  10.         policyLink: 'https://google.es',
  11.         customScript: [{ type: 'custom', position: 'body', content: `console.log('my custom js');` }],
  12.         bannerDescription: 'banner desc',
  13.         bannerLinkText: 'banner link text',
  14.         bannerBackground: '#000',
  15.         bannerColor: '#fafafa',
  16.         bannerHeading: '<h2>Cookies</h2>',
  17.         acceptBtnText: 'accept btn text',
  18.         acceptBtnColor: 'green',
  19.         acceptBtnBackground: 'red',
  20.         rejectBtnText: 'reject btn text',
  21.         rejectBtnBackground: 'lightblue',
  22.         rejectBtnColor: 'blue',
  23.         manageColor: 'white',
  24.         manageBackground: 'blue',
  25.         manageText: 'cookies text'
  26.     });
  27. </script>

Contribute

If you know any other language, please help translate.

  • Update the arrLang of the LanguageGC class in glowCookies.js (Add an entry in this fashion.)
  • Update language documentation in README.md
  • Create a pull request
    1. en: {
    2.   'bannerHeading': 'We use cookies',
    3.   'bannerDescription' : 'We use our own and third-party cookies to personalize content and to analyze web traffic.',
    4.   'bannerLinkText' : 'Read more about cookies',
    5.   'acceptBtnText' : 'Accept cookies',
    6.   'rejectBtnText' : 'Reject',
    7.   'manageText' : 'Manage cookies'
    8. }
    Thanks for your help! 🎉

Next steps

  • Advanced cookies management
  • Cookie settings

Request features

info@glowmedia.es