{"_id":"@sooro-io/react-gtm-module","_rev":"1-219bd8cf4ea30d455172d6a5569654c7","name":"@sooro-io/react-gtm-module","dist-tags":{"latest":"3.0.1"},"versions":{"3.0.0":{"name":"@sooro-io/react-gtm-module","version":"3.0.0","keywords":["react","reactjs","react-component","google tag manager","tag manager","gtm"],"author":{"url":"https://github.com/daniel-bartylla","name":"Daniel Bartylla","email":"daniel@sooro.io"},"license":"MIT","_id":"@sooro-io/react-gtm-module@3.0.0","maintainers":[{"name":"daniel-bartylla","email":"daniel@sooro.io"}],"homepage":"https://github.com/sooro-io/react-gtm-module#readme","bugs":{"url":"https://github.com/sooro-io/react-gtm-module/issues"},"dist":{"shasum":"7e78aa7b3cfac6c0964caa0f1607df224900c8e4","tarball":"https://registry.npmjs.org/@sooro-io/react-gtm-module/-/react-gtm-module-3.0.0.tgz","fileCount":23,"integrity":"sha512-BGiCRYQm2k53vbZMMF/isGpW2kVus39QPhf1SS6fSD0ua8+okWurE8Qv8yotJIezIemMbty+OkCkYSPdKsbL9g==","signatures":[{"sig":"MEYCIQC0mYXFRG99/3rrEN/y+xWGDw3fFO4TxT/RMaa2AXzAFAIhANxkhjdNyrFqIqy9nUDOlrJWaqBkiEVrbs5YdV45t6Ug","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30517},"main":"dist/index.js","types":"types/index.d.ts","gitHead":"8165a6e34df40dd66a2c8dd9bb6651bb083d5110","scripts":{"dry":"npm run build && npm publish --dry-run","jest":"jest","lint":"eslint .","test":"npm run lint && npm run jest","build":"babel src -d dist --ignore src/__tests__","publish":"npm publish --access public"},"_npmUser":{"name":"daniel-bartylla","email":"daniel@sooro.io"},"repository":{"url":"git+https://github.com/sooro-io/react-gtm-module.git","type":"git"},"_npmVersion":"10.2.4","description":"React Google Tag Manager Module","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.57.0","@babel/cli":"^7.23.9","babel-jest":"^29.7.0","@babel/core":"^7.24.0","@babel/preset-env":"^7.24.0","@babel/preset-react":"^7.23.3","@babel/eslint-parser":"^7.23.10","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/react-gtm-module_3.0.0_1710494688662_0.2920034426662983","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"@sooro-io/react-gtm-module","version":"3.0.1","description":"React Google Tag Manager Module","main":"dist/index.js","types":"types/index.d.ts","scripts":{"lint":"eslint .","jest":"jest","test":"npm run lint && npm run jest","build":"babel src -d dist --ignore src/__tests__","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/sooro-io/react-gtm-module.git"},"author":{"name":"Daniel Bartylla","email":"daniel@sooro.io","url":"https://github.com/daniel-bartylla"},"license":"MIT","bugs":{"url":"https://github.com/sooro-io/react-gtm-module/issues"},"homepage":"https://github.com/sooro-io/react-gtm-module#readme","keywords":["react","reactjs","react-component","google tag manager","tag manager","gtm"],"devDependencies":{"@babel/cli":"^7.26.4","@babel/core":"^7.26.0","@babel/eslint-parser":"^7.25.9","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3","babel-jest":"^29.7.0","eslint":"^8.57.1","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0"},"_id":"@sooro-io/react-gtm-module@3.0.1","gitHead":"8113f708d3d864ee6bc42a7fe2a9085ff8cb94c4","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-lksbK1vKvkRsritcKObh9DjqiKpGQB99O4R89vT2KdHWU9SbR9eX/EgjBn7m3VR6GC9wF25/YX/D4lADRfjZcw==","shasum":"0089cc8f0d21dba7c1ecaa553027cd45789d9731","tarball":"https://registry.npmjs.org/@sooro-io/react-gtm-module/-/react-gtm-module-3.0.1.tgz","fileCount":21,"unpackedSize":27089,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtEoTbWLoGBikMgEOZ+InE1Ivp8ZhMf16vZvu1FV3e9wIgVtjM661tZWooOar3P6KapobBW4KFsjXmDOrte68cfnc="}]},"_npmUser":{"name":"daniel-bartylla","email":"daniel@sooro.io"},"directories":{},"maintainers":[{"name":"daniel-bartylla","email":"daniel@sooro.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gtm-module_3.0.1_1733486172153_0.6867367573911338"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-15T09:24:48.587Z","modified":"2024-12-06T11:56:12.519Z","3.0.0":"2024-03-15T09:24:48.815Z","3.0.1":"2024-12-06T11:56:12.342Z"},"bugs":{"url":"https://github.com/sooro-io/react-gtm-module/issues"},"author":{"name":"Daniel Bartylla","email":"daniel@sooro.io","url":"https://github.com/daniel-bartylla"},"license":"MIT","homepage":"https://github.com/sooro-io/react-gtm-module#readme","keywords":["react","reactjs","react-component","google tag manager","tag manager","gtm"],"repository":{"type":"git","url":"git+https://github.com/sooro-io/react-gtm-module.git"},"description":"React Google Tag Manager Module","maintainers":[{"name":"daniel-bartylla","email":"daniel@sooro.io"}],"readme":"# react-gtm-module\n\n### React Google Tag Manager Module\n\nThis is a JS module to [React](https://facebook.github.io/react/)-based apps that implement Google Tag Manager (GTM). It is designed so that the [GTM snippet](https://developers.google.com/tag-manager/quickstart) can be injected and used with minimal effort.\n\nIt was [originally created and maintained](https://github.com/alinemorelli/react-gtm) by [@alinemorelli](https://github.com/alinemorelli), but has not been further developed since September 2020. A whole series of feature requests and pull requests have remained unprocessed since then, which have been partly included here. On top a few further changes and a fix were applied. You can find out more about it in the [comparison section](#comparison-to-orginal-module).  \nA [migration guide](#migration-guide) is provided too.\n\n## Getting Started\n\nOpen up your terminal and install the package with your preferred package manager.\n\n```bash\nnpm install @sooro-io/react-gtm-module\n# OR\nyarn add @sooro-io/react-gtm-module\n```\n\nYou need to adjust the code in your React application's entry file. If you started your application via Create React App, it's about `src/index.js` or `src/index.ts`.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport './index.css'\nimport App from './App'\n\n// start changes\nimport TagManager from '@sooro-io/react-gtm-module'\n\nconst tagManagerArgs = {\n    gtmId: 'GTM-xxxxxx', // replace with your GTM container ID\n}\n\nTagManager.initialize(tagManagerArgs)\n// end changes\n\nconst root = ReactDOM.createRoot(document.getElementById('root'))\nroot.render(\n    <React.StrictMode>\n        <App />\n    </React.StrictMode>,\n)\n```\n\nThat's it, you have successfully added the GTM to your react application. You can start a preview session of your GTM container to confirm that everything is working.\n\nAlternatively, you can go to the console in your browser tab and enter `google_tag_manager`. You should see a few informations and functions.\n\nIf you are facing problems, please check if you receive a 404 error for the GTM script. If so, no changes have been published to the GTM container yet. Once you have done this, the error will disappear and the GTM script will be injected.\n\n## Interact with the dataLayer\n\nYou can interact with the dataLayer (to trigger events or push new data to it) in your components like this:\n\n```js\nimport React from 'react'\nimport TagManager from 'react-gtm-module'\n\nconst Home = () => {\n    TagManager.dataLayer({\n        dataLayer: {\n            event: 'home_viewed',\n            // add other properties to set a value\n            // to unset a property use undefined as value\n        },\n    })\n\n    return (\n        <div>\n            <h1>Home</h1>\n        </div>\n    )\n}\n\nexport default Home\n```\n\nIf you are using multiple dataLayers you can define to which dataLayer the object is added by using the `dataLayerName` property.\n\n```js\nTagManager.dataLayer({\n    dataLayer: {\n        event: 'identified',\n        userId: 'dc26b3de-5186-4fa5-a89a-60762111a5b4',\n    },\n    dataLayerName: 'personalInformation',\n})\n```\n\n## Configuration\n\nTo adapt your GTM configuration to your needs, a number of options are available. You can find examples for each of them below the table.\n\n| Value                                  | Type               | Required | Notes                                                                                                                  |\n| -------------------------------------- | ------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------- |\n| gtmId                                  | `String`           | Yes      | The ID of your GTM Container.                                                                                          |\n| [dataLayer](#datalayer)                | `Object`           | No       | Information that should be added to the dataLayer before initialization.                                               |\n| [dataLayerName](#datalayername)        | `String`           | No       | Customize the name of the dataLayer object.                                                                            |\n| [events](#events)                      | `Array of Objects` | No       | Additional events which will be added to the dataLayer during initialization.                                          |\n| [auth](#auth--preview-environments)    | `String`           | No       | If you use GTM's environment function, you need to pass the gtm_auth query parameter here.                             |\n| [preview](#auth--preview-environments) | `String`           | No       | If you use GTM's environment function, you need to pass the gtm_preview query parameter here.                          |\n| [nonce](#nonce)                        | `String`           | No       | Set the nonce if you use a Content Security Policy.                                                                    |\n| [source](#source)                      | `String`           | No       | Customize the GTM script URL if you serve the Google scripts through your tagging servers and/or mask your GTM script. |\n\n### dataLayer\n\nInformation that should be added to the dataLayer before initialization. The information will be added before `gtm.js` event.\n\n```js\nconst tagManagerArgs = {\n    gtmId: 'GTM-xxxxxx',\n    dataLayer: {\n        currency: 'USD',\n        language: 'en',\n    },\n}\n```\n\n### dataLayerName\n\nCustomize the name of the dataLayer object.\n\n```js\nconst tagManagerArgs = {\n    gtmId: 'GTM-xxxxxx',\n    dataLayerName: 'personalInformation',\n}\n```\n\n### events\n\nAdditional events which will be added to the dataLayer during initialization (after `gtm.js` event).\n\n```js\nconst tagManagerArgs = {\n    gtmId: 'GTM-xxxxxx',\n    events: [\n        {\n            event: 'consent_loaded',\n            consentAnalytics: true,\n            consentAds: false,\n            consentPreferences: true,\n        },\n    ],\n}\n```\n\n### auth & preview (Environments)\n\nYou have to set both properties to interact with an certain environment. Environments are an advanced GTM feature. [Here is a guide which helps you to implement it](https://marketlytics.com/blog/google-tag-manager-environments/) if you are interested.\n\nYou have to manually extract the necessary information from the environment snippet. Inside your GTM container go to **Admin** -> **Environments**. On this page you see a list of all your environments. On the right you have the **Actions** for each entry. Click on it and use the function **Get Snippet**.\n\n```js\nconst tagManagerArgs = {\n    gtmId: 'GTM-xxxxxx',\n    auth: '6sBOnZx1hqPcO01xPOytLK', // add here the value of gtm_auth\n    preview: 'env-staging', // add here the value of gtm_preview\n}\n```\n\nPlease note that `&gtm_cookies_win=x` will be automatically added to the GTM script URL as soon the two properties are set. [Please check the article of Simo Ahava for more details and challenges about it](https://www.simoahava.com/analytics/better-qa-with-google-tag-manager-environments/).\n\n### nonce\n\n[Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) helps to mitigate certain types of attacks. This includes especially cross-site scripting as only certain sources of scripts (domains) are allowed to be executed. [GTM supports to feature natively, you can find a whole guide in docs](https://developers.google.com/tag-platform/security/guides/csp).\n\n```js\nconst tagManagerArgs = {\n    gtmId: 'GTM-xxxxxx',\n    nonce: 'KCenr5lELncZ6JJlHmerd9aIjddJfBEZ', // from you server\n}\n```\n\n### source\n\nIf you use your GTM Tagging Servers to serve Google scripts, you have to use a custom URL. This property allows you to overwrite the default one `https://googletagmanager.com/gtm.js` with a custom value.\n\nFor more information about this feature [read the article in GTM docs](https://developers.google.com/tag-platform/tag-manager/server-side/dependency-serving?tag=gtm). It contains also a step-by-step guide.\n\n```js\nconst tagManagerArgs = {\n    gtmId: 'GTM-xxxxxx',\n    source: 'https://gtm.example.com/gtm.js', // URL including script!\n}\n```\n\n## Comparison to Orginal Module\n\nBasically it is still the JS module you know. However, there are a number of additional functions and a bug fix, which is a breaking change.\n\n**Changes and improvements:**\n\n-  support for Content Security Policy to mitigate risks related to cross-site scripting\n-  possibility to overwrite the GTM script URL in order to use certain functions of GTM tagging servers, which can lead to improved privacy\n-  addition of TypeScript definitions into the package itself\n-  simplified documentation for all features and various corrections and additions\n-  improved test coverage to 100% (based on Jest)\n-  updated depedencies and the removal of unnecessary ones\n\n**Bug fix:**\nThe `events` argument was inteded to add events into the dataLayer before GTM gets initialized. Against the description only properties could be added. We fixed this problem and you are now able to add events. Properties can be still added by the setting the initial dataLayer (`dataLayer` arg).\n\n## Migration Guide\n\n**Dependencies**  \nAll you have to do is change the package. The previous TypeScript definitions are no longer required as the types are now included in the package.\n\n```bash\nnpm uninstall react-gtm-module @types/react-gtm-module\nnpm install @sooro-io/react-gtm-module\n\n# OR\n\nyarn remove react-gtm-module @types/react-gtm-module\nyarn install @sooro-io/react-gtm-module\n```\n\n**Imports**\n\n```diff\n- import TagManager from 'react-gtm-module'\n+ import TagManager from '@sooro-io/react-gtm-module'\n```\n\n**`events` arg**  \nIf you use the `events` arg in the initialization you need to switch to the `dataLayer` arg. If you want to add events, [please check the example](#events).\n\n```diff\nconst tagManagerArgs  = {\n    gtmId: 'GTM-xxxxxx',\n-   events: {\n-       currency: 'USD',\n-       language: 'en',\n-   },\n+   dataLayer: {\n+       currency: 'USD',\n+       language: 'en',\n+   },\n}\n```\n","readmeFilename":"README.md"}