{"id":13400640,"url":"https://github.com/alinemorelli/react-gtm","last_synced_at":"2025-05-14T22:09:53.787Z","repository":{"id":39636624,"uuid":"94665163","full_name":"alinemorelli/react-gtm","owner":"alinemorelli","description":"React Google Tag Manager","archived":false,"fork":false,"pushed_at":"2024-08-09T20:52:22.000Z","size":396,"stargazers_count":667,"open_issues_count":64,"forks_count":140,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-07T06:02:57.564Z","etag":null,"topics":["googletagmanager","gtm","react","tagmanager"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alinemorelli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-18T04:33:55.000Z","updated_at":"2025-05-07T04:11:32.000Z","dependencies_parsed_at":"2024-06-20T05:48:40.507Z","dependency_job_id":"eee04b0f-64bc-4995-8b78-9de7a6b23042","html_url":"https://github.com/alinemorelli/react-gtm","commit_stats":{"total_commits":51,"total_committers":7,"mean_commits":7.285714285714286,"dds":0.5490196078431373,"last_synced_commit":"b1257405a82e900c174032a773a8ba70a8628081"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinemorelli%2Freact-gtm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinemorelli%2Freact-gtm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinemorelli%2Freact-gtm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinemorelli%2Freact-gtm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alinemorelli","download_url":"https://codeload.github.com/alinemorelli/react-gtm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254110431,"owners_count":22016392,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["googletagmanager","gtm","react","tagmanager"],"created_at":"2024-07-30T19:00:54.178Z","updated_at":"2025-05-14T22:09:48.764Z","avatar_url":"https://github.com/alinemorelli.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","React [🔝](#readme)"],"sub_categories":["Uncategorized"],"readme":"[![Build Status](https://img.shields.io/travis/alinemorelli/react-gtm/master.svg?style=flat-square)](https://travis-ci.org/alinemorelli/react-gtm)\n[![npm version](https://img.shields.io/npm/v/react-gtm-module.svg?style=flat-square)](https://www.npmjs.com/package/react-gtm-module)\n[![npm downloads](https://img.shields.io/npm/dm/react-gtm-module.svg?style=flat-square)](https://www.npmjs.com/package/react-gtm-module)\n\n# react-gtm-module\n### React Google Tag Manager Module\n\nThis is a Javascript module to [React](https://facebook.github.io/react/) based apps that implement Google Tag Manager. It is designed to use [GTM](https://developers.google.com/tag-manager/quickstart) snippet.\n\nYou can easily use custom dataLayer, multiple dataLayers and additional events.\n\n## Installation\n\n[npm](https://www.npmjs.com/):\n\n```bash\nnpm install react-gtm-module --save\n```\n\n## Usage\n\nInitializing GTM Module:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Router from 'react-router'\nimport routes from './routes'\n\n...\nimport TagManager from 'react-gtm-module'\n\nconst tagManagerArgs = {\n    gtmId: 'GTM-000000'\n}\n\nTagManager.initialize(tagManagerArgs)\n...\n\nconst app = document.getElementById('app')\nReactDOM.render(\u003cRouter routes={routes} /\u003e, app)\n\n```\n\n## DataLayer\n\n### Custom dataLayer example:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Router from 'react-router'\nimport routes from './routes'\n\n...\nimport TagManager from 'react-gtm-module'\n\nconst tagManagerArgs = {\n    gtmId: 'GTM-000000',\n    dataLayer: {\n        userId: '001',\n        userProject: 'project'\n    }\n}\n\nTagManager.initialize(tagManagerArgs)\n...\n\nconst app = document.getElementById('app')\nReactDOM.render(\u003cRouter routes={routes} /\u003e, app)\n\n```\n\n\n### Multiple dataLayer example:\n\nIf you need send multiple custom dataLayer you can initialize GTM Module on different components sending different dataLayers\n\nYou can initialize it normally:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Router from 'react-router'\nimport routes from './routes'\n\n...\nimport TagManager from 'react-gtm-module'\n\nconst tagManagerArgs = {\n    gtmId: 'GTM-000000',\n    dataLayerName: 'PageDataLayer'\n}\n\nTagManager.initialize(tagManagerArgs)\n...\n\nconst app = document.getElementById('app')\nReactDOM.render(\u003cRouter routes={routes} /\u003e, app)\n\n```\n\nAnd send your data in each page you want\n\n```js\nimport React from 'react'\n\n...\nimport TagManager from 'react-gtm-module'\n\nconst tagManagerArgs = {\n    dataLayer: {\n        userId: '001',\n        userProject: 'project',\n        page: 'home'\n    },\n    dataLayerName: 'PageDataLayer'\n}\n...\n\nconst Home = () =\u003e {\n    ...\n    TagManager.dataLayer(tagManagerArgs)\n    ...\n\n    return (\n        \u003cdiv className='home'\u003e\n            //your component code\n        \u003c/div\u003e\n    )\n}\n\nexport default Home\n\n```\n\n\n## Events\n\n### Example:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Router from 'react-router'\nimport routes from './routes'\n\n...\nimport TagManager from 'react-gtm-module'\n\nconst tagManagerArgs = {\n    gtmId: 'GTM-000000',\n    events: {\n        sendUserInfo: 'userInfo'\n    }\n}\n\nTagManager.initialize(tagManagerArgs)\n...\n\nconst app = document.getElementById('app')\nReactDOM.render(\u003cRouter routes={routes} /\u003e, app)\n```\n\n## Environments\n\nConfigure how Tag Manager will works between development and production server environments.\n\n### Example:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Router from 'react-router'\nimport routes from './routes'\n\n...\nimport TagManager from 'react-gtm-module'\n\nconst tagManagerArgs = {\n    gtmId: 'GTM-000000',\n    auth: '6sBOnZx1hqPcO01xPOytLK',\n    preview: 'env-2'\n}\n\nTagManager.initialize(tagManagerArgs)\n\n```\n\n##### How can I find auth and preview?\nGo to Google Tag Manager -\u003e ADMIN -\u003e Environments -\u003e Actions -\u003e Get Snippet.\nLook for gtm_auth and gtm_preview\n\n##### Don't know to use GTM environments? \n   - https://support.google.com/tagmanager/answer/6311518\n   - https://www.simoahava.com/analytics/better-qa-with-google-tag-manager-environments/\n\n\n\n|Value|Type|Required|Notes|\n|------|-----|-----|-----|\n|gtmId| `String`| Yes | GTM id, must be something like `GTM-000000`.|\n|dataLayer| `Object`| No | Object that contains all of the information that you want to pass to Google Tag Manager.|\n|dataLayerName| `String`| No | Custom name for dataLayer object.|\n|events| `Object`| No | Additional events such as 'gtm.start': new Date().getTime(),event:'gtm.js'.|\n|auth| `String` | No | used to set environments. |\n|preview| `String` | No | used to set environments, something like `env-00`. |\n\n\n### Note:\n\n- Disabling javascript in the browser can prevent the correct operation of this library if React is only being rendered on the client side.\n\n- Before implementing GTM in your application ensure that you have at least one published container, otherwise Google Tag Manager snippet will return 404.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falinemorelli%2Freact-gtm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falinemorelli%2Freact-gtm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falinemorelli%2Freact-gtm/lists"}