Ads - Consent Management (CM - CMP)

About

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

Cookie Usage

The consent box may ask you to define the type of cookie usage that the user could accept.

Necessary

You cannot use the web site (web application without this cookies).

Preferences

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

Statistic cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously.

Marketing

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.

Unknown

All other cookie category are unknown cookie type.

Implementation

You can implement it:

yourself with a little bit of javascript
with the help of a provider

Self

Javascript

Example with:

boostrap alert to show the consent message
a jquery to select and manipulate the element
localStorage to store the consent
https://ip2c.org to detect the country of the user

// 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">&times;</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);
				}
			}
		}
	)
}

Rendered by WebCode

Storing Consent Data

When storing the consent, you can use the following table structure:

date-time
consent-id (id)
consent-url (origin of the consent)
consent-necessary (yes/no)
consent-preferences (yes/no)
consent-statistics (yes/no)
consent-marketing (yes/no)
consent-unknown (yes/no)
ip-anonymized (hashed)
user-agent
ip-country

Documentation / Reference

https://codeshack.io/eu-cookie-consent-popup-javascript/