feat(docs): consent banner + vue-privacy 1.2.2 with gtag fix (#255)

polaz · web-flow · commit 75eb54b28118 · 2026-01-31T23:07:50.000+02:00
* fix(docs): add ConsentBanner to layout and update vue-privacy to 1.2.2

- Add ConsentBanner to layout-bottom slot (fixes banner not showing)
- Update @structured-world/vue-privacy ^1.1.0 → ^1.2.2
  - Fixes gtag dataLayer.push using Array instead of Arguments
  - Fixes consent banner race condition (bannerPending)

* docs(theme): clarify KV storage endpoint in consent config

- Add comment that /api/consent is served by Cloudflare Worker

* fix(docs): use consentTheme Layout with DefaultTheme fallback

consentTheme may provide its own Layout — using DefaultTheme.Layout
directly bypasses consent-aware layout enhancements.
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,85 +1,30 @@
-import { h, watch, nextTick } from "vue";
+import { h } from "vue";
 import DefaultTheme from "vitepress/theme";
 import type { Theme } from "vitepress";
-import { inBrowser } from "vitepress";
+import { enhanceWithConsent, ConsentBanner } from "@structured-world/vue-privacy/vitepress";
+import { createKVStorage } from "@structured-world/vue-privacy";
 import "./style.css";
 import BugReportWidget from "./components/BugReportWidget.vue";
 
 // GA4 tracking ID - fallback is gitlab-mcp.sw.foundation production property
 const GA_ID = import.meta.env.VITE_GA_ID || "G-RY1XJ7LR5F";
 
-// Declare gtag types
-declare global {
-  interface Window {
-    dataLayer?: unknown[];
-    gtag?: (...args: unknown[]) => void;
-  }
-}
-
-function initGoogleAnalytics() {
-  if (!inBrowser || !GA_ID) return;
-
-  // Avoid duplicate initialization
-  if (window.dataLayer && window.gtag) return;
-
-  // Load gtag script
-  const script = document.createElement("script");
-  script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
-  script.async = true;
-  document.head.appendChild(script);
-
-  // Initialize gtag
-  window.dataLayer = window.dataLayer || [];
-  window.gtag = function (...args: unknown[]) {
-    window.dataLayer!.push(args);
-  };
-
-  // Set default consent - required for GA4 to send data
-  // This grants analytics by default (no ads tracking)
-  window.gtag("consent", "default", {
-    analytics_storage: "granted",
-    ad_storage: "denied",
-    ad_user_data: "denied",
-    ad_personalization: "denied",
-  });
-
-  window.gtag("js", new Date());
-  // Disable automatic page_view - we send manually to track SPA navigation
-  window.gtag("config", GA_ID, { send_page_view: false });
-}
-
-function trackPageView(path: string) {
-  if (!inBrowser || !window.gtag) return;
-
-  window.gtag("event", "page_view", {
-    page_path: path,
-    page_location: window.location.href,
-    page_title: document.title,
-  });
-}
+// Enhance DefaultTheme with GDPR-compliant consent management and SPA page tracking.
+// enhanceWithConsent automatically:
+// - Sets consent defaults (denied for EU, granted for non-EU)
+// - Loads gtag.js with send_page_view: false (SPA mode)
+// - Tracks initial page view and watches router for SPA navigations
+const consentTheme = enhanceWithConsent(DefaultTheme, {
+  gaId: GA_ID,
+  // KV storage via Cloudflare Worker (vue-privacy-worker) at gitlab-mcp.sw.foundation/api/consent*
+  storage: createKVStorage("/api/consent"),
+});
 
 export default {
-  extends: DefaultTheme,
+  ...consentTheme,
   Layout() {
-    return h(DefaultTheme.Layout, null, {
-      "layout-bottom": () => h(BugReportWidget),
+    return h(consentTheme.Layout ?? DefaultTheme.Layout, null, {
+      "layout-bottom": () => [h(ConsentBanner), h(BugReportWidget)],
     });
   },
-  enhanceApp({ router }) {
-    if (inBrowser) {
-      initGoogleAnalytics();
-
-      // Track initial page view after DOM is ready
-      nextTick(() => trackPageView(window.location.pathname));
-
-      // Track subsequent SPA navigations
-      watch(
-        () => router.route.path,
-        (path: string) => {
-          // Wait for Vue to update DOM (including document.title) before tracking
-          nextTick(() => trackPageView(path));
-        }
-      );
-    }
-  },
 } satisfies Theme;
diff --git a/package.json b/package.json
@@ -468,6 +468,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.2",
     "@semantic-release/npm": "^13.1.3",
+    "@structured-world/vue-privacy": "^1.2.2",
     "@types/express": "^5.0.6",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.10.9",
diff --git a/yarn.lock b/yarn.lock
@@ -2627,6 +2627,7 @@ __metadata:
     "@semantic-release/git": "npm:^10.0.1"
     "@semantic-release/github": "npm:^12.0.2"
     "@semantic-release/npm": "npm:^13.1.3"
+    "@structured-world/vue-privacy": "npm:^1.2.2"
     "@types/express": "npm:^5.0.6"
     "@types/jest": "npm:^30.0.0"
     "@types/node": "npm:^24.10.9"
@@ -2664,6 +2665,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@structured-world/vue-privacy@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "@structured-world/vue-privacy@npm:1.2.2"
+  peerDependencies:
+    vue: ^3.3.0
+    vue-router: ^4.0.0
+  peerDependenciesMeta:
+    vue:
+      optional: true
+    vue-router:
+      optional: true
+  checksum: 10c0/8feb5fa57431eb9dc6e180e24ef6c06fe568ee94147fa11bad7f31d45e668134c08061ad181c65b24a0ca96f716145fa6917fea41d96cd8f1d3c33f19e92cd8c
+  languageName: node
+  linkType: hard
+
 "@tsconfig/node10@npm:^1.0.7":
   version: 1.0.11
   resolution: "@tsconfig/node10@npm:1.0.11"
