fix(googleTagManager): push consent as arguments to dataLayer (#771)

buffalom · motion-work · web-flow · commit fc3981bc6f57 · 2026-05-14T13:37:32.000+10:00
Co-authored-by: motion-work &lt;11538632+motion-work@users.noreply.github.com&gt;
diff --git a/packages/script/src/runtime/registry/google-tag-manager.ts b/packages/script/src/runtime/registry/google-tag-manager.ts
@@ -81,7 +81,7 @@ export { GoogleTagManagerOptions }
 export type GoogleTagManagerInput = RegistryScriptInput<typeof GoogleTagManagerOptions>
 
 export interface GoogleTagManagerConsent {
-  /** Push `['consent','update', state]` onto dataLayer with GCMv2 partial state. */
+  /** Send `gtag('consent','update', state)` so the dataLayer receives consent command (GCMv2 partial state). */
   update: (state: ConsentState) => void
 }
 
@@ -97,6 +97,8 @@ export function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(
     onBeforeGtmStart?: (gtag: DataLayerPush) => void
   },
 ): UseScriptContext<UseFunctionType<NuxtUseScriptOptions<T>, T>, GoogleTagManagerConsent> {
+  const consentDataLayerName = options?.l ?? options?.dataLayer ?? 'dataLayer'
+
   const instance = useRegistryScript<T, typeof GoogleTagManagerOptions>(
     options?.key || 'googleTagManager',
     (opts) => {
@@ -132,10 +134,13 @@ export function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(
               // Initialize dataLayer if it doesn't exist
               (window as any)[dataLayerName] = (window as any)[dataLayerName] || []
 
-              // Create gtag function
-              function gtag(...args: any[]) {
-                // Pushing arguments to dataLayer is necessary for GTM to process events
-                (window as any)[dataLayerName].push(args)
+              // Create gtag function (must push the real `arguments` object —
+              // not a spread array — so GTM processes consent and
+              // other commands like the official snippet)
+              function gtag(..._args: any[]) {
+                // Rest params satisfy TypeScript call sites; gtm expects `arguments` on the queue.
+                // eslint-disable-next-line prefer-rest-params
+                (window as any)[dataLayerName].push(arguments)
               }
 
               // Assign gtag to window for global access
@@ -176,7 +181,15 @@ export function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(
   if (import.meta.client && !typed.consent) {
     typed.consent = {
       update: (state: ConsentState) => {
-        ;((typed.proxy as unknown as GoogleTagManagerApi).dataLayer as any).push(['consent', 'update', state])
+        const dl = (window as any)[consentDataLayerName] = (window as any)[consentDataLayerName] || []
+        // Must push the real `arguments` object — not a
+        // spread array — so GTM processes consent and
+        // other commands like the official snippet
+        ;(function (..._args: any[]) {
+          // Rest params satisfy TypeScript call sites; gtm expects `arguments` on the queue.
+          // eslint-disable-next-line prefer-rest-params
+          dl.push(arguments)
+        })('consent', 'update', state)
       },
     }
   }
diff --git a/test/nuxt-runtime/consent-default.nuxt.test.ts b/test/nuxt-runtime/consent-default.nuxt.test.ts
@@ -51,6 +51,18 @@ vi.mock('../../packages/script/src/runtime/composables/useScriptEventPage', () =
   useScriptEventPage: vi.fn(),
 }))
 
+/** `gtag()` queues the Arguments object; `dataLayer.push([...])` uses a real Array. */
+function gtmConsentCommandParts(e: any): [string, string, any?] | null {
+  if (e == null || typeof e !== 'object')
+    return null
+  if (!Array.isArray(e) && !('length' in e && typeof (e as any).length === 'number'))
+    return null
+  const row = Array.isArray(e) ? e : Array.from(e as ArrayLike<any>)
+  if (row[0] !== 'consent')
+    return null
+  return [row[0] as string, row[1] as string, row[2]]
+}
+
 describe('consent defaults — clientInit ordering', () => {
   beforeEach(() => {
     delete (window as any).dataLayer
@@ -72,13 +84,14 @@ describe('consent defaults — clientInit ordering', () => {
     const dl = (window as any).dataLayer as any[]
     expect(Array.isArray(dl)).toBe(true)
 
-    const consentIdx = dl.findIndex(e => Array.isArray(e) && e[0] === 'consent' && e[1] === 'default')
+    const consentIdx = dl.findIndex(e => gtmConsentCommandParts(e)?.[1] === 'default')
     const startIdx = dl.findIndex(e => e && typeof e === 'object' && !Array.isArray(e) && e.event === 'gtm.js')
 
     expect(consentIdx).toBeGreaterThanOrEqual(0)
     expect(startIdx).toBeGreaterThanOrEqual(0)
     expect(consentIdx).toBeLessThan(startIdx)
-    expect(dl[consentIdx][2]).toMatchObject({ analytics_storage: 'denied', ad_storage: 'denied' })
+    const consentRow = gtmConsentCommandParts(dl[consentIdx])
+    expect(consentRow?.[2]).toMatchObject({ analytics_storage: 'denied', ad_storage: 'denied' })
   })
 
   it('gtm: array form fires multiple ["consent","default",…] entries in input order, all before gtm.js', async () => {
@@ -98,14 +111,14 @@ describe('consent defaults — clientInit ordering', () => {
 
     const consentEntries = dl
       .map((e, i) => ({ e, i }))
-      .filter(({ e }) => Array.isArray(e) && e[0] === 'consent' && e[1] === 'default')
+      .filter(({ e }) => gtmConsentCommandParts(e)?.[1] === 'default')
     const startIdx = dl.findIndex(e => e && typeof e === 'object' && !Array.isArray(e) && e.event === 'gtm.js')
 
     expect(consentEntries).toHaveLength(2)
     expect(startIdx).toBeGreaterThanOrEqual(0)
     for (const { i } of consentEntries) expect(i).toBeLessThan(startIdx)
-    expect(consentEntries[0].e[2]).toMatchObject({ analytics_storage: 'denied', region: ['ES', 'US-AK'], wait_for_update: 500 })
-    expect(consentEntries[1].e[2]).toMatchObject({ ad_storage: 'denied' })
+    expect(gtmConsentCommandParts(consentEntries[0].e)?.[2]).toMatchObject({ analytics_storage: 'denied', region: ['ES', 'US-AK'], wait_for_update: 500 })
+    expect(gtmConsentCommandParts(consentEntries[1].e)?.[2]).toMatchObject({ ad_storage: 'denied' })
   })
 
   it('gtm: single-entry array is observationally equivalent to a bare object', async () => {
@@ -120,6 +133,14 @@ describe('consent defaults — clientInit ordering', () => {
       // Slice up to (but not including) gtm.js — the entry carries a Date.now() timestamp
       // that differs between calls. Ordering relative to gtm.js is locked by the sibling test.
       return dl.slice(0, startIdx)
+        // `gtag()` pushes the Arguments object onto dataLayer, so each run yields distinct exotic
+        // objects. Normalize array-like rows to real arrays so `toEqual` compares values only,
+        // not Arguments identity or matcher quirks across two separate `clientInit` runs.
+        .map(e =>
+          e != null && typeof e === 'object' && !Array.isArray(e) && 'length' in e && typeof (e as any).length === 'number'
+            ? Array.from(e as ArrayLike<any>)
+            : e,
+        )
     }
 
     const fromObject = runWith({ ad_storage: 'denied' })
@@ -135,13 +156,32 @@ describe('consent defaults — clientInit ordering', () => {
     result._opts.clientInit()
 
     const dl = (window as any).dataLayer as any[]
-    const consentEntries = dl.filter(e => Array.isArray(e) && e[0] === 'consent' && e[1] === 'default')
+    const consentEntries = dl.filter(e => gtmConsentCommandParts(e)?.[1] === 'default')
     const startIdx = dl.findIndex(e => e && typeof e === 'object' && !Array.isArray(e) && e.event === 'gtm.js')
 
     expect(consentEntries).toHaveLength(0)
     expect(startIdx).toBeGreaterThanOrEqual(0)
   })
 
+  it('gtm: defaultConsent via gtag queues Arguments, not a plain Array (gtag.js contract)', async () => {
+    const { useScriptGoogleTagManager } = await import('../../packages/script/src/runtime/registry/google-tag-manager')
+    const result: any = useScriptGoogleTagManager({
+      id: 'GTM-XXXX',
+      defaultConsent: { analytics_storage: 'denied' },
+    })
+
+    result._opts.clientInit()
+
+    const dl = (window as any).dataLayer as any[]
+    const entry = dl.find(e => gtmConsentCommandParts(e)?.[1] === 'default')
+    expect(entry).toBeDefined()
+    expect(Array.isArray(entry)).toBe(false)
+    const parts = Array.from(entry as ArrayLike<any>)
+    expect(parts[0]).toBe('consent')
+    expect(parts[1]).toBe('default')
+    expect(parts[2]).toMatchObject({ analytics_storage: 'denied' })
+  })
+
   it('matomo: "required" pushes requireConsent before setSiteId', async () => {
     ;(window as any)._paq = []
     const { useScriptMatomoAnalytics } = await import('../../packages/script/src/runtime/registry/matomo-analytics')
@@ -339,14 +379,17 @@ describe('per-script consent object', () => {
     expect(updateArgs?.[2]).toEqual({ ad_storage: 'granted' })
   })
 
-  it('gtm: consent.update() pushes ["consent","update", state] onto dataLayer', async () => {
+  it('gtm: consent.update() queues Arguments(consent, update, state) to dataLayer', async () => {
     ;(window as any).dataLayer = []
     const { useScriptGoogleTagManager } = await import('../../packages/script/src/runtime/registry/google-tag-manager')
     const result: any = useScriptGoogleTagManager({ id: 'GTM-XXXX' })
     result._opts.clientInit()
     result.consent.update({ analytics_storage: 'granted' })
     const dl = (window as any).dataLayer as any[]
-    expect(dl).toContainEqual(['consent', 'update', { analytics_storage: 'granted' }])
+    const entry = dl.find(e => gtmConsentCommandParts(e)?.[1] === 'update')
+    expect(entry).toBeDefined()
+    expect(Array.isArray(entry)).toBe(false)
+    expect(gtmConsentCommandParts(entry)).toEqual(['consent', 'update', { analytics_storage: 'granted' }])
   })
 
   it('meta: consent.grant()/revoke() queue fbq(\'consent\', ...) calls', async () => {
