Meet Cookie Guardian: The Friendly Cookie Helper for Websites!

ByChristopher Nathaniel | 23 April 2024

Cookie Guardian is developed and maintained by Christopher Nathaniel. Please note that while Cookie Guardian aims to facilitate compliance with privacy regulations and enhance user experience, Christopher Nathaniel is not liable for the setup and implementation of this plugin on individual websites. Website owners are responsible for ensuring proper configuration and adherence to applicable laws and regulations.

TL;DR: Cookie Guardian is a robust tool for website owners, ensuring compliance with regulations, safeguarding user data, and offering granular control over cookie preferences. With its customizable consent banners, seamless integration, and commitment to privacy, Cookie Guardian elevates the browsing experience while maintaining adherence to privacy standards.

Install via NPM:

View Cookie Guardian NPM: https://www.npmjs.com/package/cookie-guardian

NPM – Cookie Guardian

app.js

install.sh

Preview Code

import CookieGuardian from 'cookie−guardian/src/cookie−guardian.js';
const cookieGuardian = new  window.CookieGuardian();

Install via NPM: npm i cookie−guardian

Download via GitHub

Download Cookie Guardian: https://github.com/christophernathaniel/cookie-guardian

Scripts – Cookie Guardian

index.html

<!−− header scripts −−>
<link href="./dist/cookie−guardian.css" rel="stylesheet" type="text/css">
<!−− footer scripts −−>
<script defer src="./dist/cookie−guardian.js" type="text/javascript"></script>
<script defer>
    const cookieGuardian = new window.CookieGuardian();
</script>

Understanding Cookies

Cookie Guardian serves as a diligent ally in the realm of internet browsing, committed to fostering a secure and enjoyable experience for all users. In the digital landscape, it operates akin to a vigilant guardian, ensuring strict adherence to regulatory protocols and the safeguarding of sensitive information.

Cookies, in this context, function as discreet data markers utilized by websites to store user preferences and enhance functionality. These digital artifacts, akin to personalized notes, optimize website performance and tailor the browsing experience to individual preferences, thereby elevating user satisfaction and engagement.

Features of Cookie Guardian

Customizable Consent Banner: Cookie Guardian has a colorful banner that pops up when you visit a website. It tells you about cookies and lets you choose which ones you want to use.
Cookie Categories: Cookie Guardian sorts cookies into groups like “Essential,” “Preferences,” and “Statistics.” This way, you can decide which cookies you want to keep and which ones you don’t need.
Following Rules: Cookie Guardian helps websites follow important rules about privacy. It makes sure websites ask for your permission before using cookies and keeps everything fair and safe.
Making Friends with Analytics: Cookie Guardian helps websites be friends with analytics tools like Google Analytics. It lets them learn cool things about visitors without being nosy!
Easy Peasy Implementation: Cookie Guardian is super easy to use. It shows websites how to set it up step-by-step, so they can be ready to help you in no time!

Benefits of Using Cookie Guardian:

Trustworthy Friends: With Cookie Guardian, you can trust that websites are being honest and respectful with your information.
Playing by the Rules: Cookie Guardian makes sure websites play by the rules and keep everything fair and square.
Happy Browsing: Thanks to Cookie Guardian, your internet adventures are safe, fun, and exactly how you like them!

Should you use Cookie Guardian?

Cookie Guardian is like having a friendly guide to help websites do the right thing and keep your online adventures awesome! It’s a super easy-to-use tool that makes everyone happy – website owners, visitors like you, and even the cookies themselves! So, next time you’re browsing the web, remember to say hello to Cookie Guardian and enjoy your safe and fun journey!

Advanced Control

This plugin allows for some advanced control, in customising text to your own liking. The code also incudes callbacks, so when ‘preferences’ or ‘statistics’ is called, you can run custom scripts once these are enabled, giving you full control over your Cookies.

Scripts – Cookie Guardian

index.html

const cookieGuardian = new window.CookieGuardian({
    policyLink: '/cookie−policy',
    stopAllCookies: true,
    desc: `<p>This website uses cookies...</p>`,
    unclassifiedText: 'Unclassified cookies are cookies...',
    marketingText: 'Marketing cookies are used...',
    statisticsText: 'Statistical cookies help...',
    preferencesText: 'Preference cookies enable...',
    requiredText: 'Required cookies help...',
    acceptText: 'Accept All',
    declineText: 'Deny',
    preferences: () => {
        // Preferences Callback
    },
    statistics: () => {
        // Statistics Callback
    },
    marketing: () => {
        // Marketing Callback
    },
    unclassified: () => {
        // Unclassified Callback
    }
})

Sending NO DATA without consent. Strict Cookie Popup with Google Analytics

Cookie Guardian prioritises never loading the scripts unless the user has confirmed to do so. This is different from the standard practice of loading in gTag or Analytics which these scripts are expected to load up first before telling it your individual preferences; however we believe that privacy is a users right, and that NO DATA will be tracked at all unless the user gives consent.

We believe in NO DATA, as it makes it easy for Cookie Guardian to keep to its promise of keeping your data private.

Scripts – Cookie Guardian

index.html

import CookieGuardian from 'cookie−guardian/src/cookie−guardian.js';
gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500
});
const cookieGuardian = new CookieGuardian({
    stopAllCookies: true,
    statistics: () => {
        // Statistics Callback
        let tagManager = document.createElement('script');
        tagManager.id = 'google−tag−manager';
        tagManager.type = 'text/javascript';
        tagManager.src = 'https://www.googletagmanager.com/gtag/js?id=G−XXXXXXXXXX';    
        document.head.appendChild(tagManager);
        // Set the script content
        let analyticsLayer = document.createElement('script');
        analyticsLayer.textContent = `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G−XXXXXXXXXX');
        `;
        // Append the script element to the head of the document
        document.head.appendChild(analyticsLayer);
        // Statistics Granted
        gtag('consent', 'update', {
            'ad_storage': 'granted',
            'ad_user_data': 'granted',
            'ad_personalization': 'granted',
            'analytics_storage': 'granted',
            'wait_for_update': 500
        });
    },
});

Cookie values in Local Storage

This table serves as a reference guide for configuring Cookie Guardian settings related to local storage management. It allows users to specify their preferences regarding the acceptance or rejection of different types of cookies, thereby enhancing control over their browsing experience and privacy settings.

Local Storage Name	Allowed Local Storage Value	Description
cookie-guardian	false / true	States if Cookie Guardian allows all cookies.
cookie-guardian-statistics	false / true	States if Cookie Guardian allows statistics cookies.
cookie-guardian-unclassified	false / true	States if Cookie Guardian allows unclassified cookies.
cookie-guardian-marketing	false / true	States if Cookie Guardian allows marketing cookies.
cookie-guardian-preferences	false / true	States if Cookie Guardian allows preferences cookies.