cookierazzi

CookieRazzi : A Cookie Concent Management Plateform (CMP)

Features

• Written in vanilla javascript, no dependencies needed
• Clean UI with some customisable style (CSS custom properties)
• Change the markup of RGPD-sensitive JavaScript script tags to run only if the user has given consent.
• The expiration time of the cookie storing user consent preferences is configurable. By default it is one month.

How to use

<link rel="stylesheet" href="cookierazzi.css">
<script src="cookierazzi.js"></script>
<script type="text/javascript">
    var cmp = new cookieRazzi;

    cmp.setExpire(2);
    cmp.setSeed(2);
    cmp.setText({title : 'Cookie policy'});
    cmp.updateConsent('necessary', {title: "Lorem ipsum"});
    cmp.addConsent( 'tracking' : {
        disabled : false,
        value : true,
        icon : "https://www.google.com/s2/favicons?domain=analytics.google.com",
        title : "",
        text :  "Description",
        callback: function(consentValue){
            //...
        }
    });

    document.addEventListener("DOMContentLoaded", function() {
        cmp.init();
    });
</script>

<script type="text/plain" cookie-consent="tracking">
    console.log('Eval script text/plain if consent');
</script>

Customise sentences

Texts parameters

key	Default Sentences (string)
title	"Nous respectons votre vie privée"
intro	"Nous utilisons des cookies pour améliorer et personnaliser votre expérience."
desc	"Vous pouvez à tout moment revenir sur vos choix en utilisant le lien « paramétrer les cookies sur ce site » disponible dans notre politique de confidentialité"
reject_all	"Tout refuser"
accept	"Valider la sélection"
accept_all	"J'accepte tout"

Methods

Method	Type	Description
init()		Initialize the CMP
debug()		Log settings and CMP cookie
showPopup()		Show CMP popup
hidePopup()		Hide CMP Popup
setSeed()	string	Change the seed if consents are added or modified to reset the cookie
setExpire()	int	Set the expiration time for the cookie that retains user consent preferences. By default it is one month.
setText()	object	Customise popup sentences
addConsent()	(string,object)	Add consent with a named key and object with its value
updateConsent()	(string,object)	Update consent with the named key of the consent to be updated and an object containing the new values

Consents

key	Type	Description
disabled	bool	Disabled the checkbox of the consent
value	bool	Default value of the consent
icon	url, base64 image, false	For better acceptance, accompany the consent with an icon. (16x16)
title	string	Title of the consent
text	string	Description of the consent
callback	function	Function used if consent is approved

Toggle popup

In order to open the popup again, add the class show-cmp on a link, button, or other. When clicked, the popup will appear.

<a href="#" class="show-cmp">Manage cookies</a>

Customise

the CMP can be customised using a few CSS variables. Here are the default values:

:root{
	--cmp-sun-color: #fff6a2;
	--cmp-btn-bg-hover: #fff6a2;
	--cmp-btn-color-hover: #333333;
	--cmp-radius: 8px;
}

Example : Gtag setup

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-X"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}

    gtag("consent", "default", {
        ad_storage: "denied",
        analytics_storage: "denied",
        wait_for_update: 1000 // ms
    });
    
    gtag("set", "ads_data_redaction", true);
    gtag('js', new Date());
    gtag('config', 'UA-XXXXX-X');
    
    function updateConsent(ad_storage, analytics_storage) {
        gtag("consent", "update", {
            analytics_storage: analytics_storage ? "granted" : "denied"
        });
    }
</script>

<link rel="stylesheet" type="text/css" href="cookierazzi.css"/>
<script src="cookierazzi.js" type=""></script>
<script>
    var cmp = new cookieRazzi;
    cmp.addConsent('tracking', {
        disabled : false,
        value : true,
        icon : "https://www.google.com/s2/favicons?domain=analytics.google.com",
        title : "Tracking",
        text :  "Description",
        callback: function(consentValue){
            updateConsent(consentValue, consentValue)
        }
    });
    document.addEventListener("DOMContentLoaded", function() {
        cmp.init();
    });
</script>

---

Legal information

Visuel de Cookie créé par freepik - fr.freepik.com