From 6e5a771321b2e4c3f050e26b94ff56857948b2d8 Mon Sep 17 00:00:00 2001 From: Ole-Morten Duesund Date: Mon, 8 Sep 2025 13:19:26 +0200 Subject: [PATCH] Update documentation with comprehensive i18n features MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit README.md: - Add multilingual support badge and live demo link - Document Norwegian and English language switching - Add i18n API section with language functions - Include instructions for adding new languages - Update file listing with current filenames CLAUDE.md: - Add internationalization system architecture details - Document language preference persistence - Include i18n testing commands and API usage - Add customization points for translations - Update key files section with favicon info 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- CLAUDE.md | 28 +++++++++++++++++++++++++--- README.md | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 79 insertions(+), 5 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index b6fa139..7314520 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -10,7 +10,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co ## Project Overview -This is a GDPR-compliant optional tracking solution that provides a privacy-first approach to website analytics. The core concept is "minimal tracking by default, enhanced tracking by consent" - users start with privacy-protected minimal tracking and can opt-in to enhanced features. +This is a GDPR-compliant optional tracking solution that provides a privacy-first approach to website analytics. The core concept is "minimal tracking by default, enhanced tracking by consent" - users start with privacy-protected minimal tracking and can opt-in to enhanced features. **Features comprehensive i18n support for Norwegian and English.** ## Architecture @@ -23,15 +23,23 @@ This is a GDPR-compliant optional tracking solution that provides a privacy-firs - Manages cookie cleanup for tracking cookies (`_ga`, `_gid`, `_gat`, `_fbp`, `_fbc`) - Fires custom events (`trackingModeChanged`) for external integrations +**Internationalization System** +- Complete translation system supporting Norwegian (Bokmål) and English +- Language preference persisted with key 'gdpr-language' in localStorage +- Real-time translation updates without page reload +- Language toggle button (EN/NO) in top-right corner +- All UI text, modal content, and notifications fully localized + **Two-Mode System** - **Minimal Mode**: Essential cookies only, anonymized analytics, consent denied by default - **Enhanced Mode**: Full tracking enabled only after explicit user consent ### Key Files -- `index.html` - Complete demo with hero section, feature explanations, and live status indicator +- `index.html` - Complete demo with hero section, feature explanations, live status indicator, and i18n support - `integration-example.js` - Production-ready integration examples for React, Vue, WordPress, and vanilla JS -- `README.md` - Documentation covering API, customization, and legal compliance +- `README.md` - Documentation covering API, customization, i18n, and legal compliance +- `favicon.svg`, `favicon.ico` - Privacy-themed favicon with shield and lock design ## Development Commands @@ -67,10 +75,17 @@ The solution integrates with Google Analytics via consent modes: // Check current consent status localStorage.getItem('gdpr-tracking-consent') === 'true' +// Check current language +localStorage.getItem('gdpr-language') || 'en' + // Listen for mode changes document.addEventListener('trackingModeChanged', (e) => { console.log('Mode:', e.detail.mode); // 'minimal' or 'enhanced' }); + +// Set language programmatically +setLanguage('no'); // Norwegian +setLanguage('en'); // English ``` ## Key Implementation Details @@ -105,12 +120,19 @@ The button automatically calls `gtag('consent', 'update', {...})` when user chan - Button styling via CSS classes `.tracking-consent-btn` and `.tracking-consent-btn.enabled` - Modal content in `.consent-modal-content` - Status indicator in `.tracking-status` +- Language toggle styling via `.language-toggle` and `.lang-btn` ### Behavioral Customization - Change storage key by modifying `this.storageKey` in constructor - Customize consent message in modal HTML - Add additional tracking services in `enableEnhancedTracking()` method +### Internationalization Customization +- Add new languages to `translations` object with all required keys +- Modify Norwegian translations for local variants (e.g., Nynorsk) +- Add language detection based on browser locale +- Customize language button labels and positioning + ### Framework Integration The `integration-example.js` contains complete examples for: - WordPress (functions.php and shortcode approaches) diff --git a/README.md b/README.md index 63d7bcc..aae5ce6 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,30 @@ A lightweight, user-friendly JavaScript solution for implementing GDPR-compliant optional tracking on websites. By default, only minimal tracking is enabled, and users can opt-in to enhanced tracking with a fun "Plz trac me!" button. +**🌐 Now with full Norwegian and English language support!** + ## Features - 🔒 **GDPR Compliant by Default**: Minimal tracking until user consents +- 🌐 **Multilingual Support**: Norwegian and English with instant language switching - 🎨 **Beautiful UI**: Gradient button with hover effects and smooth animations - 📱 **Mobile Responsive**: Works perfectly on all device sizes - ⚡ **Lightweight**: Pure vanilla JavaScript, no dependencies - 🔧 **Easy Integration**: Drop-in solution for any website - 🍪 **Cookie Management**: Automatic cleanup when tracking is disabled - 📊 **Analytics Ready**: Google Analytics consent mode integration +- 💾 **Persistent Preferences**: Language and consent choices remembered between visits ## Demo -Open `gdpr-tracking-consent.html` in your browser to see the button in action! +**🚀 Live Demo:** [https://kode.naiv.no/olemd/gdpr](https://kode.naiv.no/olemd/gdpr) + +Open `index.html` in your browser to see the button in action! + +**Language Support:** +- Click **EN/NO** toggle in the top-right corner to switch languages +- All content translates instantly without page reload +- Language preference persists between visits ## Quick Start @@ -134,6 +145,45 @@ window.trackingConsent.enableTracking(); window.trackingConsent.disableTracking(); ``` +## Internationalization (i18n) + +### Language Support +Supports **Norwegian (Bokmål)** and **English** with: +- Complete UI translation including consent modal +- Proper Norwegian capitalization and compound words +- Real-time language switching +- Persistent language preference + +### Language API +```javascript +// Switch language programmatically +setLanguage('no'); // Norwegian +setLanguage('en'); // English + +// Get current language +const currentLang = localStorage.getItem('gdpr-language') || 'en'; + +// Listen for language changes +document.addEventListener('DOMContentLoaded', () => { + // Language is automatically loaded from localStorage +}); +``` + +### Adding New Languages +1. Add translations to the `translations` object: +```javascript +const translations = { + en: { /* English translations */ }, + no: { /* Norwegian translations */ }, + de: { /* German translations */ } +}; +``` + +2. Add language button: +```html + +``` + ## Browser Support - Modern browsers (ES6+) @@ -142,9 +192,11 @@ window.trackingConsent.disableTracking(); ## Files -- `gdpr-tracking-consent.html` - Complete demo with all features +- `index.html` - Complete demo with all features and i18n support - `integration-example.js` - Integration examples for different frameworks - `README.md` - This documentation +- `CLAUDE.md` - Repository guidance for Claude Code +- `favicon.svg`, `favicon.ico` - Privacy-themed favicon files ## Legal Compliance