GDPR and Cookie Consent Modal for Google Analytics - jQuery CookieKit

File Size: 8.01 KB
Views Total: 3304
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
GDPR and Cookie Consent Modal for Google Analytics - jQuery CookieKit

CookieKit is an easy-to-use jQuery plugin that displays a GDPR and Cookie consent modal when users first visit your site and dynamically inserts Google Analytics tag into the document when they accept the data collection policy.

More about GDPR:

How to use it:

1. Load the jquery.cookiekit.js JavaScript library after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.cookiekit.js"></script>

2. Initialize the CookieKit and insert your own Google Analytics Tracking ID. That's it.

$(document).cookieKit({
  id:'UA-XXXXXXXX-1'
});

3. Change the language of the GDPR and Cookie Consent Modal. Default: 'fr'.

$(document).cookieKit({
  id:'UA-XXXXXXXX-1',
  lang: 'en'
});

4. Customize the appearance of the GDPR and Cookie Consent Modal.

$(document).cookieKit({
  modal: {
    hrColor: '#b3b3b3',
    fontColor: '#3c3c3c',
    backgroundColor: '#e9e9e9'
  },
  button: {
    acceptColor: '#0a9919',
    acceptColorHover: '#076212',
    refuseColor: '#8a0a0a',
    refuseColorHover: '#550505',
  },
});

5. Insert your site information.

$(document).cookieKit({
  id:'UA-XXXXXXXX-1',
  website: {
    name: '',
    url: ''
  },
  logo: {
    url: '',
    width: '',
    align: 'left',
    margin: '0'
  },
});

6. Set the cookie name, path, and expiration date.

$(document).cookieKit({
  id:'UA-XXXXXXXX-1',
  cookie: {
    name: 'cookiekit',
    days: 10,
    path: '/'
  },
});

Changelog:

v1.1.2 (2021-05-26)

  • update

v1.1.1 (2021-05-20)

  • fix logo align setting
  • add logo margin setting with margin style
  • move logo object outside website information
  • change default modal background-color
  • source code cleaning

v1.1.0 (2021-05-20)

  • Add website information (name, url and logo)
  • Add accordion system for list of cookies
  • Add scrollbar by overflow-y css
  • Fix some english translations

This awesome jQuery plugin is developed by avantage-digital. For more Advanced Usages, please check the demo page or visit the official website.