@jwiedeman/gtm-kit-vue 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.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
var vue = require('vue');
|
|
4
4
|
var gtmKit = require('@jwiedeman/gtm-kit');
|
|
5
5
|
|
|
6
|
-
var a=Symbol("gtm-kit"),
|
|
6
|
+
var a=Symbol("gtm-kit"),G={install(t,s){let{autoInit:p=!0,onBeforeInit:r,...m}=s,e=gtmKit.createGtmClient(m),u={client:e,push:n=>e.push(n),setConsentDefaults:(n,i)=>e.setConsentDefaults(n,i),updateConsent:(n,i)=>e.updateConsent(n,i),whenReady:()=>e.whenReady(),onReady:n=>e.onReady(n)};t.provide(a,u),t.config.globalProperties.$gtm=u,r&&r(e),p&&e.init();let C=t.unmount.bind(t);t.unmount=()=>(e.teardown(),C());}},o=()=>{let t=vue.inject(a);if(!t)throw new Error('[gtm-kit] useGtm() was called outside of a Vue app with GtmPlugin installed. Make sure to call app.use(GtmPlugin, { containers: "GTM-XXXXXX" }) before using GTM composables.');return t},d=()=>o(),y=()=>o().push,g=()=>{let{setConsentDefaults:t,updateConsent:s}=o();return {setConsentDefaults:t,updateConsent:s}},x=()=>o().client,f=()=>o().whenReady;
|
|
7
7
|
|
|
8
8
|
exports.GTM_INJECTION_KEY = a;
|
|
9
|
-
exports.GtmPlugin =
|
|
10
|
-
exports.useGtm =
|
|
9
|
+
exports.GtmPlugin = G;
|
|
10
|
+
exports.useGtm = d;
|
|
11
11
|
exports.useGtmClient = x;
|
|
12
|
-
exports.useGtmConsent =
|
|
13
|
-
exports.useGtmPush =
|
|
14
|
-
exports.useGtmReady =
|
|
12
|
+
exports.useGtmConsent = g;
|
|
13
|
+
exports.useGtmPush = y;
|
|
14
|
+
exports.useGtmReady = f;
|
|
15
15
|
//# sourceMappingURL=out.js.map
|
|
16
16
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/plugin.ts"],"names":["inject","createGtmClient","GTM_INJECTION_KEY","GtmPlugin","app","options","autoInit","onBeforeInit","clientOptions","client","context","value","state","regionOptions","callback","useGtmContext","useGtm","useGtmPush","useGtmConsent","setConsentDefaults","updateConsent","useGtmClient","useGtmReady"],"mappings":"AAAA,OAAS,UAAAA,MAA2C,MACpD,OACE,mBAAAC,MAOK,qBAkDA,IAAMC,EAA8C,OAAO,SAAS,EAe9DC,EAAY,CACvB,QAAQC,EAAUC,EAAiC,CACjD,GAAM,CAAE,SAAAC,EAAW,GAAM,aAAAC,EAAc,GAAGC,CAAc,EAAIH,EAEtDI,EAASR,EAAgBO,CAAa,EAEtCE,EAAsB,CAC1B,OAAAD,EACA,KAAOE,GAA0BF,EAAO,KAAKE,CAAK,EAClD,mBAAoB,CAACC,EAAqBC,IACxCJ,EAAO,mBAAmBG,EAAOC,CAAa,EAChD,cAAe,CAACD,EAAqBC,IACnCJ,EAAO,cAAcG,EAAOC,CAAa,EAC3C,UAAW,IAAMJ,EAAO,UAAU,EAClC,QAAUK,GAAiDL,EAAO,QAAQK,CAAQ,CACpF,EAGAV,EAAI,QAAQF,EAAmBQ,CAAO,EAGtCN,EAAI,OAAO,iBAAiB,KAAOM,EAG/BH,GACFA,EAAaE,CAAM,EAIjBH,GACFG,EAAO,KAAK,
|
|
1
|
+
{"version":3,"sources":["../src/plugin.ts"],"names":["inject","createGtmClient","GTM_INJECTION_KEY","GtmPlugin","app","options","autoInit","onBeforeInit","clientOptions","client","context","value","state","regionOptions","callback","originalUnmount","useGtmContext","useGtm","useGtmPush","useGtmConsent","setConsentDefaults","updateConsent","useGtmClient","useGtmReady"],"mappings":"AAAA,OAAS,UAAAA,MAA2C,MACpD,OACE,mBAAAC,MAOK,qBAkDA,IAAMC,EAA8C,OAAO,SAAS,EAe9DC,EAAY,CACvB,QAAQC,EAAUC,EAAiC,CACjD,GAAM,CAAE,SAAAC,EAAW,GAAM,aAAAC,EAAc,GAAGC,CAAc,EAAIH,EAEtDI,EAASR,EAAgBO,CAAa,EAEtCE,EAAsB,CAC1B,OAAAD,EACA,KAAOE,GAA0BF,EAAO,KAAKE,CAAK,EAClD,mBAAoB,CAACC,EAAqBC,IACxCJ,EAAO,mBAAmBG,EAAOC,CAAa,EAChD,cAAe,CAACD,EAAqBC,IACnCJ,EAAO,cAAcG,EAAOC,CAAa,EAC3C,UAAW,IAAMJ,EAAO,UAAU,EAClC,QAAUK,GAAiDL,EAAO,QAAQK,CAAQ,CACpF,EAGAV,EAAI,QAAQF,EAAmBQ,CAAO,EAGtCN,EAAI,OAAO,iBAAiB,KAAOM,EAG/BH,GACFA,EAAaE,CAAM,EAIjBH,GACFG,EAAO,KAAK,EAKd,IAAMM,EAAkBX,EAAI,QAAQ,KAAKA,CAAG,EAC5CA,EAAI,QAAU,KACZK,EAAO,SAAS,EACTM,EAAgB,EAE3B,CACF,EAKMC,EAAgB,IAAkB,CACtC,IAAMN,EAAUV,EAAOE,CAAiB,EACxC,GAAI,CAACQ,EACH,MAAM,IAAI,MACR,+KAEF,EAEF,OAAOA,CACT,EAkBaO,EAAS,IACbD,EAAc,EAoBVE,EAAa,IACjBF,EAAc,EAAE,KAwBZG,EAAgB,IAAqB,CAChD,GAAM,CAAE,mBAAAC,EAAoB,cAAAC,CAAc,EAAIL,EAAc,EAC5D,MAAO,CAAE,mBAAAI,EAAoB,cAAAC,CAAc,CAC7C,EAoBaC,EAAe,IACnBN,EAAc,EAAE,OAsBZO,EAAc,IAClBP,EAAc,EAAE","sourcesContent":["import { inject, type App, type InjectionKey } from 'vue';\nimport {\n createGtmClient,\n type ConsentRegionOptions,\n type ConsentState,\n type CreateGtmClientOptions,\n type DataLayerValue,\n type GtmClient,\n type ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\n/**\n * Options for the GTM Vue plugin.\n * Extends CreateGtmClientOptions with Vue-specific options.\n */\nexport interface GtmPluginOptions extends CreateGtmClientOptions {\n /**\n * Whether to automatically initialize GTM when the plugin is installed.\n * @default true\n */\n autoInit?: boolean;\n\n /**\n * Callback executed before GTM initialization.\n * Use this to set consent defaults.\n */\n onBeforeInit?: (client: GtmClient) => void;\n}\n\n/**\n * The GTM context value provided to components via inject().\n */\nexport interface GtmContext {\n /** The underlying GTM client instance */\n client: GtmClient;\n /** Push a value to the data layer */\n push: (value: DataLayerValue) => void;\n /** Set consent defaults (must be called before init) */\n setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n /** Update consent state */\n updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n /** Returns a promise that resolves when all GTM scripts are loaded */\n whenReady: () => Promise<ScriptLoadState[]>;\n /** Register a callback for when GTM scripts are ready */\n onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;\n}\n\n/**\n * Consent-specific API subset.\n */\nexport interface GtmConsentApi {\n setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n}\n\n/**\n * Injection key for the GTM context.\n * Use this with inject() to access the GTM context directly.\n */\nexport const GTM_INJECTION_KEY: InjectionKey<GtmContext> = Symbol('gtm-kit');\n\n/**\n * Vue 3 plugin for GTM Kit.\n *\n * @example\n * ```ts\n * import { createApp } from 'vue';\n * import { GtmPlugin } from '@jwiedeman/gtm-kit-vue';\n *\n * createApp(App)\n * .use(GtmPlugin, { containers: 'GTM-XXXXXX' })\n * .mount('#app');\n * ```\n */\nexport const GtmPlugin = {\n install(app: App, options: GtmPluginOptions): void {\n const { autoInit = true, onBeforeInit, ...clientOptions } = options;\n\n const client = createGtmClient(clientOptions);\n\n const context: GtmContext = {\n client,\n push: (value: DataLayerValue) => client.push(value),\n setConsentDefaults: (state: ConsentState, regionOptions?: ConsentRegionOptions) =>\n client.setConsentDefaults(state, regionOptions),\n updateConsent: (state: ConsentState, regionOptions?: ConsentRegionOptions) =>\n client.updateConsent(state, regionOptions),\n whenReady: () => client.whenReady(),\n onReady: (callback: (state: ScriptLoadState[]) => void) => client.onReady(callback)\n };\n\n // Provide the context to all components\n app.provide(GTM_INJECTION_KEY, context);\n\n // Also make it available as a global property for Options API users\n app.config.globalProperties.$gtm = context;\n\n // Call onBeforeInit hook if provided (for consent defaults)\n if (onBeforeInit) {\n onBeforeInit(client);\n }\n\n // Auto-initialize if enabled\n if (autoInit) {\n client.init();\n }\n\n // Register cleanup when the Vue app is unmounted\n // We wrap the app.unmount method to ensure proper teardown\n const originalUnmount = app.unmount.bind(app);\n app.unmount = () => {\n client.teardown();\n return originalUnmount();\n };\n }\n};\n\n/**\n * Internal helper to get the GTM context with proper error handling.\n */\nconst useGtmContext = (): GtmContext => {\n const context = inject(GTM_INJECTION_KEY);\n if (!context) {\n throw new Error(\n '[gtm-kit] useGtm() was called outside of a Vue app with GtmPlugin installed. ' +\n 'Make sure to call app.use(GtmPlugin, { containers: \"GTM-XXXXXX\" }) before using GTM composables.'\n );\n }\n return context;\n};\n\n/**\n * Composable to access the full GTM context.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtm } from '@jwiedeman/gtm-kit-vue';\n *\n * const { push, client, whenReady } = useGtm();\n *\n * function trackClick() {\n * push({ event: 'button_click', button_name: 'hero_cta' });\n * }\n * </script>\n * ```\n */\nexport const useGtm = (): GtmContext => {\n return useGtmContext();\n};\n\n/**\n * Composable to get just the push function.\n * Use this when you only need to push events.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtmPush } from '@jwiedeman/gtm-kit-vue';\n *\n * const push = useGtmPush();\n *\n * function handlePurchase() {\n * push({ event: 'purchase', value: 99.99 });\n * }\n * </script>\n * ```\n */\nexport const useGtmPush = (): ((value: DataLayerValue) => void) => {\n return useGtmContext().push;\n};\n\n/**\n * Composable to access consent management functions.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtmConsent } from '@jwiedeman/gtm-kit-vue';\n *\n * const { updateConsent } = useGtmConsent();\n *\n * function acceptAll() {\n * updateConsent({\n * ad_storage: 'granted',\n * analytics_storage: 'granted',\n * ad_user_data: 'granted',\n * ad_personalization: 'granted'\n * });\n * }\n * </script>\n * ```\n */\nexport const useGtmConsent = (): GtmConsentApi => {\n const { setConsentDefaults, updateConsent } = useGtmContext();\n return { setConsentDefaults, updateConsent };\n};\n\n/**\n * Composable to get the raw GTM client instance.\n * Use this when you need direct access to the client.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtmClient } from '@jwiedeman/gtm-kit-vue';\n *\n * const client = useGtmClient();\n *\n * // Check if client is initialized\n * if (client.isInitialized()) {\n * console.log('GTM is ready');\n * }\n * </script>\n * ```\n */\nexport const useGtmClient = (): GtmClient => {\n return useGtmContext().client;\n};\n\n/**\n * Composable to get the whenReady function.\n * Use this to wait for GTM scripts to load.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtmReady } from '@jwiedeman/gtm-kit-vue';\n * import { onMounted } from 'vue';\n *\n * const whenReady = useGtmReady();\n *\n * onMounted(async () => {\n * const states = await whenReady();\n * console.log('GTM scripts loaded:', states);\n * });\n * </script>\n * ```\n */\nexport const useGtmReady = (): (() => Promise<ScriptLoadState[]>) => {\n return useGtmContext().whenReady;\n};\n\n// Extend Vue's ComponentCustomProperties for Options API users\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $gtm: GtmContext;\n }\n}\n"]}
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { inject } from 'vue';
|
|
2
2
|
import { createGtmClient } from '@jwiedeman/gtm-kit';
|
|
3
3
|
|
|
4
|
-
var a=Symbol("gtm-kit"),
|
|
4
|
+
var a=Symbol("gtm-kit"),G={install(t,s){let{autoInit:p=!0,onBeforeInit:r,...m}=s,e=createGtmClient(m),u={client:e,push:n=>e.push(n),setConsentDefaults:(n,i)=>e.setConsentDefaults(n,i),updateConsent:(n,i)=>e.updateConsent(n,i),whenReady:()=>e.whenReady(),onReady:n=>e.onReady(n)};t.provide(a,u),t.config.globalProperties.$gtm=u,r&&r(e),p&&e.init();let C=t.unmount.bind(t);t.unmount=()=>(e.teardown(),C());}},o=()=>{let t=inject(a);if(!t)throw new Error('[gtm-kit] useGtm() was called outside of a Vue app with GtmPlugin installed. Make sure to call app.use(GtmPlugin, { containers: "GTM-XXXXXX" }) before using GTM composables.');return t},d=()=>o(),y=()=>o().push,g=()=>{let{setConsentDefaults:t,updateConsent:s}=o();return {setConsentDefaults:t,updateConsent:s}},x=()=>o().client,f=()=>o().whenReady;
|
|
5
5
|
|
|
6
|
-
export { a as GTM_INJECTION_KEY,
|
|
6
|
+
export { a as GTM_INJECTION_KEY, G as GtmPlugin, d as useGtm, x as useGtmClient, g as useGtmConsent, y as useGtmPush, f as useGtmReady };
|
|
7
7
|
//# sourceMappingURL=out.js.map
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/plugin.ts"],"names":["inject","createGtmClient","GTM_INJECTION_KEY","GtmPlugin","app","options","autoInit","onBeforeInit","clientOptions","client","context","value","state","regionOptions","callback","useGtmContext","useGtm","useGtmPush","useGtmConsent","setConsentDefaults","updateConsent","useGtmClient","useGtmReady"],"mappings":"AAAA,OAAS,UAAAA,MAA2C,MACpD,OACE,mBAAAC,MAOK,qBAkDA,IAAMC,EAA8C,OAAO,SAAS,EAe9DC,EAAY,CACvB,QAAQC,EAAUC,EAAiC,CACjD,GAAM,CAAE,SAAAC,EAAW,GAAM,aAAAC,EAAc,GAAGC,CAAc,EAAIH,EAEtDI,EAASR,EAAgBO,CAAa,EAEtCE,EAAsB,CAC1B,OAAAD,EACA,KAAOE,GAA0BF,EAAO,KAAKE,CAAK,EAClD,mBAAoB,CAACC,EAAqBC,IACxCJ,EAAO,mBAAmBG,EAAOC,CAAa,EAChD,cAAe,CAACD,EAAqBC,IACnCJ,EAAO,cAAcG,EAAOC,CAAa,EAC3C,UAAW,IAAMJ,EAAO,UAAU,EAClC,QAAUK,GAAiDL,EAAO,QAAQK,CAAQ,CACpF,EAGAV,EAAI,QAAQF,EAAmBQ,CAAO,EAGtCN,EAAI,OAAO,iBAAiB,KAAOM,EAG/BH,GACFA,EAAaE,CAAM,EAIjBH,GACFG,EAAO,KAAK,
|
|
1
|
+
{"version":3,"sources":["../src/plugin.ts"],"names":["inject","createGtmClient","GTM_INJECTION_KEY","GtmPlugin","app","options","autoInit","onBeforeInit","clientOptions","client","context","value","state","regionOptions","callback","originalUnmount","useGtmContext","useGtm","useGtmPush","useGtmConsent","setConsentDefaults","updateConsent","useGtmClient","useGtmReady"],"mappings":"AAAA,OAAS,UAAAA,MAA2C,MACpD,OACE,mBAAAC,MAOK,qBAkDA,IAAMC,EAA8C,OAAO,SAAS,EAe9DC,EAAY,CACvB,QAAQC,EAAUC,EAAiC,CACjD,GAAM,CAAE,SAAAC,EAAW,GAAM,aAAAC,EAAc,GAAGC,CAAc,EAAIH,EAEtDI,EAASR,EAAgBO,CAAa,EAEtCE,EAAsB,CAC1B,OAAAD,EACA,KAAOE,GAA0BF,EAAO,KAAKE,CAAK,EAClD,mBAAoB,CAACC,EAAqBC,IACxCJ,EAAO,mBAAmBG,EAAOC,CAAa,EAChD,cAAe,CAACD,EAAqBC,IACnCJ,EAAO,cAAcG,EAAOC,CAAa,EAC3C,UAAW,IAAMJ,EAAO,UAAU,EAClC,QAAUK,GAAiDL,EAAO,QAAQK,CAAQ,CACpF,EAGAV,EAAI,QAAQF,EAAmBQ,CAAO,EAGtCN,EAAI,OAAO,iBAAiB,KAAOM,EAG/BH,GACFA,EAAaE,CAAM,EAIjBH,GACFG,EAAO,KAAK,EAKd,IAAMM,EAAkBX,EAAI,QAAQ,KAAKA,CAAG,EAC5CA,EAAI,QAAU,KACZK,EAAO,SAAS,EACTM,EAAgB,EAE3B,CACF,EAKMC,EAAgB,IAAkB,CACtC,IAAMN,EAAUV,EAAOE,CAAiB,EACxC,GAAI,CAACQ,EACH,MAAM,IAAI,MACR,+KAEF,EAEF,OAAOA,CACT,EAkBaO,EAAS,IACbD,EAAc,EAoBVE,EAAa,IACjBF,EAAc,EAAE,KAwBZG,EAAgB,IAAqB,CAChD,GAAM,CAAE,mBAAAC,EAAoB,cAAAC,CAAc,EAAIL,EAAc,EAC5D,MAAO,CAAE,mBAAAI,EAAoB,cAAAC,CAAc,CAC7C,EAoBaC,EAAe,IACnBN,EAAc,EAAE,OAsBZO,EAAc,IAClBP,EAAc,EAAE","sourcesContent":["import { inject, type App, type InjectionKey } from 'vue';\nimport {\n createGtmClient,\n type ConsentRegionOptions,\n type ConsentState,\n type CreateGtmClientOptions,\n type DataLayerValue,\n type GtmClient,\n type ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\n/**\n * Options for the GTM Vue plugin.\n * Extends CreateGtmClientOptions with Vue-specific options.\n */\nexport interface GtmPluginOptions extends CreateGtmClientOptions {\n /**\n * Whether to automatically initialize GTM when the plugin is installed.\n * @default true\n */\n autoInit?: boolean;\n\n /**\n * Callback executed before GTM initialization.\n * Use this to set consent defaults.\n */\n onBeforeInit?: (client: GtmClient) => void;\n}\n\n/**\n * The GTM context value provided to components via inject().\n */\nexport interface GtmContext {\n /** The underlying GTM client instance */\n client: GtmClient;\n /** Push a value to the data layer */\n push: (value: DataLayerValue) => void;\n /** Set consent defaults (must be called before init) */\n setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n /** Update consent state */\n updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n /** Returns a promise that resolves when all GTM scripts are loaded */\n whenReady: () => Promise<ScriptLoadState[]>;\n /** Register a callback for when GTM scripts are ready */\n onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;\n}\n\n/**\n * Consent-specific API subset.\n */\nexport interface GtmConsentApi {\n setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n}\n\n/**\n * Injection key for the GTM context.\n * Use this with inject() to access the GTM context directly.\n */\nexport const GTM_INJECTION_KEY: InjectionKey<GtmContext> = Symbol('gtm-kit');\n\n/**\n * Vue 3 plugin for GTM Kit.\n *\n * @example\n * ```ts\n * import { createApp } from 'vue';\n * import { GtmPlugin } from '@jwiedeman/gtm-kit-vue';\n *\n * createApp(App)\n * .use(GtmPlugin, { containers: 'GTM-XXXXXX' })\n * .mount('#app');\n * ```\n */\nexport const GtmPlugin = {\n install(app: App, options: GtmPluginOptions): void {\n const { autoInit = true, onBeforeInit, ...clientOptions } = options;\n\n const client = createGtmClient(clientOptions);\n\n const context: GtmContext = {\n client,\n push: (value: DataLayerValue) => client.push(value),\n setConsentDefaults: (state: ConsentState, regionOptions?: ConsentRegionOptions) =>\n client.setConsentDefaults(state, regionOptions),\n updateConsent: (state: ConsentState, regionOptions?: ConsentRegionOptions) =>\n client.updateConsent(state, regionOptions),\n whenReady: () => client.whenReady(),\n onReady: (callback: (state: ScriptLoadState[]) => void) => client.onReady(callback)\n };\n\n // Provide the context to all components\n app.provide(GTM_INJECTION_KEY, context);\n\n // Also make it available as a global property for Options API users\n app.config.globalProperties.$gtm = context;\n\n // Call onBeforeInit hook if provided (for consent defaults)\n if (onBeforeInit) {\n onBeforeInit(client);\n }\n\n // Auto-initialize if enabled\n if (autoInit) {\n client.init();\n }\n\n // Register cleanup when the Vue app is unmounted\n // We wrap the app.unmount method to ensure proper teardown\n const originalUnmount = app.unmount.bind(app);\n app.unmount = () => {\n client.teardown();\n return originalUnmount();\n };\n }\n};\n\n/**\n * Internal helper to get the GTM context with proper error handling.\n */\nconst useGtmContext = (): GtmContext => {\n const context = inject(GTM_INJECTION_KEY);\n if (!context) {\n throw new Error(\n '[gtm-kit] useGtm() was called outside of a Vue app with GtmPlugin installed. ' +\n 'Make sure to call app.use(GtmPlugin, { containers: \"GTM-XXXXXX\" }) before using GTM composables.'\n );\n }\n return context;\n};\n\n/**\n * Composable to access the full GTM context.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtm } from '@jwiedeman/gtm-kit-vue';\n *\n * const { push, client, whenReady } = useGtm();\n *\n * function trackClick() {\n * push({ event: 'button_click', button_name: 'hero_cta' });\n * }\n * </script>\n * ```\n */\nexport const useGtm = (): GtmContext => {\n return useGtmContext();\n};\n\n/**\n * Composable to get just the push function.\n * Use this when you only need to push events.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtmPush } from '@jwiedeman/gtm-kit-vue';\n *\n * const push = useGtmPush();\n *\n * function handlePurchase() {\n * push({ event: 'purchase', value: 99.99 });\n * }\n * </script>\n * ```\n */\nexport const useGtmPush = (): ((value: DataLayerValue) => void) => {\n return useGtmContext().push;\n};\n\n/**\n * Composable to access consent management functions.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtmConsent } from '@jwiedeman/gtm-kit-vue';\n *\n * const { updateConsent } = useGtmConsent();\n *\n * function acceptAll() {\n * updateConsent({\n * ad_storage: 'granted',\n * analytics_storage: 'granted',\n * ad_user_data: 'granted',\n * ad_personalization: 'granted'\n * });\n * }\n * </script>\n * ```\n */\nexport const useGtmConsent = (): GtmConsentApi => {\n const { setConsentDefaults, updateConsent } = useGtmContext();\n return { setConsentDefaults, updateConsent };\n};\n\n/**\n * Composable to get the raw GTM client instance.\n * Use this when you need direct access to the client.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtmClient } from '@jwiedeman/gtm-kit-vue';\n *\n * const client = useGtmClient();\n *\n * // Check if client is initialized\n * if (client.isInitialized()) {\n * console.log('GTM is ready');\n * }\n * </script>\n * ```\n */\nexport const useGtmClient = (): GtmClient => {\n return useGtmContext().client;\n};\n\n/**\n * Composable to get the whenReady function.\n * Use this to wait for GTM scripts to load.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGtmReady } from '@jwiedeman/gtm-kit-vue';\n * import { onMounted } from 'vue';\n *\n * const whenReady = useGtmReady();\n *\n * onMounted(async () => {\n * const states = await whenReady();\n * console.log('GTM scripts loaded:', states);\n * });\n * </script>\n * ```\n */\nexport const useGtmReady = (): (() => Promise<ScriptLoadState[]>) => {\n return useGtmContext().whenReady;\n};\n\n// Extend Vue's ComponentCustomProperties for Options API users\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $gtm: GtmContext;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jwiedeman/gtm-kit-vue",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Vue 3 composables and plugin for GTM Kit - Google Tag Manager integration.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"typecheck": "tsc --noEmit"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@jwiedeman/gtm-kit": "^1.0
|
|
44
|
+
"@jwiedeman/gtm-kit": "^1.1.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"vue": "^3.3.0"
|