Consent Management is a mandatory privacy process due to gdpr where a website showing a page to a EU resident needs the consent of the user in order to use their data (cookies,..)
The consent box may ask you to define the type of cookie usage that the user could accept.
You cannot use the web site (web application without this cookies).
Preference cookies enable a website to remember information that changes the way the website behaves or looks, like your preferred language or the region that you are in.
Statistic cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously.
Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.
All other cookie category are unknown cookie type.
You can implement it:
Example with:
// The storage key
let consentKey = 'consentValue';
// The value of the consent if the user is not from a EU country
let consentValueNonEu = 'NonEu';
// Do we have already a consent ?
let consentStorage = localStorage.getItem(consentKey);
if (!consentStorage) {
localStorage.setItem(consentKey, false);
}
// Do we need to show the consent box
// localStorage.getItem return a string, therefore !'false' is false and not true ---
let consent = ( consentStorage !== 'true' || consentStorage !== consentValueNonEu);
if (consent) {
// Country
jQuery.ajax(
'https://ip2c.org/self',
{
success: function (data) {
let countryCode = data.split(";")[1];
let euCountryCodes = ['AL', 'AD', 'AM', 'AT', 'BY', 'BE', 'BA', 'BG', 'CH', 'CY', 'CZ', 'DE', 'DK', 'EE', 'ES', 'FO', 'FI', 'FR', 'GB', 'GE', 'GI', 'GR', 'HU', 'HR', 'IE', 'IS', 'IT', 'LT', 'LU', 'LV', 'MC', 'MK', 'MT', 'NO', 'NL', 'PO', 'PT', 'RO', 'RU', 'SE', 'SI', 'SK', 'SM', 'TR', 'UA', 'VA'];
if (euCountryCodes.includes(countryCode)) {
let consentBoxId = 'gdpr_consent';
let consentBoxSelector = '#' + consentBoxId;
let consentBox = `
<div id="${consentBoxId}" class="container alert alert-secondary alert-dismissible fixed-bottom text-center fade" role="alert" >
By using our site, you acknowledge that you have read and understand our policy.
<button type="button" class="close" style="float:initial" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
`;
jQuery("body").append(consentBox);
// Show the alert
jQuery(consentBoxSelector).addClass('show');
// When it's closed, we save the consent
jQuery(consentBoxSelector).on('closed.bs.alert', function () {
// This event is fired when the alert has been closed (will wait for CSS transitions to complete)
localStorage.setItem(consentKey, true);
console.log ('Consent was saved');
})
} else {
localStorage.setItem(consentKey, consentValueNonEu);
}
}
}
)
}
When storing the consent, you can use the following table structure: