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