WabiLGPD, a script to implement cookie management on your website

The General Personal Data Protection Law (LGPD in Portuguese) was created to regulate the collection, storage and sharing of personal data, defending the fundamental rights of freedom and privacy.

The script is developed in pure JavaScript, which means that it does not require any library to work, just include it on the website and use it.

Download

Download the file in zip or bz2 format.

Download Zip Download Bz2

Loading

Include the compiled files in your page.

HTML

<link rel='stylesheet' type='text/css' href='/path/to/css/wabi-lgpd-1.0.min.css'>
<script src='/path/to/js/wabi-lgpd-1.0.min.js'></script>

Translations

Remember to copy the wabi-lgpd-1.0.lang.json language file into the same directory as the main javascript.

Change the translations in this file as needed.

Basic usage

Run the code below after the main JavaScript loads.

JavaScript

myWabiLGPDObjects = new wabiLGPD({
   name: 'wabiConsentLGPD',
   lang: 'en',
   initialConsent: false,
   expire: 365,
   privacyPolicyUrl: 'https://telazul.drusian.com.br/en/article/privacy-policy',
   showDecline: true,
   showSettings: true
});

The example above loads the dialog box in English with all the buttons. The script considers that the user did not initially give consent and therefore cookies should not be stored beyond what is strictly necessary until the user makes a decision.

The name option defines the name that will precede each type of cookie.

Cookies Types

Four types of cookies are available:

• Strictly necessary: these are cookies used for the website to function and cannot be disabled. They are usually created in response to some action performed by the website user, requesting some service such as setting the privacy preferences of this script, logging into the website and filling out forms.
• Performance cookies: these are cookies used to count the number of visits and traffic sources, to measure and improve the user experience and website performance. They are responsible for information about how visitors move within the website, the most and least visited pages. Google Analytics fits here, if these cookies are accepted it will be loaded.
• Functional cookies: these are cookies used to provide personalization and improved functionality. These may be cookies set by third parties.
• Targeting cookies: these are cookies used to make advertising more relevant and can be set either by the website itself or by third parties. It can be used to create an interest profile to show you more relevant ads. Google ADsense fits here and acceptance of this type of cookie will be linked to whether or not the ads load.

For more information about the types of cookies, see the messages available in this tool, the texts are more complete. This system of 4 types of cookies and the texts used both on this page and in the script itself were based on the cookie management system available on the stackoverflow website.

Note: When the script is configured to use the initial consent as false, Analytics and Adsense will not load. When accepting cookies, both will start automatically, however, deactivating cookies will not interrupt the services immediately, the user will need to refresh the page.

Show Cookies Settings

Adding a link on the website to show the dialog box with cookie storage permissions settings is simple, just add the wabi-lgpd-show-dialog class.

Cookies

HTML

<a href='#' class='wabi-lgpd-show-dialog'>Cookies</a>

Google Analytics and Adsense

How to configure both Analytics and Adsense to be loaded dynamically upon user consent.

JavaScript

myWabiLGPD = new wabiLGPD({
   name: 'wabiConsentLGPD',
   lang: 'en',
   initialConsent: false,
   expire: 365,
   privacyPolicyUrl: 'https://telazul.drusian.com.br/en/article/privacy-policy',
   showDecline: true,
   showSettings: true,
   analytics: true,
   analyticsID: 'G-MY_ID',
   adsense: true,
   adsenseID: 'ca-pub-MY_ID'
});

Automatic Adsense ads will be displayed using only this initialization, however for manual ads, those that you decide where to place on your website, it is necessary to include only the <ins> element in the html code, example:

HTML

<ins class='adsbygoogle'
  style='display:block'
  data-ad-client='Client ID'
  data-ad-slot='Ad ID'
  data-ad-format='auto'
  data-full-width-responsive='true'>
</ins>

Google Analytics is enabled/disabled in the settings under Performance Cookie option while Adsense under Targeting Cookies.

Mandatory consent and multiple languages

Below is the version with the basic dialog box, just informing the user that the site uses cookies. It is assumed that consent is mandatory to use the website.

Before starting the script, a function was created to get the website's language from the browser's URL and then an if to define the URL of the privacy policy according to the language. These codes assume that the website's URL uses the most common format: https://domain.com/lang/. These codes are just suggestions, the logic can be adjusted to your needs.

JavaScript

// Function to get the language from the URL
function getSiteLang() {
   const path = window.location.pathname;
   const array = path.split('/');
   return array[1];
}
const myWabiLang = getSiteLang();

// Privacy policy according to language
if (myWabiLang == 'pt') {
   myWabiPrivacyPolicy = 'https://telazul.drusian.com.br/pt/artigo/politica-de-privacidade';
} else if (myWabiLang == 'en') {
   myWabiPrivacyPolicy = 'https://telazul.drusian.com.br/en/article/privacy-policy';
} else if (myWabiLang == 'es') {
   myWabiPrivacyPolicy = 'https://telazul.drusian.com.br/es/articulo/politica-de-privacidad';
}

// Initializing mandatory consent
myWabiLGPDObjects = new wabiLGPD({
   name: 'wabiConsentLGPD',
   lang: myWabiLang,
   initialConsent: true,
   expire: 365,
   privacyPolicyUrl: myWabiPrivacyPolicy,
   showDecline: false,
   showSettings: false
});

Restricting the use of cookies

For Analytics and Adsense the script already makes the restrictions, however for functional Cookies there is no automatic action, it is necessary to make the restrictions manually. To check whether consent was granted or not, use the getCookie function that comes with the script.

JavaScript

if (getCookie(myWabiLGPD.opt.name + 'functionalCookies') == 'true') {
   // My code to manipulate cookies
}

This condition applies to all other types of cookies, simply changing 'functionalCookies' to 'performanceCookies' or 'targetingCookies'.

The variable myWabiLGPD.opt.name contains the default name defined at initialization and which precedes every name of a cookie type.

The condition uses the comparison == 'true' because the cookie is stored in text format. Using the value true without quotes will not work.

Features

This script provides a dialog box to ask the user for permission to store cookies for different purposes. Its main features are:

• Two consent options:
  • Consensual consent, where the user chooses whether and to which cookies they want to consent.
  • Mandatory consent, where the user is only informed that cookies will be stored, that is, use of the website is conditional on consent to the use of cookies.
• Allows you to set the URL for the privacy policy.
• Supports 3 languages, Portuguese, English and Spanish. It is possible to add others.
• Customizable message texts and buttons in all languages.
• Uses different texts for the main message and the consent button depending on whether the consent is mandatory or consensual. In both cases, the texts are customizable.
• You can choose initial consent, this means when the user enters the website and before choosing an option, whether the consent should be considered true or false.
• Configure whether the Refuse Cookies and Customize Cookies buttons will be displayed.
• Enables you to create a link to open the dialog box with cookie settings.
• Function to log cookie values to the console.
• Integration with Google Analytics and Adsense, which are automatically loaded by this script by simply providing the respective IDs. Scripts are loaded upon user or initial consent.
• Allows customization of the dialog box through the sass (.scss) file that are included with the script.

This is not my original language and I don't speak it very well. I used my little knowledge and translators tools to compose the text of this article. Sorry for possible spelling or grammatical errors, suggestions for corrections are appreciated and can be sent to the contact email in the footer of the site. My intention is to share some knowledge and I hope this translation is good enough.