srcdev-nuxt-components 9.4.1 → 9.4.2

package/.claude/skills/composable-google-analytics.md

@@ -60,9 +60,9 @@ export const useGoogleAnalytics = () => {
     return;
   }
 
-  const { trigger } = useCookieConsent();
+  const { status, trigger } = useCookieConsent();
 
-  useScriptGoogleAnalytics({
+  const { consent } = useScriptGoogleAnalytics({
     id,
     scriptOptions: { trigger },
     defaultConsent: {
@@ -72,13 +72,31 @@ export const useGoogleAnalytics = () => {
       analytics_storage: "denied",
     },
   });
+
+  // trigger only gates whether gtag.js *loads* — consent.update() is the separate API that
+  // actually reports the visitor's decision back to gtag.js for every hit it sends.
+  watch(
+    status,
+    (value) => {
+      if (value === "unset" || !consent) return;
+      const granted = value === "granted";
+      consent.update({
+        ad_storage: granted ? "granted" : "denied",
+        ad_user_data: granted ? "granted" : "denied",
+        ad_personalization: granted ? "granted" : "denied",
+        analytics_storage: granted ? "granted" : "denied",
+      });
+    },
+    { immediate: true }
+  );
 };
 ```
 
 ### Key rules
 
 - **`useRuntimeConfig()` inside the function body**, not module scope — same reasoning as `useWhatsApp` (see [[composable-whatsapp]]).
-- **`defaultConsent` is all `"denied"`** — this is what makes the script Consent Mode v2 compliant: gtag.js can load (if triggered) but won't set cookies or send identifiable pings until `useCookieConsent().acceptAll()` calls `trigger.accept()`, which flips consent to granted via `@nuxt/scripts`' own consent-update wiring.
+- **`defaultConsent` is all `"denied"`** — sets the initial Consent Mode v2 state before gtag.js has any real signal. `trigger` (passed to `scriptOptions.trigger`) only controls when the script *loads*; it does **not** itself update the Consent Mode signals. Without the `consent.update()` watcher, hits fire successfully once loaded but stay tagged as denied forever, which GA4 excludes from standard reporting — this was a real bug (hits visible in Network, "no data received" in the GA4 dashboard) until the watcher was added.
+- The `watch(status, ..., { immediate: true })` also covers a returning visitor whose `cookie-consent` cookie already says "granted" on this page load, before any click happens.
 - Does not return anything — it's a side-effecting setup call, not a value composable. Read GA-related state (if ever needed) via `useCookieConsent()` instead.
 
 ## Notes

package/app/composables/tests/useGoogleAnalytics.spec.ts

@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { nextTick, ref } from "vue";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+
+const { useRuntimeConfigMock, updateSpy, useScriptGoogleAnalyticsMock } = vi.hoisted(() => ({
+  useRuntimeConfigMock: vi.fn(() => ({ public: { googleAnalytics: { id: "" } }, app: { baseURL: "/" } })),
+  updateSpy: vi.fn(),
+  useScriptGoogleAnalyticsMock: vi.fn(() => ({ consent: { update: updateSpy, default: vi.fn() } })),
+}));
+
+const statusRef = ref<"unset" | "granted" | "denied">("unset");
+const trigger = { consented: ref(false), accept: vi.fn(), revoke: vi.fn() };
+
+mockNuxtImport("useRuntimeConfig", () => useRuntimeConfigMock);
+mockNuxtImport("useScriptGoogleAnalytics", () => useScriptGoogleAnalyticsMock);
+mockNuxtImport("useCookieConsent", () => () => ({ status: statusRef, trigger }));
+
+const { useGoogleAnalytics } = await import("../useGoogleAnalytics");
+
+describe("useGoogleAnalytics", () => {
+  beforeEach(() => {
+    statusRef.value = "unset";
+    updateSpy.mockClear();
+    useScriptGoogleAnalyticsMock.mockClear();
+    useRuntimeConfigMock.mockReturnValue({ public: { googleAnalytics: { id: "" } }, app: { baseURL: "/" } });
+  });
+
+  it("warns and does nothing when googleAnalytics.id is unconfigured", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    useGoogleAnalytics();
+    expect(warnSpy).toHaveBeenCalledWith("[useGoogleAnalytics] public.googleAnalytics.id is not configured");
+    expect(useScriptGoogleAnalyticsMock).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it("calls useScriptGoogleAnalytics with the configured id and defaultConsent denied", () => {
+    useRuntimeConfigMock.mockReturnValue({ public: { googleAnalytics: { id: "G-TEST123" } }, app: { baseURL: "/" } });
+    useGoogleAnalytics();
+    expect(useScriptGoogleAnalyticsMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "G-TEST123",
+        defaultConsent: {
+          ad_storage: "denied",
+          ad_user_data: "denied",
+          ad_personalization: "denied",
+          analytics_storage: "denied",
+        },
+      })
+    );
+  });
+
+  it("does not call consent.update() while status is 'unset'", () => {
+    useRuntimeConfigMock.mockReturnValue({ public: { googleAnalytics: { id: "G-TEST123" } }, app: { baseURL: "/" } });
+    useGoogleAnalytics();
+    expect(updateSpy).not.toHaveBeenCalled();
+  });
+
+  it("calls consent.update() with all signals granted once status becomes 'granted'", async () => {
+    useRuntimeConfigMock.mockReturnValue({ public: { googleAnalytics: { id: "G-TEST123" } }, app: { baseURL: "/" } });
+    useGoogleAnalytics();
+    statusRef.value = "granted";
+    await nextTick();
+    expect(updateSpy).toHaveBeenCalledWith({
+      ad_storage: "granted",
+      ad_user_data: "granted",
+      ad_personalization: "granted",
+      analytics_storage: "granted",
+    });
+  });
+
+  it("calls consent.update() with all signals denied when status becomes 'denied'", async () => {
+    useRuntimeConfigMock.mockReturnValue({ public: { googleAnalytics: { id: "G-TEST123" } }, app: { baseURL: "/" } });
+    useGoogleAnalytics();
+    statusRef.value = "denied";
+    await nextTick();
+    expect(updateSpy).toHaveBeenCalledWith({
+      ad_storage: "denied",
+      ad_user_data: "denied",
+      ad_personalization: "denied",
+      analytics_storage: "denied",
+    });
+  });
+
+  it("immediately reports consent.update() for a returning visitor already granted", () => {
+    useRuntimeConfigMock.mockReturnValue({ public: { googleAnalytics: { id: "G-TEST123" } }, app: { baseURL: "/" } });
+    statusRef.value = "granted";
+    useGoogleAnalytics();
+    expect(updateSpy).toHaveBeenCalledWith(expect.objectContaining({ analytics_storage: "granted" }));
+  });
+});

package/app/composables/useGoogleAnalytics.ts

@@ -11,9 +11,9 @@ export const useGoogleAnalytics = () => {
     return;
   }
 
-  const { trigger } = useCookieConsent();
+  const { status, trigger } = useCookieConsent();
 
-  useScriptGoogleAnalytics({
+  const { consent } = useScriptGoogleAnalytics({
     id,
     scriptOptions: { trigger },
     defaultConsent: {
@@ -23,4 +23,26 @@ export const useGoogleAnalytics = () => {
       analytics_storage: "denied",
     },
   });
+
+  // `trigger` above only gates whether gtag.js *loads* — it does not itself flip the Consent
+  // Mode v2 signals gtag.js reports alongside every hit. Without this, hits fire successfully
+  // (visible in Network) but stay tagged with defaultConsent's "denied" state forever, which
+  // GA4 excludes from standard reporting — confirmed via a real hit's gcs=G100/pscdl=denied
+  // query params still showing after accepting, 2026-09-06. `consent.update()` is the separate
+  // API that actually reports the visitor's decision back to gtag.js; `immediate: true` also
+  // covers a returning visitor whose cookie already says "granted" on this page load.
+  watch(
+    status,
+    (value) => {
+      if (value === "unset" || !consent) return;
+      const granted = value === "granted";
+      consent.update({
+        ad_storage: granted ? "granted" : "denied",
+        ad_user_data: granted ? "granted" : "denied",
+        ad_personalization: granted ? "granted" : "denied",
+        analytics_storage: granted ? "granted" : "denied",
+      });
+    },
+    { immediate: true }
+  );
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",