{"_rev":"4-a426f273b2c1404691a8e4f76bdfbec3","time":{"created":"2026-01-22T07:09:19.605Z","modified":"2026-01-22T07:09:20.070Z","1.0.1":"2026-01-19T06:45:33.123Z","1.0.2":"2026-01-22T07:09:19.862Z"},"_id":"@72pranjal/gtm-helper-core","name":"@72pranjal/gtm-helper-core","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@72pranjal/gtm-helper-core","version":"1.0.2","publishConfig":{"access":"public"},"description":"Framework-agnostic Google Tag Manager helper with adapters for React, Vue, Nuxt, and plain JS","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.js","types":"./dist/index.d.ts"},"./core":{"import":"./dist/core/index.esm.js","require":"./dist/core/index.js","types":"./dist/core/index.d.ts"},"./react":{"import":"./dist/react/index.esm.js","require":"./dist/react/index.js","types":"./dist/react/index.d.ts"},"./vue":{"import":"./dist/vue/index.esm.js","require":"./dist/vue/index.js","types":"./dist/vue/index.d.ts"},"./nuxt":{"import":"./dist/nuxt/index.esm.js","require":"./dist/nuxt/index.js","types":"./dist/nuxt/index.d.ts"},"./vanilla":{"import":"./dist/vanilla/index.esm.js","require":"./dist/vanilla/index.js","types":"./dist/vanilla/index.d.ts"}},"scripts":{"build":"npx rollup -c","dev":"npx rollup -c -w","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/72pranjal/gtm-helper.git"},"keywords":["gtm","google-tag-manager","react","vue","nuxt","analytics","tracking"],"author":{"name":"Pranjal Gupta","email":"pranjal7253@gmail.com"},"license":"MIT","devDependencies":{"@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-node-resolve":"^15.3.1","@rollup/plugin-typescript":"^11.1.6","@types/node":"^20.10.6","rollup":"^4.9.0","rollup-plugin-dts":"^6.1.0","typescript":"^5.3.3"},"peerDependencies":{"react":">=16.8.0","vue":">=2.6.0 || >=3.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"vue":{"optional":true}},"dependencies":{"tslib":"^2.8.1"},"_id":"@72pranjal/gtm-helper-core@1.0.2","gitHead":"8bd5a5668907adc3735f049afd246dbd6439e477","bugs":{"url":"https://github.com/72pranjal/gtm-helper/issues"},"homepage":"https://github.com/72pranjal/gtm-helper#readme","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-e2p/2x2zV9MLMJowHYZ49DUk0/SwPOVzWe03Gil7a3lWjWN9vE+FgPrd0T0aE6kMHgP4ZjYxbRMqG1mQADk4JA==","shasum":"7d67c4f5df58d154240f2c0df60a6512eefa8b91","tarball":"https://registry.npmjs.org/@72pranjal/gtm-helper-core/-/gtm-helper-core-1.0.2.tgz","fileCount":33,"unpackedSize":202715,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHLAzBIX7dUNSUimZbgtllyIY4iu2yr8zqrp+MRsyt2+AiAhUoBEIgejG4gXj3q6QH0Tgm2rdid3p3oNmzhacWdjIg=="}]},"_npmUser":{"name":"72pranjal","email":"pranjal7253@gmail.com"},"directories":{},"maintainers":[{"name":"72pranjal","email":"pranjal7253@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gtm-helper-core_1.0.2_1769065759702_0.8874408396836146"},"_hasShrinkwrap":false}},"maintainers":[{"name":"72pranjal","email":"pranjal7253@gmail.com"}],"description":"Framework-agnostic Google Tag Manager helper with adapters for React, Vue, Nuxt, and plain JS","homepage":"https://github.com/72pranjal/gtm-helper#readme","keywords":["gtm","google-tag-manager","react","vue","nuxt","analytics","tracking"],"repository":{"type":"git","url":"git+https://github.com/72pranjal/gtm-helper.git"},"author":{"name":"Pranjal Gupta","email":"pranjal7253@gmail.com"},"bugs":{"url":"https://github.com/72pranjal/gtm-helper/issues"},"license":"MIT","readme":"# GTM Helper\n\nA framework-agnostic Google Tag Manager helper with thin adapters for React, Vue, Nuxt, and plain JavaScript.\n\n## Architecture\n\nThis package follows a **framework-agnostic core + thin adapters** architecture:\n\n- **Core**: Framework-independent GTM functionality\n- **Adapters**: Thin wrapper layers for React, Vue, Nuxt, and vanilla JS\n\n## Installation\n\n```bash\nnpm install @gtm-helper/core\n# or\nyarn add @gtm-helper/core\n# or\npnpm add @gtm-helper/core\n```\n\n## Usage\n\n### React (All Versions 16.8+)\n\n#### Using Hooks (Recommended)\n\n```tsx\nimport { useGTM, useGTMEvent } from '@gtm-helper/core/react';\n\nfunction App() {\n  // Initialize GTM\n  const gtm = useGTM({\n    containerId: 'GTM-XXXXXXX',\n    dataLayer: 'dataLayer',\n    debug: false,\n  });\n\n  // Or use the event hook\n  const { push } = useGTMEvent();\n\n  const handleClick = () => {\n    push({\n      event: 'button_click',\n      category: 'engagement',\n      action: 'click',\n    });\n  };\n\n  return <button onClick={handleClick}>Track Me</button>;\n}\n```\n\n#### Using Provider (Recommended for App-wide setup)\n\n```tsx\nimport { GTMProvider, useGTMContext } from '@gtm-helper/core/react';\n\nfunction App() {\n  return (\n    <GTMProvider\n      options={{\n        containerId: 'GTM-XXXXXXX',\n        dataLayer: 'dataLayer',\n      }}\n    >\n      <YourApp />\n    </GTMProvider>\n  );\n}\n\n// In any child component\nfunction YourComponent() {\n  const gtm = useGTMContext();\n\n  const trackEvent = () => {\n    gtm.push({\n      event: 'custom_event',\n      data: { key: 'value' },\n    });\n  };\n\n  return <button onClick={trackEvent}>Track</button>;\n}\n```\n\n### Vue (All Versions 2.6+ and 3.x)\n\n#### Vue 3\n\n```typescript\n// main.ts\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport VueGTM from '@gtm-helper/core/vue';\n\nconst app = createApp(App);\n\napp.use(VueGTM, {\n  containerId: 'GTM-XXXXXXX',\n  dataLayer: 'dataLayer',\n});\n\napp.mount('#app');\n```\n\n#### Vue 2\n\n```typescript\n// main.js\nimport Vue from 'vue';\nimport App from './App.vue';\nimport VueGTM from '@gtm-helper/core/vue';\n\nVue.use(VueGTM, {\n  containerId: 'GTM-XXXXXXX',\n  dataLayer: 'dataLayer',\n});\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app');\n```\n\n#### Using in Components\n\n**Options API (Vue 2 & 3):**\n\n```vue\n<template>\n  <button @click=\"trackClick\">Track Me</button>\n</template>\n\n<script>\nexport default {\n  methods: {\n    trackClick() {\n      this.$gtm.push({\n        event: 'button_click',\n        category: 'engagement',\n      });\n    },\n  },\n};\n</script>\n```\n\n**Composition API (Vue 3):**\n\n```vue\n<template>\n  <button @click=\"trackClick\">Track Me</button>\n</template>\n\n<script setup>\nimport { useGTM } from '@gtm-helper/core/vue';\n\nconst gtm = useGTM();\n\nfunction trackClick() {\n  gtm.push({\n    event: 'button_click',\n    category: 'engagement',\n  });\n}\n</script>\n```\n\n#### Using GTM Directive (Vue 3)\n\n```vue\n<template>\n  <button v-gtm=\"{ event: 'click', category: 'engagement' }\">\n    Track Me\n  </button>\n</template>\n\n<script setup>\nimport { registerGTMDirective } from '@gtm-helper/core/vue';\nimport { createApp } from 'vue';\n\n// Register directive globally in your app setup\n// Or use it as a local directive in the component\n</script>\n```\n\n### Nuxt (All Versions 2.x and 3.x)\n\n#### Nuxt 3 Module\n\n```typescript\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@gtm-helper/core/nuxt'],\n  gtm: {\n    containerId: 'GTM-XXXXXXX',\n    dataLayer: 'dataLayer',\n  },\n});\n```\n\nOr use runtime config:\n\n```typescript\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  runtimeConfig: {\n    public: {\n      gtm: {\n        containerId: process.env.GTM_CONTAINER_ID,\n        dataLayer: 'dataLayer',\n      },\n    },\n  },\n});\n```\n\n#### Nuxt 2 Plugin\n\n```javascript\n// plugins/gtm.client.js\nimport VueGTM from '@gtm-helper/core/vue';\n\nexport default ({ app }, inject) => {\n  app.use(VueGTM, {\n    containerId: 'GTM-XXXXXXX',\n    dataLayer: 'dataLayer',\n  });\n};\n```\n\n```typescript\n// nuxt.config.js\nexport default {\n  plugins: [\n    { src: '~/plugins/gtm.client.js', mode: 'client' },\n  ],\n};\n```\n\n#### Using in Nuxt Components\n\n**Nuxt 3 (Composition API):**\n\n```vue\n<template>\n  <button @click=\"trackClick\">Track Me</button>\n</template>\n\n<script setup>\nimport { useGTM } from '@gtm-helper/core/nuxt';\n\nconst gtm = useGTM();\n\nfunction trackClick() {\n  gtm.push({\n    event: 'button_click',\n    category: 'engagement',\n  });\n}\n</script>\n```\n\n**Nuxt 2/3 (Options API):**\n\n```vue\n<template>\n  <button @click=\"trackClick\">Track Me</button>\n</template>\n\n<script>\nexport default {\n  methods: {\n    trackClick() {\n      this.$gtm.push({\n        event: 'button_click',\n        category: 'engagement',\n      });\n    },\n  },\n};\n</script>\n```\n\n### Plain JavaScript (Vanilla JS)\n\n```javascript\nimport { init, push, getInstance } from '@gtm-helper/core/vanilla';\n\n// Initialize GTM\nconst gtm = init({\n  containerId: 'GTM-XXXXXXX',\n  dataLayer: 'dataLayer',\n  debug: false,\n});\n\n// Push events\npush({\n  event: 'page_view',\n  page_path: '/home',\n});\n\n// Or use the instance directly\nconst instance = getInstance();\ninstance.push({\n  event: 'button_click',\n  category: 'engagement',\n});\n```\n\n#### Using with Script Tag (UMD)\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <script src=\"https://unpkg.com/@gtm-helper/core/dist/vanilla/index.js\"></script>\n</head>\n<body>\n  <script>\n    // Initialize GTM\n    const gtm = GTMHelper.init({\n      containerId: 'GTM-XXXXXXX',\n      dataLayer: 'dataLayer',\n    });\n\n    // Push events\n    gtm.push({\n      event: 'page_view',\n      page_path: window.location.pathname,\n    });\n\n    // Track button clicks\n    document.getElementById('track-btn').addEventListener('click', () => {\n      gtm.push({\n        event: 'button_click',\n        category: 'engagement',\n      });\n    });\n  </script>\n</body>\n</html>\n```\n\n## Core API (Framework-Agnostic)\n\nYou can also use the core directly:\n\n```typescript\nimport { initGTM, pushEvent, getGTM, createGTM } from '@gtm-helper/core';\n\n// Initialize\nconst gtm = initGTM({\n  containerId: 'GTM-XXXXXXX',\n  dataLayer: 'dataLayer',\n});\n\n// Push events\npushEvent({\n  event: 'custom_event',\n  data: { key: 'value' },\n});\n\n// Get singleton instance\nconst instance = getGTM();\n\n// Create new instance (with custom dataLayer name)\nconst customInstance = createGTM('myDataLayer');\n```\n\n## API Reference\n\n### GTMOptions\n\n```typescript\ninterface GTMOptions {\n  containerId: string;        // Required: Your GTM container ID\n  dataLayer?: string;         // Optional: DataLayer name (default: 'dataLayer')\n  preview?: string;           // Optional: GTM preview mode\n  auth?: string;              // Optional: GTM auth parameter\n  debug?: boolean;            // Optional: Enable debug mode\n}\n```\n\n### GTMInstance\n\n```typescript\ninterface GTMInstance {\n  push: (data: DataLayerEvent | any) => void;\n  load: (options: GTMOptions) => void;\n  init: (options: GTMOptions) => void;\n  dataLayer: any[];\n}\n```\n\n### Methods\n\n- `initGTM(options: GTMOptions)`: Initialize GTM with options\n- `pushEvent(event: DataLayerEvent, dataLayerName?: string)`: Push event to dataLayer\n- `getGTM(dataLayerName?: string)`: Get singleton GTM instance\n- `createGTM(dataLayerName?: string)`: Create new GTM instance\n\n## TypeScript Support\n\nFull TypeScript support is included with type definitions for all adapters.\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- IE 11+ (with polyfills)\n\n## SSR Support\n\n- **React**: Works with Next.js, Remix, etc. (use `useEffect`/Provider)\n- **Vue**: Works with Nuxt 2/3, SSR apps (client-only plugin)\n- **Nuxt**: Built-in SSR support\n- **Vanilla**: Works in browser environments only\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n","readmeFilename":"README.md"}