@jwiedeman/gtm-kit-nuxt 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +6 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -20
- package/dist/index.d.ts +6 -20
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -4,7 +4,7 @@ var vue = require('vue');
|
|
|
4
4
|
var gtmKitVue = require('@jwiedeman/gtm-kit-vue');
|
|
5
5
|
var gtmKit = require('@jwiedeman/gtm-kit');
|
|
6
6
|
|
|
7
|
-
var C=(
|
|
7
|
+
var C=(t,e)=>{var o;t.use(gtmKitVue.GtmPlugin,e);let i=(o=t.config.globalProperties.$gtm)==null?void 0:o.client;if(!i)throw new Error("[gtm-kit/nuxt] Failed to initialize GTM client");return i},h=gtmKitVue.useGtm,N=gtmKitVue.useGtmPush,k=gtmKitVue.useGtmConsent,y=gtmKitVue.useGtmClient,v=t=>{let{route:e,eventName:i="page_view",includeQueryParams:o=!0,additionalData:n,trackInitialPageView:l=!0}=t,r=t.client;if(!r)try{r=gtmKitVue.useGtmClient();}catch(u){}if(!r){console.warn("[gtm-kit/nuxt] useTrackPageViews: No GTM client available. Make sure GtmPlugin is installed or pass a client option.");return}let s=vue.ref(""),c=()=>o?e.fullPath:e.path,p=()=>typeof n=="function"?n():n!=null?n:{},a=()=>{let u=c();u!==s.value&&(s.value=u,r.push({event:i,page_path:u,page_location:typeof window!="undefined"?window.location.href:void 0,page_title:typeof document!="undefined"?document.title:void 0,...p()}));};vue.onMounted(()=>{l&&a();}),vue.watch(()=>e.fullPath,()=>{a();});};
|
|
8
8
|
|
|
9
9
|
Object.defineProperty(exports, 'GTM_INJECTION_KEY', {
|
|
10
10
|
enumerable: true,
|
|
@@ -47,10 +47,10 @@ Object.defineProperty(exports, 'pushEvent', {
|
|
|
47
47
|
get: function () { return gtmKit.pushEvent; }
|
|
48
48
|
});
|
|
49
49
|
exports.createNuxtGtmPlugin = C;
|
|
50
|
-
exports.useNuxtGtm =
|
|
51
|
-
exports.useNuxtGtmClient =
|
|
52
|
-
exports.useNuxtGtmConsent =
|
|
53
|
-
exports.useNuxtGtmPush =
|
|
54
|
-
exports.useTrackPageViews =
|
|
50
|
+
exports.useNuxtGtm = h;
|
|
51
|
+
exports.useNuxtGtmClient = y;
|
|
52
|
+
exports.useNuxtGtmConsent = k;
|
|
53
|
+
exports.useNuxtGtmPush = N;
|
|
54
|
+
exports.useTrackPageViews = v;
|
|
55
55
|
//# sourceMappingURL=out.js.map
|
|
56
56
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/module.ts","../src/index.ts"],"names":["ref","watch","onMounted","GtmPlugin","useGtm","useGtmPush","useGtmConsent","useGtmClient","createNuxtGtmPlugin","app","options","_a","
|
|
1
|
+
{"version":3,"sources":["../src/module.ts","../src/index.ts"],"names":["ref","watch","onMounted","GtmPlugin","useGtm","useGtmPush","useGtmConsent","useGtmClient","createNuxtGtmPlugin","app","options","_a","client","useNuxtGtm","useNuxtGtmPush","useNuxtGtmConsent","useNuxtGtmClient","useTrackPageViews","route","eventName","includeQueryParams","additionalData","trackInitialPageView","e","lastTrackedPath","getPagePath","getAdditionalData","trackPageView","pagePath","useGtmReady","GTM_INJECTION_KEY","consentPresets","pushEvent","pushEcommerce"],"mappings":"AAAA,OAAS,OAAAA,EAAK,SAAAC,EAAO,aAAAC,MAA2B,MAEhD,OACE,aAAAC,EACA,UAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,gBAAAC,MAGK,yBAmCA,IAAMC,EAAsB,CAACC,EAAUC,IAAuC,CA7CrF,IAAAC,EA+CEF,EAAI,IAAIN,EAAWO,CAAO,EAG1B,IAAME,GAAUD,EAAAF,EAAI,OAAO,iBAA2C,OAAtD,YAAAE,EAA4D,OAE5E,GAAI,CAACC,EACH,MAAM,IAAI,MAAM,gDAAgD,EAGlE,OAAOA,CACT,EAeaC,EAAaT,EAMbU,EAAiBT,EAMjBU,EAAoBT,EAMpBU,EAAmBT,EAgEnBU,EAAqBP,GAAyC,CACzE,GAAM,CACJ,MAAAQ,EACA,UAAAC,EAAY,YACZ,mBAAAC,EAAqB,GACrB,eAAAC,EACA,qBAAAC,EAAuB,EACzB,EAAIZ,EAGAE,EAAgCF,EAAQ,OAE5C,GAAI,CAACE,EACH,GAAI,CACFA,EAASL,EAAa,CACxB,OAAQgB,EAAA,CAER,CAGF,GAAI,CAACX,EAAQ,CACX,QAAQ,KACN,sHAEF,EACA,MACF,CAEA,IAAMY,EAAkBxB,EAAY,EAAE,EAEhCyB,EAAc,IACdL,EACKF,EAAM,SAERA,EAAM,KAGTQ,EAAoB,IACpB,OAAOL,GAAmB,WACrBA,EAAe,EAEjBA,GAAA,KAAAA,EAAkB,CAAC,EAGtBM,EAAgB,IAAY,CAChC,IAAMC,EAAWH,EAAY,EAGzBG,IAAaJ,EAAgB,QAIjCA,EAAgB,MAAQI,EAExBhB,EAAQ,KAAK,CACX,MAAOO,EACP,UAAWS,EACX,cAAe,OAAO,QAAW,YAAc,OAAO,SAAS,KAAO,OACtE,WAAY,OAAO,UAAa,YAAc,SAAS,MAAQ,OAC/D,GAAGF,EAAkB,CACvB,CAAC,EACH,EAGAxB,EAAU,IAAM,CACVoB,GACFK,EAAc,CAElB,CAAC,EAGD1B,EACE,IAAMiB,EAAM,SACZ,IAAM,CACJS,EAAc,CAChB,CACF,CACF,EC5NA,OACE,UAAAvB,EACA,cAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAsB,EACA,aAAA1B,EACA,qBAAA2B,MACK,yBAYP,OAAS,kBAAAC,EAAgB,aAAAC,EAAW,iBAAAC,MAAqB","sourcesContent":["import { ref, watch, onMounted, type App } from 'vue';\nimport { type GtmClient } from '@jwiedeman/gtm-kit';\nimport {\n GtmPlugin,\n useGtm,\n useGtmPush,\n useGtmConsent,\n useGtmClient,\n type GtmPluginOptions,\n type GtmContext\n} from '@jwiedeman/gtm-kit-vue';\n\n/**\n * Options for the Nuxt GTM module.\n * Extends the Vue plugin options.\n *\n * For automatic page tracking, use the `useTrackPageViews` composable\n * in your app.vue or layout component.\n */\nexport type NuxtGtmOptions = GtmPluginOptions;\n\n/**\n * Extended context for Nuxt with additional helpers.\n */\nexport interface NuxtGtmContext extends GtmContext {\n /** Track a page view manually */\n trackPageView: (path?: string, additionalData?: Record<string, unknown>) => void;\n}\n\n/**\n * Creates a Nuxt plugin for GTM Kit.\n * Use this in your Nuxt plugins directory.\n *\n * @example\n * ```ts\n * // plugins/gtm.client.ts\n * import { createNuxtGtmPlugin } from '@jwiedeman/gtm-kit-nuxt';\n *\n * export default defineNuxtPlugin((nuxtApp) => {\n * createNuxtGtmPlugin(nuxtApp.vueApp, {\n * containers: 'GTM-XXXXXX'\n * });\n * });\n * ```\n */\nexport const createNuxtGtmPlugin = (app: App, options: NuxtGtmOptions): GtmClient => {\n // Install the Vue plugin\n app.use(GtmPlugin, options);\n\n // Get the client from the Vue plugin\n const client = (app.config.globalProperties as { $gtm?: GtmContext }).$gtm?.client;\n\n if (!client) {\n throw new Error('[gtm-kit/nuxt] Failed to initialize GTM client');\n }\n\n return client;\n};\n\n/**\n * Composable for accessing the full GTM context in Nuxt.\n * This is an alias for useGtm() from @jwiedeman/gtm-kit-vue.\n *\n * @example\n * ```vue\n * <script setup>\n * const { push, client } = useNuxtGtm();\n *\n * push({ event: 'custom_event' });\n * </script>\n * ```\n */\nexport const useNuxtGtm = useGtm;\n\n/**\n * Composable for pushing events in Nuxt.\n * This is an alias for useGtmPush() from @jwiedeman/gtm-kit-vue.\n */\nexport const useNuxtGtmPush = useGtmPush;\n\n/**\n * Composable for consent management in Nuxt.\n * This is an alias for useGtmConsent() from @jwiedeman/gtm-kit-vue.\n */\nexport const useNuxtGtmConsent = useGtmConsent;\n\n/**\n * Composable for accessing the raw GTM client in Nuxt.\n * This is an alias for useGtmClient() from @jwiedeman/gtm-kit-vue.\n */\nexport const useNuxtGtmClient = useGtmClient;\n\n/**\n * Options for the useTrackPageViews composable.\n */\nexport interface TrackPageViewsOptions {\n /**\n * The GTM client instance to use.\n * If not provided, will use the client from the Vue plugin context.\n */\n client?: GtmClient;\n\n /**\n * Reactive route object to watch for changes.\n * Use useRoute() from Nuxt.\n */\n route: {\n fullPath: string;\n path: string;\n query?: Record<string, unknown>;\n };\n\n /**\n * Custom page view event name.\n * @default 'page_view'\n */\n eventName?: string;\n\n /**\n * Whether to include query parameters in page path.\n * @default true\n */\n includeQueryParams?: boolean;\n\n /**\n * Additional data to include with each page view event.\n */\n additionalData?: Record<string, unknown> | (() => Record<string, unknown>);\n\n /**\n * Whether to track the initial page view on mount.\n * @default true\n */\n trackInitialPageView?: boolean;\n}\n\n/**\n * Composable for automatic page view tracking with Nuxt Router.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useTrackPageViews } from '@jwiedeman/gtm-kit-nuxt';\n *\n * const route = useRoute();\n *\n * useTrackPageViews({\n * route,\n * eventName: 'page_view',\n * additionalData: { site_section: 'main' }\n * });\n * </script>\n * ```\n */\nexport const useTrackPageViews = (options: TrackPageViewsOptions): void => {\n const {\n route,\n eventName = 'page_view',\n includeQueryParams = true,\n additionalData,\n trackInitialPageView = true\n } = options;\n\n // Try to get client from options or from context\n let client: GtmClient | undefined = options.client;\n\n if (!client) {\n try {\n client = useGtmClient();\n } catch {\n // Client not available from context, will throw later if needed\n }\n }\n\n if (!client) {\n console.warn(\n '[gtm-kit/nuxt] useTrackPageViews: No GTM client available. ' +\n 'Make sure GtmPlugin is installed or pass a client option.'\n );\n return;\n }\n\n const lastTrackedPath = ref<string>('');\n\n const getPagePath = (): string => {\n if (includeQueryParams) {\n return route.fullPath;\n }\n return route.path;\n };\n\n const getAdditionalData = (): Record<string, unknown> => {\n if (typeof additionalData === 'function') {\n return additionalData();\n }\n return additionalData ?? {};\n };\n\n const trackPageView = (): void => {\n const pagePath = getPagePath();\n\n // Skip if this path was already tracked\n if (pagePath === lastTrackedPath.value) {\n return;\n }\n\n lastTrackedPath.value = pagePath;\n\n client!.push({\n event: eventName,\n page_path: pagePath,\n page_location: typeof window !== 'undefined' ? window.location.href : undefined,\n page_title: typeof document !== 'undefined' ? document.title : undefined,\n ...getAdditionalData()\n });\n };\n\n // Track initial page view on mount if enabled\n onMounted(() => {\n if (trackInitialPageView) {\n trackPageView();\n }\n });\n\n // Watch for route changes\n watch(\n () => route.fullPath,\n () => {\n trackPageView();\n }\n );\n};\n\n// Note: Type augmentation for NuxtApp.$gtm should be done in the user's project\n// by adding a type declaration file with:\n//\n// declare module '#app' {\n// interface NuxtApp {\n// $gtm: import('@jwiedeman/gtm-kit-vue').GtmContext;\n// }\n// }\n","export type { NuxtGtmOptions, NuxtGtmContext } from './module';\nexport {\n createNuxtGtmPlugin,\n useNuxtGtm,\n useNuxtGtmPush,\n useNuxtGtmConsent,\n useNuxtGtmClient,\n useTrackPageViews\n} from './module';\n\n// Re-export Vue composables for convenience\nexport {\n useGtm,\n useGtmPush,\n useGtmConsent,\n useGtmClient,\n useGtmReady,\n GtmPlugin,\n GTM_INJECTION_KEY\n} from '@jwiedeman/gtm-kit-vue';\n\n// Re-export core types for convenience\nexport type {\n CreateGtmClientOptions,\n GtmClient,\n ConsentState,\n ConsentRegionOptions,\n DataLayerValue,\n ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\nexport { consentPresets, pushEvent, pushEcommerce } from '@jwiedeman/gtm-kit';\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -8,25 +8,12 @@ import { App } from 'vue';
|
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Options for the Nuxt GTM module.
|
|
11
|
-
* Extends the Vue plugin options
|
|
11
|
+
* Extends the Vue plugin options.
|
|
12
|
+
*
|
|
13
|
+
* For automatic page tracking, use the `useTrackPageViews` composable
|
|
14
|
+
* in your app.vue or layout component.
|
|
12
15
|
*/
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Whether to automatically track page views on route changes.
|
|
16
|
-
* @default true
|
|
17
|
-
*/
|
|
18
|
-
trackPageViews?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Custom page view event name.
|
|
21
|
-
* @default 'page_view'
|
|
22
|
-
*/
|
|
23
|
-
pageViewEventName?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Whether to include query parameters in page path.
|
|
26
|
-
* @default true
|
|
27
|
-
*/
|
|
28
|
-
includeQueryParams?: boolean;
|
|
29
|
-
}
|
|
16
|
+
type NuxtGtmOptions = GtmPluginOptions;
|
|
30
17
|
/**
|
|
31
18
|
* Extended context for Nuxt with additional helpers.
|
|
32
19
|
*/
|
|
@@ -45,8 +32,7 @@ interface NuxtGtmContext extends GtmContext {
|
|
|
45
32
|
*
|
|
46
33
|
* export default defineNuxtPlugin((nuxtApp) => {
|
|
47
34
|
* createNuxtGtmPlugin(nuxtApp.vueApp, {
|
|
48
|
-
* containers: 'GTM-XXXXXX'
|
|
49
|
-
* trackPageViews: true
|
|
35
|
+
* containers: 'GTM-XXXXXX'
|
|
50
36
|
* });
|
|
51
37
|
* });
|
|
52
38
|
* ```
|
package/dist/index.d.ts
CHANGED
|
@@ -8,25 +8,12 @@ import { App } from 'vue';
|
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Options for the Nuxt GTM module.
|
|
11
|
-
* Extends the Vue plugin options
|
|
11
|
+
* Extends the Vue plugin options.
|
|
12
|
+
*
|
|
13
|
+
* For automatic page tracking, use the `useTrackPageViews` composable
|
|
14
|
+
* in your app.vue or layout component.
|
|
12
15
|
*/
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Whether to automatically track page views on route changes.
|
|
16
|
-
* @default true
|
|
17
|
-
*/
|
|
18
|
-
trackPageViews?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Custom page view event name.
|
|
21
|
-
* @default 'page_view'
|
|
22
|
-
*/
|
|
23
|
-
pageViewEventName?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Whether to include query parameters in page path.
|
|
26
|
-
* @default true
|
|
27
|
-
*/
|
|
28
|
-
includeQueryParams?: boolean;
|
|
29
|
-
}
|
|
16
|
+
type NuxtGtmOptions = GtmPluginOptions;
|
|
30
17
|
/**
|
|
31
18
|
* Extended context for Nuxt with additional helpers.
|
|
32
19
|
*/
|
|
@@ -45,8 +32,7 @@ interface NuxtGtmContext extends GtmContext {
|
|
|
45
32
|
*
|
|
46
33
|
* export default defineNuxtPlugin((nuxtApp) => {
|
|
47
34
|
* createNuxtGtmPlugin(nuxtApp.vueApp, {
|
|
48
|
-
* containers: 'GTM-XXXXXX'
|
|
49
|
-
* trackPageViews: true
|
|
35
|
+
* containers: 'GTM-XXXXXX'
|
|
50
36
|
* });
|
|
51
37
|
* });
|
|
52
38
|
* ```
|
package/dist/index.js
CHANGED
|
@@ -3,8 +3,8 @@ import { GtmPlugin, useGtm, useGtmPush, useGtmConsent, useGtmClient } from '@jwi
|
|
|
3
3
|
export { GTM_INJECTION_KEY, GtmPlugin, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady } from '@jwiedeman/gtm-kit-vue';
|
|
4
4
|
export { consentPresets, pushEcommerce, pushEvent } from '@jwiedeman/gtm-kit';
|
|
5
5
|
|
|
6
|
-
var C=(
|
|
6
|
+
var C=(t,e)=>{var o;t.use(GtmPlugin,e);let i=(o=t.config.globalProperties.$gtm)==null?void 0:o.client;if(!i)throw new Error("[gtm-kit/nuxt] Failed to initialize GTM client");return i},h=useGtm,N=useGtmPush,k=useGtmConsent,y=useGtmClient,v=t=>{let{route:e,eventName:i="page_view",includeQueryParams:o=!0,additionalData:n,trackInitialPageView:l=!0}=t,r=t.client;if(!r)try{r=useGtmClient();}catch(u){}if(!r){console.warn("[gtm-kit/nuxt] useTrackPageViews: No GTM client available. Make sure GtmPlugin is installed or pass a client option.");return}let s=ref(""),c=()=>o?e.fullPath:e.path,p=()=>typeof n=="function"?n():n!=null?n:{},a=()=>{let u=c();u!==s.value&&(s.value=u,r.push({event:i,page_path:u,page_location:typeof window!="undefined"?window.location.href:void 0,page_title:typeof document!="undefined"?document.title:void 0,...p()}));};onMounted(()=>{l&&a();}),watch(()=>e.fullPath,()=>{a();});};
|
|
7
7
|
|
|
8
|
-
export { C as createNuxtGtmPlugin,
|
|
8
|
+
export { C as createNuxtGtmPlugin, h as useNuxtGtm, y as useNuxtGtmClient, k as useNuxtGtmConsent, N as useNuxtGtmPush, v as useTrackPageViews };
|
|
9
9
|
//# sourceMappingURL=out.js.map
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/module.ts","../src/index.ts"],"names":["ref","watch","onMounted","GtmPlugin","useGtm","useGtmPush","useGtmConsent","useGtmClient","createNuxtGtmPlugin","app","options","_a","
|
|
1
|
+
{"version":3,"sources":["../src/module.ts","../src/index.ts"],"names":["ref","watch","onMounted","GtmPlugin","useGtm","useGtmPush","useGtmConsent","useGtmClient","createNuxtGtmPlugin","app","options","_a","client","useNuxtGtm","useNuxtGtmPush","useNuxtGtmConsent","useNuxtGtmClient","useTrackPageViews","route","eventName","includeQueryParams","additionalData","trackInitialPageView","e","lastTrackedPath","getPagePath","getAdditionalData","trackPageView","pagePath","useGtmReady","GTM_INJECTION_KEY","consentPresets","pushEvent","pushEcommerce"],"mappings":"AAAA,OAAS,OAAAA,EAAK,SAAAC,EAAO,aAAAC,MAA2B,MAEhD,OACE,aAAAC,EACA,UAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,gBAAAC,MAGK,yBAmCA,IAAMC,EAAsB,CAACC,EAAUC,IAAuC,CA7CrF,IAAAC,EA+CEF,EAAI,IAAIN,EAAWO,CAAO,EAG1B,IAAME,GAAUD,EAAAF,EAAI,OAAO,iBAA2C,OAAtD,YAAAE,EAA4D,OAE5E,GAAI,CAACC,EACH,MAAM,IAAI,MAAM,gDAAgD,EAGlE,OAAOA,CACT,EAeaC,EAAaT,EAMbU,EAAiBT,EAMjBU,EAAoBT,EAMpBU,EAAmBT,EAgEnBU,EAAqBP,GAAyC,CACzE,GAAM,CACJ,MAAAQ,EACA,UAAAC,EAAY,YACZ,mBAAAC,EAAqB,GACrB,eAAAC,EACA,qBAAAC,EAAuB,EACzB,EAAIZ,EAGAE,EAAgCF,EAAQ,OAE5C,GAAI,CAACE,EACH,GAAI,CACFA,EAASL,EAAa,CACxB,OAAQgB,EAAA,CAER,CAGF,GAAI,CAACX,EAAQ,CACX,QAAQ,KACN,sHAEF,EACA,MACF,CAEA,IAAMY,EAAkBxB,EAAY,EAAE,EAEhCyB,EAAc,IACdL,EACKF,EAAM,SAERA,EAAM,KAGTQ,EAAoB,IACpB,OAAOL,GAAmB,WACrBA,EAAe,EAEjBA,GAAA,KAAAA,EAAkB,CAAC,EAGtBM,EAAgB,IAAY,CAChC,IAAMC,EAAWH,EAAY,EAGzBG,IAAaJ,EAAgB,QAIjCA,EAAgB,MAAQI,EAExBhB,EAAQ,KAAK,CACX,MAAOO,EACP,UAAWS,EACX,cAAe,OAAO,QAAW,YAAc,OAAO,SAAS,KAAO,OACtE,WAAY,OAAO,UAAa,YAAc,SAAS,MAAQ,OAC/D,GAAGF,EAAkB,CACvB,CAAC,EACH,EAGAxB,EAAU,IAAM,CACVoB,GACFK,EAAc,CAElB,CAAC,EAGD1B,EACE,IAAMiB,EAAM,SACZ,IAAM,CACJS,EAAc,CAChB,CACF,CACF,EC5NA,OACE,UAAAvB,EACA,cAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAsB,EACA,aAAA1B,EACA,qBAAA2B,MACK,yBAYP,OAAS,kBAAAC,EAAgB,aAAAC,EAAW,iBAAAC,MAAqB","sourcesContent":["import { ref, watch, onMounted, type App } from 'vue';\nimport { type GtmClient } from '@jwiedeman/gtm-kit';\nimport {\n GtmPlugin,\n useGtm,\n useGtmPush,\n useGtmConsent,\n useGtmClient,\n type GtmPluginOptions,\n type GtmContext\n} from '@jwiedeman/gtm-kit-vue';\n\n/**\n * Options for the Nuxt GTM module.\n * Extends the Vue plugin options.\n *\n * For automatic page tracking, use the `useTrackPageViews` composable\n * in your app.vue or layout component.\n */\nexport type NuxtGtmOptions = GtmPluginOptions;\n\n/**\n * Extended context for Nuxt with additional helpers.\n */\nexport interface NuxtGtmContext extends GtmContext {\n /** Track a page view manually */\n trackPageView: (path?: string, additionalData?: Record<string, unknown>) => void;\n}\n\n/**\n * Creates a Nuxt plugin for GTM Kit.\n * Use this in your Nuxt plugins directory.\n *\n * @example\n * ```ts\n * // plugins/gtm.client.ts\n * import { createNuxtGtmPlugin } from '@jwiedeman/gtm-kit-nuxt';\n *\n * export default defineNuxtPlugin((nuxtApp) => {\n * createNuxtGtmPlugin(nuxtApp.vueApp, {\n * containers: 'GTM-XXXXXX'\n * });\n * });\n * ```\n */\nexport const createNuxtGtmPlugin = (app: App, options: NuxtGtmOptions): GtmClient => {\n // Install the Vue plugin\n app.use(GtmPlugin, options);\n\n // Get the client from the Vue plugin\n const client = (app.config.globalProperties as { $gtm?: GtmContext }).$gtm?.client;\n\n if (!client) {\n throw new Error('[gtm-kit/nuxt] Failed to initialize GTM client');\n }\n\n return client;\n};\n\n/**\n * Composable for accessing the full GTM context in Nuxt.\n * This is an alias for useGtm() from @jwiedeman/gtm-kit-vue.\n *\n * @example\n * ```vue\n * <script setup>\n * const { push, client } = useNuxtGtm();\n *\n * push({ event: 'custom_event' });\n * </script>\n * ```\n */\nexport const useNuxtGtm = useGtm;\n\n/**\n * Composable for pushing events in Nuxt.\n * This is an alias for useGtmPush() from @jwiedeman/gtm-kit-vue.\n */\nexport const useNuxtGtmPush = useGtmPush;\n\n/**\n * Composable for consent management in Nuxt.\n * This is an alias for useGtmConsent() from @jwiedeman/gtm-kit-vue.\n */\nexport const useNuxtGtmConsent = useGtmConsent;\n\n/**\n * Composable for accessing the raw GTM client in Nuxt.\n * This is an alias for useGtmClient() from @jwiedeman/gtm-kit-vue.\n */\nexport const useNuxtGtmClient = useGtmClient;\n\n/**\n * Options for the useTrackPageViews composable.\n */\nexport interface TrackPageViewsOptions {\n /**\n * The GTM client instance to use.\n * If not provided, will use the client from the Vue plugin context.\n */\n client?: GtmClient;\n\n /**\n * Reactive route object to watch for changes.\n * Use useRoute() from Nuxt.\n */\n route: {\n fullPath: string;\n path: string;\n query?: Record<string, unknown>;\n };\n\n /**\n * Custom page view event name.\n * @default 'page_view'\n */\n eventName?: string;\n\n /**\n * Whether to include query parameters in page path.\n * @default true\n */\n includeQueryParams?: boolean;\n\n /**\n * Additional data to include with each page view event.\n */\n additionalData?: Record<string, unknown> | (() => Record<string, unknown>);\n\n /**\n * Whether to track the initial page view on mount.\n * @default true\n */\n trackInitialPageView?: boolean;\n}\n\n/**\n * Composable for automatic page view tracking with Nuxt Router.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useTrackPageViews } from '@jwiedeman/gtm-kit-nuxt';\n *\n * const route = useRoute();\n *\n * useTrackPageViews({\n * route,\n * eventName: 'page_view',\n * additionalData: { site_section: 'main' }\n * });\n * </script>\n * ```\n */\nexport const useTrackPageViews = (options: TrackPageViewsOptions): void => {\n const {\n route,\n eventName = 'page_view',\n includeQueryParams = true,\n additionalData,\n trackInitialPageView = true\n } = options;\n\n // Try to get client from options or from context\n let client: GtmClient | undefined = options.client;\n\n if (!client) {\n try {\n client = useGtmClient();\n } catch {\n // Client not available from context, will throw later if needed\n }\n }\n\n if (!client) {\n console.warn(\n '[gtm-kit/nuxt] useTrackPageViews: No GTM client available. ' +\n 'Make sure GtmPlugin is installed or pass a client option.'\n );\n return;\n }\n\n const lastTrackedPath = ref<string>('');\n\n const getPagePath = (): string => {\n if (includeQueryParams) {\n return route.fullPath;\n }\n return route.path;\n };\n\n const getAdditionalData = (): Record<string, unknown> => {\n if (typeof additionalData === 'function') {\n return additionalData();\n }\n return additionalData ?? {};\n };\n\n const trackPageView = (): void => {\n const pagePath = getPagePath();\n\n // Skip if this path was already tracked\n if (pagePath === lastTrackedPath.value) {\n return;\n }\n\n lastTrackedPath.value = pagePath;\n\n client!.push({\n event: eventName,\n page_path: pagePath,\n page_location: typeof window !== 'undefined' ? window.location.href : undefined,\n page_title: typeof document !== 'undefined' ? document.title : undefined,\n ...getAdditionalData()\n });\n };\n\n // Track initial page view on mount if enabled\n onMounted(() => {\n if (trackInitialPageView) {\n trackPageView();\n }\n });\n\n // Watch for route changes\n watch(\n () => route.fullPath,\n () => {\n trackPageView();\n }\n );\n};\n\n// Note: Type augmentation for NuxtApp.$gtm should be done in the user's project\n// by adding a type declaration file with:\n//\n// declare module '#app' {\n// interface NuxtApp {\n// $gtm: import('@jwiedeman/gtm-kit-vue').GtmContext;\n// }\n// }\n","export type { NuxtGtmOptions, NuxtGtmContext } from './module';\nexport {\n createNuxtGtmPlugin,\n useNuxtGtm,\n useNuxtGtmPush,\n useNuxtGtmConsent,\n useNuxtGtmClient,\n useTrackPageViews\n} from './module';\n\n// Re-export Vue composables for convenience\nexport {\n useGtm,\n useGtmPush,\n useGtmConsent,\n useGtmClient,\n useGtmReady,\n GtmPlugin,\n GTM_INJECTION_KEY\n} from '@jwiedeman/gtm-kit-vue';\n\n// Re-export core types for convenience\nexport type {\n CreateGtmClientOptions,\n GtmClient,\n ConsentState,\n ConsentRegionOptions,\n DataLayerValue,\n ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\nexport { consentPresets, pushEvent, pushEcommerce } from '@jwiedeman/gtm-kit';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jwiedeman/gtm-kit-nuxt",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Nuxt 3 module for GTM Kit - Google Tag Manager integration with auto page tracking.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"typecheck": "tsc --noEmit"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@jwiedeman/gtm-kit": "^1.0
|
|
45
|
-
"@jwiedeman/gtm-kit-vue": "^1.0
|
|
44
|
+
"@jwiedeman/gtm-kit": "^1.1.0",
|
|
45
|
+
"@jwiedeman/gtm-kit-vue": "^1.1.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"nuxt": "^3.0.0",
|