@el7ven/cookie-kit 0.2.20 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@el7ven/cookie-kit",
-  "version": "0.2.20",
+  "version": "0.3.1",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -11,8 +11,10 @@
     "./dist/styles": "./dist/styles/index.css",
     "./react": "./src/react/index.js",
     "./vue": "./src/vue/index.js",
-    "./src/composables/useCookieConsent": "./src/vue/composables/useCookieConsent.js",
+    "./analytics": "./src/core/analytics.js",
+    "./config": "./src/core/index.js",
     "./composables/useCookieConsent": "./src/vue/composables/useCookieConsent.js",
+    "./src/composables/useCookieConsent": "./src/vue/composables/useCookieConsent.js",
     "./package.json": "./package.json"
   },
   "files": [

package/src/core/analytics.js

@@ -0,0 +1,311 @@
+/**
+ * @el7ven/cookie-kit - Analytics Integration Module
+ * Google Consent Mode v2, GTM, GA4, Meta Pixel, Yandex Metrica
+ */
+
+/**
+ * Initialize Google Consent Mode v2 with default denied state
+ */
+export function initGoogleConsentMode() {
+  if (typeof window === 'undefined') return
+
+  window.dataLayer = window.dataLayer || []
+  window.gtag = window.gtag || function gtag() { window.dataLayer.push(arguments) }
+
+  // Set default consent state - all denied until user consents
+  window.gtag('consent', 'default', {
+    ad_storage: 'denied',
+    ad_user_data: 'denied',
+    ad_personalization: 'denied',
+    analytics_storage: 'denied',
+    functionality_storage: 'denied',
+    personalization_storage: 'denied',
+    security_storage: 'granted' // Always granted for security
+  })
+}
+
+/**
+ * Update Google Consent Mode based on cookie consent categories
+ * @param {Object} categories - { analytics: true, marketing: false, preferences: true }
+ */
+export function updateGoogleConsent(categories = {}) {
+  if (typeof window === 'undefined' || !window.gtag) return
+
+  const consentUpdate = {
+    analytics_storage: categories.analytics ? 'granted' : 'denied',
+    ad_storage: categories.marketing ? 'granted' : 'denied',
+    ad_user_data: categories.marketing ? 'granted' : 'denied',
+    ad_personalization: categories.marketing ? 'granted' : 'denied',
+    functionality_storage: categories.preferences ? 'granted' : 'denied',
+    personalization_storage: categories.preferences ? 'granted' : 'denied',
+    security_storage: 'granted'
+  }
+
+  window.gtag('consent', 'update', consentUpdate)
+}
+
+/**
+ * Load Google Tag Manager
+ * @param {string} gtmId - GTM container ID (e.g., 'GTM-XXXXX')
+ */
+export function loadGTM(gtmId) {
+  if (!gtmId || typeof document === 'undefined') return
+
+  const script = document.createElement('script')
+  script.async = true
+  script.src = `https://www.googletagmanager.com/gtm.js?id=${gtmId}`
+  document.head.appendChild(script)
+
+  window.dataLayer = window.dataLayer || []
+  window.dataLayer.push({
+    'gtm.start': new Date().getTime(),
+    event: 'gtm.js'
+  })
+}
+
+/**
+ * Load Google Analytics 4
+ * @param {string} ga4Id - GA4 measurement ID (e.g., 'G-XXXXX')
+ */
+export function loadGA4(ga4Id) {
+  if (!ga4Id || typeof document === 'undefined') return
+
+  const script = document.createElement('script')
+  script.async = true
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${ga4Id}`
+  document.head.appendChild(script)
+
+  window.dataLayer = window.dataLayer || []
+  window.gtag = window.gtag || function gtag() { window.dataLayer.push(arguments) }
+  window.gtag('js', new Date())
+  window.gtag('config', ga4Id)
+}
+
+/**
+ * Load Meta (Facebook) Pixel
+ * @param {string} pixelId - Meta Pixel ID
+ */
+export function loadMetaPixel(pixelId) {
+  if (!pixelId || typeof window === 'undefined') return
+
+  /* eslint-disable */
+  !function(f,b,e,v,n,t,s)
+  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+  n.queue=[];t=b.createElement(e);t.async=!0;
+  t.src=v;s=b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t,s)}(window, document,'script',
+  'https://connect.facebook.net/en_US/fbevents.js');
+  /* eslint-enable */
+
+  window.fbq('init', pixelId)
+  window.fbq('track', 'PageView')
+}
+
+/**
+ * Load Yandex Metrica
+ * @param {string} counterId - Yandex Metrica counter ID
+ */
+export function loadYandexMetrica(counterId) {
+  if (!counterId || typeof document === 'undefined') return
+
+  /* eslint-disable */
+  (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+  m[i].l=1*new Date();
+  for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+  k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+  (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+  /* eslint-enable */
+
+  window.ym(counterId, 'init', {
+    clickmap: true,
+    trackLinks: true,
+    accurateTrackBounce: true,
+    webvisor: true
+  })
+}
+
+/**
+ * Block all scripts with data-cookie-category BEFORE consent.
+ * Call this as early as possible (before DOMContentLoaded).
+ * Rewrites script type to text/plain so they don't execute.
+ *
+ * Usage in HTML:
+ *   <script data-cookie-category="analytics" src="..."></script>
+ *   <script data-cookie-category="marketing">inline code</script>
+ */
+export function blockScriptsBeforeConsent() {
+  if (typeof document === 'undefined') return
+
+  // MutationObserver to catch dynamically added scripts
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.tagName === 'SCRIPT' && node.getAttribute('data-cookie-category')) {
+          const category = node.getAttribute('data-cookie-category')
+          // Check if consent already given for this category
+          if (!_hasConsentFor(category)) {
+            node.type = 'text/plain'
+            if (node.src) {
+              node.dataset.originalSrc = node.src
+              node.removeAttribute('src')
+            }
+          }
+        }
+      }
+    }
+  })
+
+  observer.observe(document.documentElement, { childList: true, subtree: true })
+
+  // Also block any scripts already in the DOM
+  document.querySelectorAll('script[data-cookie-category]').forEach(script => {
+    const category = script.getAttribute('data-cookie-category')
+    if (!_hasConsentFor(category)) {
+      if (!script.dataset.blocked) {
+        script.dataset.blocked = 'true'
+        // Already executed scripts can't be un-executed,
+        // but we mark them so future loads respect consent
+      }
+    }
+  })
+
+  // Store observer reference for cleanup
+  if (typeof window !== 'undefined') {
+    window.__cookieKitScriptObserver = observer
+  }
+
+  return observer
+}
+
+/**
+ * Unblock and execute scripts for consented categories.
+ * @param {Object} categories - { analytics: true, marketing: false }
+ */
+export function unblockConsentedScripts(categories = {}) {
+  if (typeof document === 'undefined') return
+
+  document.querySelectorAll('script[data-cookie-category][type="text/plain"]').forEach(script => {
+    const category = script.getAttribute('data-cookie-category')
+    if (categories[category]) {
+      const newScript = document.createElement('script')
+
+      // Copy attributes
+      for (const attr of script.attributes) {
+        if (attr.name !== 'type' && attr.name !== 'data-original-src') {
+          newScript.setAttribute(attr.name, attr.value)
+        }
+      }
+
+      // Restore src or inline content
+      if (script.dataset.originalSrc) {
+        newScript.src = script.dataset.originalSrc
+        newScript.async = true
+      } else if (script.textContent) {
+        newScript.textContent = script.textContent
+      }
+
+      newScript.type = 'text/javascript'
+      script.parentNode.replaceChild(newScript, script)
+    }
+  })
+}
+
+/**
+ * Check localStorage for existing consent for a category
+ * @private
+ */
+function _hasConsentFor(category) {
+  if (typeof localStorage === 'undefined') return false
+  try {
+    const stored = localStorage.getItem('cookie_consent')
+    if (!stored) return false
+    const consent = JSON.parse(stored)
+    return consent?.categories?.[category] === true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Legacy alias
+ * @param {Object} categories - { analytics: true, marketing: false }
+ */
+export function manageScriptBlocking(categories = {}) {
+  unblockConsentedScripts(categories)
+}
+
+/**
+ * Create analytics manager that auto-integrates with cookie consent
+ * @param {Object} config - { ga4: 'G-XXX', gtm: 'GTM-XXX', metaPixel: 'XXX', yandexMetrica: 'XXX' }
+ * @returns {Object} Analytics manager instance
+ */
+export function createAnalyticsManager(config = {}) {
+  let initialized = false
+
+  const init = () => {
+    if (initialized) return
+    initialized = true
+
+    // Block scripts before consent
+    blockScriptsBeforeConsent()
+
+    // Always init Google Consent Mode first (denied by default)
+    initGoogleConsentMode()
+
+    // Load GTM if configured (it respects consent mode)
+    if (config.gtm) loadGTM(config.gtm)
+  }
+
+  const onConsentUpdate = (categories = {}) => {
+    // Update Google Consent Mode
+    updateGoogleConsent(categories)
+
+    // Load analytics scripts based on consent
+    if (categories.analytics) {
+      if (config.ga4) loadGA4(config.ga4)
+      if (config.yandexMetrica) loadYandexMetrica(config.yandexMetrica)
+    }
+
+    if (categories.marketing) {
+      if (config.metaPixel) loadMetaPixel(config.metaPixel)
+    }
+
+    // Unblock scripts for consented categories
+    unblockConsentedScripts(categories)
+  }
+
+  const connectToCookieConsent = () => {
+    if (typeof window === 'undefined') return
+
+    // Wait for CookieConsent to be available
+    const checkInterval = setInterval(() => {
+      if (window.CookieConsent) {
+        clearInterval(checkInterval)
+
+        // Check if consent already given
+        const currentConsent = window.CookieConsent.getConsent()
+        if (currentConsent?.categories) {
+          onConsentUpdate(currentConsent.categories)
+        }
+
+        // Listen for future changes
+        window.CookieConsent.on('consentChanged', ({ consent }) => {
+          if (consent?.categories) {
+            onConsentUpdate(consent.categories)
+          }
+        })
+      }
+    }, 100)
+
+    // Stop checking after 10 seconds
+    setTimeout(() => clearInterval(checkInterval), 10000)
+  }
+
+  return {
+    init,
+    onConsentUpdate,
+    connectToCookieConsent
+  }
+}

package/src/core/index.js

@@ -32,7 +32,7 @@ const DEFAULT_CONFIG = {
       label: 'Necesare',
       description: 'Cookie-uri esențiale pentru funcționarea site-ului',
       required: true,
-      locked: true,
+      disabled: true,
       enabled: true
     },
     analytics: {
@@ -40,24 +40,24 @@ const DEFAULT_CONFIG = {
       label: 'Analiză',
       description: 'Cookie-uri pentru analiza traficului și comportamentului utilizatorilor',
       required: false,
-      locked: false,
-      enabled: true
+      disabled: false,
+      enabled: false
     },
     marketing: {
       id: 'marketing',
       label: 'Marketing',
       description: 'Cookie-uri pentru publicitate personalizată',
       required: false,
-      locked: false,
-      enabled: true
+      disabled: false,
+      enabled: false
     },
     preferences: {
       id: 'preferences',
       label: 'Preferințe',
       description: 'Cookie-uri pentru salvarea preferințelor utilizatorului',
       required: false,
-      locked: false,
-      enabled: true
+      disabled: false,
+      enabled: false
     }
   },
   

package/src/index.js

@@ -8,8 +8,12 @@
 // Core functionality
 export { createCookieKit, CookieKitCore, DEFAULT_CONFIG } from './core/index.js'
 
+// Analytics integration
+export { createAnalyticsManager, initGoogleConsentMode, updateGoogleConsent, loadGTM, loadGA4, loadMetaPixel, loadYandexMetrica, blockScriptsBeforeConsent, unblockConsentedScripts, manageScriptBlocking } from './core/analytics.js'
+
 // Import for default export
 import { createCookieKit, CookieKitCore, DEFAULT_CONFIG } from './core/index.js'
+import { createAnalyticsManager } from './core/analytics.js'
 import { initCookieKit } from './js/index.js'
 import { VERSION } from './core/version.js'
 
@@ -62,6 +66,7 @@ export function autoCookieConsent(config = {}) {
 export default {
   createCookieKit,
   createCookieConsent,
+  createAnalyticsManager,
   autoCookieConsent,
   initCookieKit,
   CookieKitCore,

package/src/js/CookieConsent.js

@@ -386,7 +386,6 @@ class CookieConsent extends HTMLElement {
       /* Header */
       .cookie-drawer__header {
         padding: 24px 24px 16px;
-        border-bottom: 1px solid var(--ck-border);
         display: flex;
         justify-content: space-between;
         align-items: flex-start;