Cookie Consent & Autoblock for GDPR/CCPA Compliance

Make your site comply with the GDPR and CCPA with 1-line js code.

Table of Content

What is Cookie Consent & Autoblock?
Usage
- Basic
- Advanced
Built-In Autoblocked Scripts
Demo
Support
Issues & Feature request
Resources
Disclaimer

Cookie Consent & Autoblock is a lightweight Javascript to help you quickly comply with the EU Cookie Law, CCPA, GDPR and other privacy laws.

This script provides following functions:

An Easily Configurable Cookie Consent Banner to be displayed to info the users.
The tracking tags (both built-in tags and configured) will be blocked until the user accepts the policy.
When a user accepts the cookie policy, the Cookie Consent Banner will no longer be shown.

This script is developed by SpruceJoy, a membership app that can be easily integrated into any website with just one single line of code.

Usage

Basic

If you only use tracking code within the built-in list, you can simply copy following code:

<script
  src="https://cdn.jsdelivr.net/gh/sprucejoy/cookie-consent-autoblock-gdpr/cookie-consent.js"
  crossorigin="anonymous"
></script>

Paste the code BEFORE any <script> within the <head> area.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <!--- START cookie consent code --->
    <script
      src="https://cdn.jsdelivr.net/gh/sprucejoy/cookie-consent-autoblock-gdpr/cookie-consent.js"
      crossorigin="anonymous"
    ></script>
    <!--- END cookie consent code --->
    ...
    <!--- Script --->
    <script>
      ....
    </script>
    ...
  </head>
  <body>
    <!-- content -->
    ...
  </body>
</html>

This will render the following dialog that, when styled, will look very much like this one.

Please see the real word example here.

Advanced

Message customization

If you need display language other than English or you want to customize it, you can set following variables:

window.__SJ_MESSAGE__ : display message.
window.__SJ_ACCEPT_BTN_TEXT__ : accept button text.
window.__SJ_REJECT_BTN_TEXT__ : reject button text.

For example, French version (not sure if it's correct since it's from Google Translate):

<script>
  window.__SJ_MESSAGE__ =
    'Pour vous offrir la meilleure expérience utilisateur possible, ce site Web utilise des cookies. En continuant à naviguer sur ce site, vous acceptez notre utilisation des cookies.'
  window.__SJ_ACCEPT_BTN_TEXT__ = 'Accepter'
  window.__SJ_REJECT_BTN_TEXT__ = 'Rejeter'
</script>
<script
  src="https://cdn.jsdelivr.net/gh/sprucejoy/cookie-consent-autoblock-gdpr/cookie-consent.js"
  crossorigin="anonymous"
></script>

Styling

You can provide styling for the bar, the button and the content.

Example:

Changing the bar background to red

window.__SJ_BAR_CLR__ = '#ff0000'

Changing the content text color to blue

window.__SJ_MSG_CLR__ = '#0000ff'

Change Accept & Reject button color and text color

// accept button color
window.__SJ_ACCEPT_BTN_CLR__ = '#00eeff'
window.__SJ_ACCEPT_BTN_TEXT_CLR__ = '#ffffff'

// Reject button color
window.__SJ_REJECT_BTN_CLR__ = '#00eeff'
window.__SJ_REJECT_BTN_TEXT_CLR__ = '#00eeff'

Additional script blocking

If you have more tracking codes other than built-in list, you can use following parameter to add new:

window.__SJ_TRACKING_DOMAINS__

For example, let's add twitter to the tracking list:

<script>
  window.__SJ_TRACKING_DOMAINS__ = ['twitter.com']
</script>
<script
  src="https://cdn.jsdelivr.net/gh/sprucejoy/cookie-consent-autoblock-gdpr/cookie-consent.js"
  crossorigin="anonymous"
></script>

You may find your tracking codes using following script, check here.

Combined 1 2 & 3, you script will become following if you need both message and tracking codes customization:

<script>
  window.__SJ_TRACKING_DOMAINS__ = ['twitter.com']
  window.__SJ_MESSAGE__ =
    'Pour vous offrir la meilleure expérience utilisateur possible, ce site Web utilise des cookies. En continuant à naviguer sur ce site, vous acceptez notre utilisation des cookies.'
  window.__SJ_ACCEPT_BTN_TEXT__ = 'Accepter'
  window.__SJ_REJECT_BTN_TEXT__ = 'Rejeter'
  window.__SJ_BAR_CLR__ = '#ff0000'
  window.__SJ_MSG_CLR__ = '#0000ff'
</script>
<script
  src="https://cdn.jsdelivr.net/gh/sprucejoy/cookie-consent-autoblock-gdpr/cookie-consent.js"
  crossorigin="anonymous"
></script>

Built-In Autoblocked Scripts

This script will automatically block following tracking codes from setting cookies:

Google Tag Manager
Google Analytics
Google Ads
Google Adsense
Google Publisher Tags
Facebook Pixel
Hotjar Analytics
Youtube embed
Vimeo embed
Google maps
Addthis widget
Sharethis widget
Twitter widget
Slideshare embed
Linkedin widget
Instagram embed
Pinterest widget
ConvertKit
Intercom
Mixpanel

Please contact us if you have some questions or you believe any tags shall be added. Thanks.

Demo

Here is the demo page.

Support

If you find this plugin useful please show your support and like us on Github Star - much appreciated! :)

Issues & Feature request

Our Documentation is a great place for most answers, but if you can’t find your answer there, please do contact us using the email address below.
Do you have a bug report? Please search the issues on our Github to make sure that the bug has not already been reported. If you cannot find what you had in mind, please submit your bug report here.
Do you have a feature request? Please search the ideas on our forum to make sure that the feature has not yet been requested. If you cannot find what you had in mind, please submit your feature request here.
Email: [email protected]

Resources

You may find all resources loaded on your pages by simply paste running codes on browser's console:

var resources = window.performance.getEntriesByType('resource')
resources.forEach(function (resource) {
  if (resource.initiatorType == 'script') console.log(resource.name)
})

You'll find we use:

mailerliet.com

Disclaimer

You running this script/function means you will not blame the author(s) if this breaks your stuff. This script/function is provided AS IS without warranty of any kind. Author(s) disclaim all implied warranties including, without limitation, any implied warranties of merchantability or of fitness for a particular purpose. The entire risk arising out of the use or performance of the sample scripts and documentation remains with you. In no event shall author(s) be held liable for any damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or other pecuniary loss) arising out of the use of or inability to use the script or documentation. Neither this script/function, nor any part of it other than those parts that are explicitly copied from others, may be republished without author(s) express written permission. Author(s) retain the right to alter this disclaimer at any time.

What is Cookie Consent & Autoblock?