fix(tpc): update TPC and fix GA (#186)

Author: huang-julien

package.json

@@ -89,7 +89,7 @@
     "shiki": "^1.10.3",
     "sirv": "^2.0.4",
     "std-env": "^3.7.0",
-    "third-party-capital": "^2.1.1",
+    "third-party-capital": "2.3.0",
     "ufo": "^1.5.3",
     "unimport": "^3.7.2",
     "unplugin": "^1.11.0",

pnpm-lock.yaml

@@ -45,7 +45,7 @@ const scripts: Array<TpcDescriptor> = [
     key: 'googleAnalytics',
     tpcTypesImport: ['DataLayer', 'GTag'],
     performanceMarkFeature: 'nuxt-third-parties-ga',
-    useBody: 'const gtag: GTag = function (...args:Parameters<GTag>) { \n((window as any)[options.l ?? "dataLayer"] as DataLayer).push(args);} as GTag\nreturn { dataLayer: (window as any)[options.l ?? "dataLayer"] as DataLayer,\n gtag }',
+    useBody: 'const gtag: GTag = function (...args:Parameters<GTag>) { \n((window as any)["gtag-"+(options.l ?? "dataLayer")] as GTag)(...args);} as GTag\nreturn { dataLayer: (window as any)[options.l ?? "dataLayer"] as DataLayer,\n gtag }',
     // allow dataLayer to be accessed on the server
     returnStub: 'fn === \'dataLayer\' ? [] : void 0',
   }]

scripts/generateTpcScripts.ts

@@ -132,7 +132,7 @@ ${functionBody.join('\n')}
 
 function replaceTokenToRuntime(code: string, defaultValues?: Record<string, string | number | undefined>) {
   return code.split(';').map(c => c.replaceAll(/'?\{\{(.*?)\}\}'?/g, (_, token) => {
-    return `options?.${token} ${defaultValues?.[token] ? `?? ${JSON.stringify(defaultValues?.[token])}` : ''}`
+    return `(options?.${token} ${defaultValues?.[token] ? `?? ${JSON.stringify(defaultValues?.[token])}` : ''})`
   })).join(';')
 }
 

scripts/utils.ts

@@ -13,7 +13,7 @@ export type GoogleAnalyticsInput = RegistryScriptInput<typeof GoogleAnalyticsOpt
 
 function use(options: GoogleAnalyticsInput) {
   const gtag: GTag = function (...args: Parameters<GTag>) {
-    ((window as any)[options.l ?? 'dataLayer'] as DataLayer).push(args)
+    ((window as any)['gtag-' + (options.l ?? 'dataLayer')] as GTag)(...args)
   } as GTag
   return { dataLayer: (window as any)[options.l ?? 'dataLayer'] as DataLayer,
     gtag }
@@ -34,6 +34,6 @@ export function useScriptGoogleAnalytics(_options?: GoogleAnalyticsInput) {
     // eslint-disable-next-line
         // @ts-ignore
     // eslint-disable-next-line
-        clientInit: import.meta.server ? undefined : () => {window[options?.l ?? "dataLayer"]=window[options?.l ?? "dataLayer"]||[];window[options?.l ?? "dataLayer"].push({'js':new Date()});window[options?.l ?? "dataLayer"].push({'config':options?.id })},
+        clientInit: import.meta.server ? undefined : () => {window[(options?.l ?? "dataLayer")]=window[(options?.l ?? "dataLayer")]||[];window['gtag-'+(options?.l ?? "dataLayer")]=function (){window[(options?.l ?? "dataLayer")].push(arguments);};window['gtag-'+(options?.l ?? "dataLayer")]('js',new Date());window['gtag-'+(options?.l ?? "dataLayer")]('config',(options?.id ))},
   }), _options)
 }

src/runtime/registry/google-analytics.ts

@@ -33,6 +33,6 @@ export function useScriptGoogleTagManager(_options?: GoogleTagManagerInput) {
     // eslint-disable-next-line
         // @ts-ignore
     // eslint-disable-next-line
-        clientInit: import.meta.server ? undefined : () => {window[options?.l ?? "dataLayer"]=window[options?.l ?? "dataLayer"]||[];window[options?.l ?? "dataLayer"].push({'gtm.start':new Date().getTime(),event:'gtm.js'});},
+        clientInit: import.meta.server ? undefined : () => {window[(options?.l ?? "dataLayer")]=window[(options?.l ?? "dataLayer")]||[];window[(options?.l ?? "dataLayer")].push({'gtm.start':new Date().getTime(),event:'gtm.js'});},
   }), _options)
 }