fix: posthog accept

Author: wug-ge

frontend/app/plugins/posthog.client.ts

@@ -1,86 +1,51 @@
-import { defineNuxtPlugin } from '#app'
 import posthog from 'posthog-js'
 
-type ConsentPayload = {
-  // common shape: { categories: { necessary: true, analytics: false, ... } }
-  categories?: Record<string, boolean>
-  // some configs use "services"
-  services?: Record<string, boolean>
-  // some store directly as { analytics: true }
-  [k: string]: any
-}
-
-function hasAnalyticsConsent(raw: string | undefined, analyticsKey = 'analytics') {
-  if (!raw) return false
-
-  try {
-    const parsed: ConsentPayload = JSON.parse(raw)
-
-    if (typeof parsed[analyticsKey] === 'boolean') return parsed[analyticsKey]
-    if (parsed.categories && typeof parsed.categories[analyticsKey] === 'boolean') return parsed.categories[analyticsKey]
-    if (parsed.services && typeof parsed.services[analyticsKey] === 'boolean') return parsed.services[analyticsKey]
-
-    return false
-  } catch {
-    // if it’s not JSON, treat as no consent
-    return false
+export default defineNuxtPlugin((nuxtApp) => {
+  // 1) Init PostHog in a safe mode first (no cookies until consent)
+  posthog.init(useRuntimeConfig().public.posthogKey, {
+    api_host: useRuntimeConfig().public.posthogHost,
+    // recommended: keep pageview manual so you can gate it
+    capture_pageview: false,
+    // If you use PostHog cookieless mode, you can set it here (see PostHog docs/tutorial)
+    // cookieless: 'on_reject',
+  }) // :contentReference[oaicite:2]{index=2}
+
+  const enable = () => {
+    posthog.opt_in_capturing()
+    posthog.capture('$pageview')
   }
-}
-
-export default defineNuxtPlugin(() => {
-  const runtimeConfig = useRuntimeConfig()
-
-  // IMPORTANT: set this to the cookie name you configured in nuxt-cookie-consent
-  const CONSENT_COOKIE_NAME = 'cookie_consent' // <-- adjust if your config uses a different name
-  const consentRaw = useCookie<string | undefined>(CONSENT_COOKIE_NAME)
-
-  let inited = false
 
-  const init = () => {
-    if (inited) return
-    inited = true
+  const disable = () => {
+    posthog.opt_out_capturing()
+  }
 
-    posthog.init(runtimeConfig.public.posthogPublicKey, {
-      api_host: runtimeConfig.public.posthogHost,
-      defaults: runtimeConfig.public.posthogDefaults,
+  const applyFromCookieScript = () => {
+    // Wait for CookieScriptLoaded before using instance functions
+    // currentState() gives { action: 'accept'|'reject', categories: [...] }
+    // :contentReference[oaicite:3]{index=3}
+    // @ts-expect-error CookieScript is global
+    const state = window.CookieScript?.instance?.currentState?.()
+    if (!state) return
 
-      person_profiles: 'identified_only',
-      capture_pageview: false,          // avoid firing before you decide
-      respect_dnt: true,
-      disable_session_recording: true,
+    // Pick the category you map analytics to (commonly "performance")
+    const analyticsAllowed =
+      state.action === 'accept' && Array.isArray(state.categories) && state.categories.includes('performance')
 
-      loaded: (ph) => {
-        if (import.meta.env.MODE === 'development') ph.debug()
-        ph.capture('$pageview')
-      }
-    })
+    if (analyticsAllowed) enable()
+    else disable()
   }
 
-  const shutdown = () => {
-    // user withdrew consent
-    posthog.opt_out_capturing()
-    posthog.reset()
-    inited = false
-  }
+  // 2) Update PostHog when CookieScript is ready + whenever consent changes
+  window.addEventListener('CookieScriptLoaded', applyFromCookieScript) // :contentReference[oaicite:4]{index=4}
+  window.addEventListener('CookieScriptAcceptAll', enable) // :contentReference[oaicite:5]{index=5}
+  window.addEventListener('CookieScriptReject', disable) // :contentReference[oaicite:6]{index=6}
+  window.addEventListener('CookieScriptAccept', applyFromCookieScript) // e.detail.categories exists :contentReference[oaicite:7]{index=7}
 
-  // init if already consented
-  if (hasAnalyticsConsent(consentRaw.value)) init()
+  // Optional: if you only care about analytics category, this fires once per page when allowed:
+  window.addEventListener('CookieScriptCategory-performance', enable) // :contentReference[oaicite:8]{index=8}
 
-  // react to consent changes
-  watch(
-    () => consentRaw.value,
-    (val, oldVal) => {
-      const now = hasAnalyticsConsent(val)
-      const before = hasAnalyticsConsent(oldVal)
-
-      if (now && !before) init()
-      if (!now && before) shutdown()
-    }
-  )
-
-  return {
-    provide: {
-      posthog
-    }
-  }
+  // 3) Gate SPA pageviews
+  nuxtApp.$router.afterEach(() => {
+    if (posthog.has_opted_in_capturing?.()) posthog.capture('$pageview')
+  }) // :contentReference[oaicite:9]{index=9}
 })