DEV Community

Cover image for Cookie Guard JS: The GDPR/CCPA Consent Manager (No Dependencies, 12.8 kB, 22 Languages)
Joseba Mirena Fernández Florín
Joseba Mirena Fernández Florín

Posted on

Cookie Guard JS: The GDPR/CCPA Consent Manager (No Dependencies, 12.8 kB, 22 Languages)

#javascript #opensource #privacy #showdev

Cookie Guard 🛡️

GDPR/CCPA compliance Cookies Consent Management.

A GDPR/CCPA 2026 compliance, simple and customizable Cookies Management system.

Cookie Guard interface showing consent management

MAIN FEATURES

  • Legal Compliance: Fully GDPR/CCPA compliant workflow (2026 standards).
  • Hybrid Modes: Supports both full third-party consent and "no-cookies" informational mode.
  • Smart Execution: Auto-activates Analytics/Marketing scripts (handles type="text/plain").
  • Zero Dependencies: Pure Vanilla JavaScript; no jQuery or external libraries required.
  • Privacy Focus: Optional persistent "Privacy" floating button to re-open settings.
  • Legal Terms: Optional acceptance and Legal URL smart handling.
  • Global Reach: Support for 22 languages (LTR & RTL) with automatic browser detection.
    • Locales: en, es, ca, eu, gl, et, ar, pt, pl, vi, fr, de, it, ru, zh, ja, id, ko, tr, nl, hi, bn.
  • Performance: Ultra-lightweight architecture (~12.8 kB minified).
  • Accessibility: Implements ARIA standards for screen readers.
  • Encapsulation: Built within an IIFE to ensure no global namespace pollution.
  • UI/UX: Dynamic CSS/HTML injection with a fully responsive, mobile-first design.
  • Customization: Flexible configuration for expiration, link colors, and button border-radius.
  • Developer API: Public toggle, open, and reset methods for external control.

📦 Installation

Add the minified version before the closing </body> tag:

<script 
    src="https://opensource.josebamirena.com/cookie-guard/3.0.0/dist/cookie-guard.min.js" 
    integrity="sha384-4TomZ6aXKNjC0fGi+v+GQTBp9kmS006nQ3SriGo6U0a93lhADVwmw8toL8JQW4vB" 
    crossorigin="anonymous">
</script>
Enter fullscreen mode Exit fullscreen mode

⚙️ Configuration

Cookie Guard default Initialization 

<script>
    document.addEventListener('DOMContentLoaded', () => CookieGuard.init());
</script>
Enter fullscreen mode Exit fullscreen mode

Initialization default variables and values

Property Type Default Description
locale string auto 'auto' or 2-letter language ISO code.
consent boolean true true for 3rd party scripts, false for info-only banner.
url string null Relative URL to your legal/cookies policy page.
reopen boolean true Renders the floating privacy button.
radius integer 12 Buttons border-radius in pixels.
delay integer 800 Modal entrance delay in milliseconds.
link string #3b82f6 Primary link color.
hover string #10b981 Link hover color.
separator string • Modal footer links separator
expiration integer 365 Consent cookie expiration in days. 
<script>
    const defaults = {
        locale: 'auto', // @string 'auto' or 2-letter ISO code.
        consent: true, // @bool true for 3rd party scripts, false for info-only banner.
        url: null, // @null|string Relative URL to your legal/cookies policy page.
        reopen: true, // @bool Renders the floating privacy button.
        radius: 12, // @int Buttons border-radius in pixels.
        delay: 800, // @int Modal entrance delay in milliseconds.
        link: "#3b82f6", // @string Primary link color.
        hover: "#10b981", // @string Link hover color.
        separator: "•", // @string Modal footer links separator
        expiration: 365, // @int Consent cookie expiration in days.
    };
</script>
Enter fullscreen mode Exit fullscreen mode

Cookie Guard Customized Example 

<script>
    document.addEventListener('DOMContentLoaded', () => 
        CookieGuard.init({
            locale: 'en', // fixed language
            url: "/legal", // legal relative url
            link: "#ff0000", // red links
            radius: 8, // buttoms radius
        })
    );
</script>
Enter fullscreen mode Exit fullscreen mode

Cookie Guard non third party cookies mode 

<script>
    document.addEventListener('DOMContentLoaded', () => 
        CookieGuard.init({
            locale: 'auto', // auto detect language
            consent: false, // no third party cookies mode
        })
    );
</script>
Enter fullscreen mode Exit fullscreen mode

🛠️ Script Implementation

To let Cookie Guard manage your scripts, add the type attribute text/plain and add the data-cg-category attribute (analytics|marketing):

Test script example 

<script 
    type="text/plain" 
    data-cg-category="analytics">
    console.log('Analytics script executed');
</script>
Enter fullscreen mode Exit fullscreen mode

Analytics script example 

<script 
    type="text/plain" 
    data-cg-category="analytics" 
    src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y">
</script>
Enter fullscreen mode Exit fullscreen mode

Marketing script example 

<script type="text/plain" data-cg-category="marketing">
    console.log("Facebook pixel is legally enabled.");
    fbq('init', '123456789');
    fbq('track', 'PageView');
</script>
Enter fullscreen mode Exit fullscreen mode

🕹️ Developer API

Toggle Modal 

<a href="javascript:void(0)" onclick="CookieGuard.toggle()">Privacy</a>
Enter fullscreen mode Exit fullscreen mode

Force Open 

<a href="javascript:void(0)" onclick="CookieGuard.open()">Open Privacy</a>
Enter fullscreen mode Exit fullscreen mode

Hard Reset:

Debug Shortcut: CTRL + SHIFT + X to reset state instantly.

<a href="javascript:void(0)" onclick="CookieGuard.reset()">Reset Privacy</a>
Enter fullscreen mode Exit fullscreen mode

🎯 Live Demo

Try Cookie Guard live on my website:

👉 Cookie Guard Demo

See how it handles consent, 22 languages, and third-party script blocking in action.

Joseba Mirena Fernandez Florin

Made with ❤️ by Joseba Mirena

Top comments (1)

Collapse
 
joseba-mirena profile image
Joseba Mirena Fernández Florín •

Would ❤️ to hear how Cookie Guard works for your projects. If you run into any issues or have feature requests, drop them here, open an issue on GitHub or reach me at my website. Let's build better tools together! 👽