cookierazzi v1.1.0

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

Methods

Consents

Toggle popup

In order to open the popup again, add the class bashow-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