{"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.","language":"javascript","status":"maintenance","last_verified":"Sat Apr 25","install":{"commands":["npm install react-gtm-module"],"cli":null},"imports":["import TagManager from 'react-gtm-module'","TagManager.initialize({ gtmId: 'GTM-XXXXXX' })","TagManager.dataLayer({ dataLayer: { event: 'productClick', productId: '123' } })"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}