Cookie Consent & Autoblock for GDPR/CCPA Compliance

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


Table of Content


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:

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

  1. 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>
  1. 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>

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

Please see the real word example here.

cookie consent & autoblocking

Advanced

  1. Message customization

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

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>
  1. 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";
  1. Additional script blocking

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

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.

  1. 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:

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


Demo

Here is the demo page.

sprucejoy homepage

Support

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


Issues & Feature request


Resources

  1. 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:

sprucejoy homepage 1

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.