Replace Cookiebot with Usercentrics

Author: nortonandreev

docs/.vuepress/client.ts

@@ -51,7 +51,7 @@ const findEsMeta = (route: RouteLocationNormalized) => {
 
 const removeHtml = (path: string) => path.replace(".html", "");
 
-let cookiebotListenerRegistered = false;
+let usercentricsConsentListenerRegistered = false;
 
 
 export default defineClientConfig({
@@ -62,8 +62,8 @@ export default defineClientConfig({
         const { hasConsent, posthog } = usePostHog();
         useReoDev();
 
-        const captureEvent = (event: string, properties?: Record<string, any>) => {
-            if (!hasConsent()) return;
+        const captureEvent = async (event: string, properties?: Record<string, any>) => {
+            if (!await hasConsent()) return;
             try {
                 posthog.capture(event, properties);
             } catch (error) {
@@ -114,21 +114,21 @@ export default defineClientConfig({
             handlePageLeave(to, from)
         });
 
-        // Capture first pageview immediately after user accepts statistics cookies
-        if (typeof window !== "undefined" && !cookiebotListenerRegistered) {
-            cookiebotListenerRegistered = true;
-            window.addEventListener("CookiebotOnAccept", () => {
-                if (!hasConsent()) return;
-
+        // Capture first pageview when consent is given (UC_CONSENT) or when CMP is ready with existing consent (UC_UI_INITIALIZED)
+        if (typeof window !== "undefined" && !usercentricsConsentListenerRegistered) {
+            usercentricsConsentListenerRegistered = true;
+            const capturePageViewOnConsent = async () => {
+                if (!await hasConsent()) return;
                 const to = router.currentRoute.value;
                 const esData = findEsMeta(to);
-
                 captureEvent("$pageview", {
                     site: "docs",
                     version: esData?.version,
                     category: esData?.category,
-                    });
-            });
+                });
+            };
+            window.addEventListener("UC_CONSENT", capturePageViewOnConsent);
+            window.addEventListener("UC_UI_INITIALIZED", capturePageViewOnConsent);
         }
 
 

docs/.vuepress/config.ts

@@ -81,20 +81,11 @@ export default defineUserConfig({
     },
     theme: hopeTheme(themeOptions, {custom: true}),
     head: [
-        // Cookiebot banner
+        // Usercentrics CMP
         ['script', {
-            id: 'Cookiebot',
-            src: 'https://consent.cookiebot.com/uc.js',
-            'data-cbid': 'ee971b30-e872-46e8-b421-706ef26d9dcc',
-            'data-blockingmode': 'manual',
-            type: 'text/javascript',
-        }],
-
-        // Cookiebot declaration
-        ['script', {
-            id: 'CookieDeclaration',
-            src: 'https://consent.cookiebot.com/ee971b30-e872-46e8-b421-706ef26d9dcc/cd.js',
-            type: 'text/javascript',
+            id: 'usercentrics-cmp',
+            src: 'https://web.cmp.usercentrics.eu/ui/loader.js',
+            'data-settings-id': 'ArWRikBAz-iKhj',
             async: true,
         }],
 

docs/.vuepress/lib/consent.ts

@@ -1,24 +1,47 @@
-// Type declarations for Cookiebot
+// Usercentrics Browser UI API (getServices was removed; use getServicesBaseInfo)
+// https://usercentrics.com/docs/web/features/v2/browser_ui_api/browser_ui_api/#getservices
+
 declare global {
   interface Window {
-    Cookiebot?: {
-      consent?: {
-        necessary?: boolean;
-        preferences?: boolean;
-        statistics?: boolean;
-        marketing?: boolean;
-      };
-      renew?: () => void;
-      withdraw?: () => void;
+    UC_UI?: {
+      getServicesBaseInfo?: () => Promise<Array<{
+        id: string;
+        categorySlug: string;
+        consent: { status: boolean };
+      }>>;
+      isInitialized?: () => boolean;
     };
   }
 }
 
-/**
- * Checks if the user has given consent for statistics cookies.
- * This is used for analytics tools like PostHog and Reo.dev.
- */
-export function hasStatisticsConsent(): boolean {
+async function hasConsentForCategory(categorySlug: string): Promise<boolean> {
   if (typeof window === "undefined") return false;
-  return window.Cookiebot?.consent?.statistics === true;
+  const ui = window.UC_UI;
+  
+  if (!ui?.getServicesBaseInfo) {
+    return false;
+  }
+
+  try {
+    const services = await ui.getServicesBaseInfo();
+    
+    if (!Array.isArray(services)) return false;
+    
+    return services.some(
+      (s) => s.categorySlug.toLowerCase() === categorySlug.toLowerCase() && s.consent?.status === true
+    );
+  } catch (e) {
+    console.error("[Consent] Error checking consent:", e);
+    return false;
+  }
+}
+
+/** PostHog uses the functional category in Usercentrics. */
+export function hasFunctionalConsent(): Promise<boolean> {
+  return hasConsentForCategory("functional");
+}
+
+/** Reo.dev uses the marketing category in Usercentrics. */
+export function hasMarketingConsent(): Promise<boolean> {
+  return hasConsentForCategory("marketing");
 }

docs/.vuepress/lib/usePosthog.ts

@@ -1,5 +1,5 @@
 import posthog from "posthog-js";
-import { hasStatisticsConsent } from "./consent";
+import { hasFunctionalConsent } from "./consent";
 
 const POSTHOG_CONFIG = {
   apiKey: "phc_DeHBgHGersY4LmDlADnPrsCPOAmMO7QFOH8f4DVEVmD",
@@ -48,37 +48,35 @@ function setupConsentListeners(): void {
   if (listenersRegistered) return;
   listenersRegistered = true;
 
-  window.addEventListener("CookiebotOnAccept", () => {
-    if (hasStatisticsConsent()) {
+  const applyConsent = async () => {
+    if (await hasFunctionalConsent()) {
       resumeTracking();
     } else {
       stopTracking();
     }
-  });
+  };
 
-  window.addEventListener("CookiebotOnDecline", () => {
-    stopTracking();
+  window.addEventListener("UC_CONSENT", () => {
+    applyConsent();
   });
 
-  window.addEventListener("CookiebotOnConsentReady", () => {
-    if (hasStatisticsConsent()) {
-      resumeTracking();
-    } else {
-      stopTracking();
-    }
+  window.addEventListener("UC_UI_INITIALIZED", () => {
+    applyConsent();
   });
 }
 
 export function usePostHog() {
   if (typeof window !== "undefined") {
     setupConsentListeners();
-    if (hasStatisticsConsent()) {
-      initializePostHog();
-    }
+    hasFunctionalConsent().then((consented) => {
+      if (consented) {
+        initializePostHog();
+      }
+    });
   }
 
   return {
     posthog,
-    hasConsent: hasStatisticsConsent,
+    hasConsent: hasFunctionalConsent,
   };
 }

docs/.vuepress/lib/useReoDev.ts

@@ -1,5 +1,5 @@
 import { loadReoScript } from "reodotdev";
-import { hasStatisticsConsent } from "./consent";
+import { hasMarketingConsent } from "./consent";
 
 let listenersRegistered = false;
 let isInitialized = false;
@@ -67,7 +67,7 @@ function stopReoDev(): void {
 
 async function initializeReoDev(): Promise<void> {
   if (typeof window === "undefined") return;
-  if (!hasStatisticsConsent()) return;
+  if (!await hasMarketingConsent()) return;
   if (isInitialized || reoInstance || reoPromise || typeof window.Reo !== 'undefined') return;
 
   try {
@@ -84,18 +84,27 @@ async function initializeReoDev(): Promise<void> {
 }
 
 function applyConsentState(): void {
-  if (hasStatisticsConsent()) void initializeReoDev();
-  else stopReoDev();
+  hasMarketingConsent().then((consented) => {
+    if (consented) {
+      void initializeReoDev();
+    } else {
+      stopReoDev();
+    }
+  });
 }
 
 function setupConsentListeners(): void {
   if (typeof window === "undefined") return;
   if (listenersRegistered) return;
   listenersRegistered = true;
 
-  window.addEventListener("CookiebotOnAccept", applyConsentState);
-  window.addEventListener("CookiebotOnDecline", applyConsentState);
-  window.addEventListener("CookiebotOnConsentReady", applyConsentState);
+  window.addEventListener("UC_CONSENT", () => {
+    applyConsentState();
+  });
+
+  window.addEventListener("UC_UI_INITIALIZED", () => {
+    applyConsentState();
+  });
 }
 
 export function useReoDev() {
@@ -105,7 +114,7 @@ export function useReoDev() {
   }
 
   return {
-    hasConsent: hasStatisticsConsent,
+    hasConsent: hasMarketingConsent,
     init: initializeReoDev,
   };
 }