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

Co-authored-by: motion-work <11538632+motion-work@users.noreply.github.com>

Author: buffalom

packages/script/src/runtime/registry/google-tag-manager.ts

@@ -81,7 +81,7 @@ export { GoogleTagManagerOptions }
 exporttypeGoogleTagManagerInput=RegistryScriptInput<typeofGoogleTagManagerOptions>
 
 exportinterfaceGoogleTagManagerConsent{
-/** 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>{
+constconsentDataLayerName=options?.l??options?.dataLayer??'dataLayer'
+
 constinstance=useRegistryScript<T,typeofGoogleTagManagerOptions>(
 options?.key||'googleTagManager',
 (opts)=>{
@@ -132,10 +134,13 @@ export function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(
 // Initialize dataLayer if it doesn't exist
 (windowasany)[dataLayerName]=(windowasany)[dataLayerName]||[]
 
-// Create gtag function
-functiongtag(...args: any[]){
-// Pushing arguments to dataLayer is necessary for GTM to process events
-(windowasany)[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)
+functiongtag(..._args: any[]){
+// Rest params satisfy TypeScript call sites; gtm expects `arguments` on the queue.
+// eslint-disable-next-line prefer-rest-params
+(windowasany)[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.proxyasunknownasGoogleTagManagerApi).dataLayerasany).push(['consent','update',state])
+constdl=(windowasany)[consentDataLayerName]=(windowasany)[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)
 },
 }
 }

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. */
+functiongtmConsentCommandParts(e: any): [string,string,any?]|null{
+if(e==null||typeofe!=='object')
+returnnull
+if(!Array.isArray(e)&&!('length'ine&&typeof(easany).length==='number'))
+returnnull
+constrow=Array.isArray(e) ? e : Array.from(easArrayLike<any>)
+if(row[0]!=='consent')
+returnnull
+return[row[0]asstring,row[1]asstring,row[2]]
+}
+
 describe('consent defaults — clientInit ordering',()=>{
 beforeEach(()=>{
 delete(windowasany).dataLayer
@@ -72,13 +84,14 @@ describe('consent defaults — clientInit ordering', () => {
 constdl=(windowasany).dataLayerasany[]
 expect(Array.isArray(dl)).toBe(true)
 
-constconsentIdx=dl.findIndex(e=>Array.isArray(e)&&e[0]==='consent'&&e[1]==='default')
+constconsentIdx=dl.findIndex(e=>gtmConsentCommandParts(e)?.[1]==='default')
 conststartIdx=dl.findIndex(e=>e&&typeofe==='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'})
+constconsentRow=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', () => {
 
 constconsentEntries=dl
 .map((e,i)=>({ e, i }))
-.filter(({ e })=>Array.isArray(e)&&e[0]==='consent'&&e[1]==='default')
+.filter(({ e })=>gtmConsentCommandParts(e)?.[1]==='default')
 conststartIdx=dl.findIndex(e=>e&&typeofe==='object'&&!Array.isArray(e)&&e.event==='gtm.js')
 
 expect(consentEntries).toHaveLength(2)
 expect(startIdx).toBeGreaterThanOrEqual(0)
 for(const{ i }ofconsentEntries)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.
 returndl.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&&typeofe==='object'&&!Array.isArray(e)&&'length'ine&&typeof(easany).length==='number'
+ ? Array.from(easArrayLike<any>)
+ : e,
+)
 }
 
 constfromObject=runWith({ad_storage: 'denied'})
@@ -135,13 +156,32 @@ describe('consent defaults — clientInit ordering', () => {
 result._opts.clientInit()
 
 constdl=(windowasany).dataLayerasany[]
-constconsentEntries=dl.filter(e=>Array.isArray(e)&&e[0]==='consent'&&e[1]==='default')
+constconsentEntries=dl.filter(e=>gtmConsentCommandParts(e)?.[1]==='default')
 conststartIdx=dl.findIndex(e=>e&&typeofe==='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 }=awaitimport('../../packages/script/src/runtime/registry/google-tag-manager')
+constresult: any=useScriptGoogleTagManager({
+id: 'GTM-XXXX',
+defaultConsent: {analytics_storage: 'denied'},
+})
+
+result._opts.clientInit()
+
+constdl=(windowasany).dataLayerasany[]
+constentry=dl.find(e=>gtmConsentCommandParts(e)?.[1]==='default')
+expect(entry).toBeDefined()
+expect(Array.isArray(entry)).toBe(false)
+constparts=Array.from(entryasArrayLike<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()=>{
 ;(windowasany)._paq=[]
 const{ useScriptMatomoAnalytics }=awaitimport('../../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()=>{
 ;(windowasany).dataLayer=[]
 const{ useScriptGoogleTagManager }=awaitimport('../../packages/script/src/runtime/registry/google-tag-manager')
 constresult: any=useScriptGoogleTagManager({id: 'GTM-XXXX'})
 result._opts.clientInit()
 result.consent.update({analytics_storage: 'granted'})
 constdl=(windowasany).dataLayerasany[]
-expect(dl).toContainEqual(['consent','update',{analytics_storage: 'granted'}])
+constentry=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()=>{