fix(TPC): use proper script keys

Fixes #179

Author: harlan-zw

scripts/generateTpcScripts.ts

@@ -6,6 +6,7 @@ import { registry } from '../src/registry'
 import { generateTpcContent } from './utils'
 
 export interface TpcDescriptor {
+  fileName: string
   label: string
   tpcKey: string
   tpcData: Output
@@ -23,11 +24,12 @@ export interface TpcDescriptor {
 const scripts: Array<TpcDescriptor> = [
   // GTM
   {
+    fileName: 'google-tag-manager',
     label: 'Google Tag Manager',
     tpcKey: 'gtm',
     tpcData: GoogleTagManagerData as Output,
     tpcTypeImport: 'GoogleTagManagerApi',
-    key: 'google-tag-manager',
+    key: 'googleTagManager',
     performanceMarkFeature: 'nuxt-third-parties-gtm',
     returnUse: '{ dataLayer: window.dataLayers[options.dataLayerName!], google_tag_manager: window.google_tag_manager }',
     returnStub: 'fn === \'dataLayer\' ? [] : void 0',
@@ -37,10 +39,11 @@ const scripts: Array<TpcDescriptor> = [
   },
   // GA
   {
+    fileName: 'google-analytics',
     label: 'Google Analytics',
     tpcKey: 'gtag',
     tpcData: GooglaAnalyticsData as Output,
-    key: 'google-analytics',
+    key: 'googleAnalytics',
     tpcTypeImport: 'GoogleAnalyticsApi',
     performanceMarkFeature: 'nuxt-third-parties-ga',
     returnUse: '{ dataLayer: window.dataLayers[options.dataLayerName!], gtag: window.gtag }',
@@ -55,7 +58,7 @@ export async function generate() {
   for (const script of scripts) {
     script.registry = registry().find(r => r.label === script.label)
     const content = await generateTpcContent(script)
-    await writeFile(resolve(`./src/runtime/registry/${script.key}.ts`), content)
+    await writeFile(resolve(`./src/runtime/registry/${script.fileName}.ts`), content)
   }
 }
 

src/runtime/registry/google-analytics.ts

@@ -15,7 +15,7 @@ export type GoogleAnalyticsInput = RegistryScriptInput<typeof GoogleAnalyticsOpt
 
 export function useScriptGoogleAnalytics<T extends GoogleAnalyticsApi>(_options?: GoogleAnalyticsInput) {
   _options = defu(_options, { dataLayerName: 'defaultGa' })
-  return useRegistryScript<T, typeof GoogleAnalyticsOptions>(_options?.key || 'google-analytics', options => ({
+  return useRegistryScript<T, typeof GoogleAnalyticsOptions>(_options?.key || 'googleAnalytics', options => ({
     scriptInput: {
       src: withQuery('https://www.googletagmanager.com/gtag/js', { id: options?.id }),
     },

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

@@ -15,7 +15,7 @@ export type GoogleTagManagerInput = RegistryScriptInput<typeof GoogleTagManagerO
 
 export function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(_options?: GoogleTagManagerInput) {
   _options = defu(_options, { dataLayerName: 'defaultGtm' })
-  return useRegistryScript<T, typeof GoogleTagManagerOptions>(_options?.key || 'google-tag-manager', options => ({
+  return useRegistryScript<T, typeof GoogleTagManagerOptions>('googleTagManager', options => ({
     scriptInput: {
       src: withQuery('https://www.googletagmanager.com/gtm.js', { id: options?.id }),
     },