{"id":18058,"library":"react-gtm-module","title":"React Google Tag Manager Module","description":"react-gtm-module is a JavaScript library designed for React applications to streamline the integration of Google Tag Manager (GTM). It provides a programmatic API for managing the GTM snippet, initializing GTM with a specific container ID, and interacting with the `dataLayer` object. The current stable version is 2.0.11, last updated in November 2022. While the package remains functional, the original repository (alinemorelli/react-gtm) has seen limited activity since late 2020, with many pull requests and issues unaddressed. A community-maintained fork, `@sooro-io/react-gtm-module`, has emerged to provide continued development, TypeScript support, and additional features like CSP nonce and custom GTM script URLs. This original package (`react-gtm-module`) offers a straightforward abstraction for common GTM operations, simplifying custom `dataLayer` pushes, multiple `dataLayer` instances, and environment-specific GTM configurations without direct `window.dataLayer` manipulation.","status":"maintenance","version":"2.0.11","language":"javascript","source_language":"en","source_url":"https://github.com/alinemorelli/react-gtm","tags":["javascript","react","reactjs","react-component","google tag manager","tag manager","gtm"],"install":[{"cmd":"npm install react-gtm-module","lang":"bash","label":"npm"},{"cmd":"yarn add react-gtm-module","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-gtm-module","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, as this is a React component module.","package":"react","optional":false},{"reason":"Peer dependency, for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"The library exports `TagManager` as a default export, not a named export. Ensure curly braces are not used.","wrong":"import { TagManager } from 'react-gtm-module'","symbol":"TagManager","correct":"import TagManager from 'react-gtm-module'"},{"note":"This function is used to inject the GTM script and optionally push initial `dataLayer` variables. It should typically be called once early in your application's lifecycle.","symbol":"TagManager.initialize","correct":"TagManager.initialize({ gtmId: 'GTM-XXXXXX' })"},{"note":"Use `TagManager.dataLayer` for pushing events or data to the GTM `dataLayer` to maintain consistency and leverage the library's abstraction, especially when using a custom `dataLayerName`.","wrong":"window.dataLayer.push({ event: 'productClick', productId: '123' })","symbol":"TagManager.dataLayer","correct":"TagManager.dataLayer({ dataLayer: { event: 'productClick', productId: '123' } })"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport TagManager from 'react-gtm-module';\n\n// Replace 'GTM-XXXXXX' with your actual Google Tag Manager ID\nconst GTM_ID = process.env.GTM_ID ?? 'GTM-DEFAULT'; \n\nconst tagManagerArgs = {\n  gtmId: GTM_ID,\n  dataLayer: {\n    userId: '12345',\n    page: 'AppInitialization',\n    status: 'logged_in',\n  },\n  events: {\n    initEvent: 'gtm.js'\n  }\n};\n\nTagManager.initialize(tagManagerArgs);\n\nconst App = () => {\n  // Example of pushing an event after initialization\n  const trackButtonClick = () => {\n    TagManager.dataLayer({\n      dataLayer: {\n        event: 'buttonClick',\n        category: 'Interaction',\n        action: 'Click Me',\n        label: 'Homepage Button'\n      }\n    });\n    console.log('Button click event pushed to DataLayer');\n  };\n\n  return (\n    <div>\n      <h1>Welcome to the React GTM App</h1>\n      <button onClick={trackButtonClick}>Track This Button</button>\n      <p>GTM is initialized with ID: {GTM_ID}</p>\n      <p>Check your GTM debug view or browser console for dataLayer pushes.</p>\n    </div>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);\n","lang":"typescript","description":"Initializes Google Tag Manager with a specified ID and initial `dataLayer` values. It also demonstrates how to push a custom event to the `dataLayer` after initialization using a button click, simulating common tracking scenarios."},"warnings":[{"fix":"Verify the GTM ID in your Google Tag Manager account settings and ensure it matches the ID passed to `TagManager.initialize`.","message":"Ensure your `gtmId` is correct (e.g., `GTM-XXXXXX`). An incorrect ID can lead to a 404 error for the GTM script and no data being collected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For the original `react-gtm-module`, carefully review the `events` functionality. For consistent and updated behavior, consider migrating to `@sooro-io/react-gtm-module` and consult its migration guide.","message":"The `events` argument behavior in `TagManager.initialize` had a bug fix in the `@sooro-io/react-gtm-module` fork, which constituted a breaking change from the original `react-gtm-module`. If relying on initial events pushed via `initialize`, test thoroughly or consider migrating to the fork.","severity":"breaking","affected_versions":"<2.0.11"},{"fix":"Remove any manually placed GTM `<script>` tags from your `public/index.html` or equivalent file once `TagManager.initialize` is used.","message":"Avoid manually adding the GTM snippet to your `index.html` if using `react-gtm-module`. Doing so will result in double-tagging and potentially inaccurate data collection.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always pass the `dataLayerName` option to both `TagManager.initialize` and `TagManager.dataLayer` if you are using a custom `dataLayer` name.","message":"If using a custom `dataLayerName`, ensure consistency. If `TagManager.initialize` is called with `dataLayerName: 'MyDataLayer'`, subsequent `TagManager.dataLayer` calls must also specify `dataLayerName: 'MyDataLayer'` to push to the correct `dataLayer` instance.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Migrate your project to use `@sooro-io/react-gtm-module` by uninstalling `react-gtm-module` and installing `@sooro-io/react-gtm-module`, then updating import paths.","message":"The original `react-gtm-module` package has not been actively developed since late 2020. Consider using the community-maintained fork `@sooro-io/react-gtm-module` for ongoing support, new features (like CSP nonce and custom GTM script URLs), and TypeScript definitions.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure `import TagManager from 'react-gtm-module'` is present at the top of your file before `TagManager` is used.","cause":"The `TagManager` object was not imported or the import path is incorrect.","error":"Uncaught ReferenceError: TagManager is not defined"},{"fix":"Pass a valid GTM container ID (e.g., `GTM-XXXXXX`) as the `gtmId` property to the `TagManager.initialize` function.","cause":"The `gtmId` property was not provided or was empty in the `tagManagerArgs` object during `TagManager.initialize`.","error":"Error: GTM ID is required"},{"fix":"Double-check your `gtmId` for typos. Ensure you have published at least one version of your GTM container in the Google Tag Manager interface.","cause":"The provided GTM ID is incorrect, or the GTM container associated with the ID has not been published in Google Tag Manager.","error":"GTM script returns 404 error in network requests"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}