{"id":28092438,"url":"https://github.com/phantomstudios/next-gtm","last_synced_at":"2025-05-13T13:14:58.774Z","repository":{"id":43014677,"uuid":"383841930","full_name":"phantomstudios/next-gtm","owner":"phantomstudios","description":"A lightweight Next library to implement custom Google Tag Manager events.","archived":false,"fork":false,"pushed_at":"2025-05-02T11:59:59.000Z","size":1945,"stargazers_count":12,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-13T13:14:49.263Z","etag":null,"topics":["analytics","googletagmanager","gtm","lightweight","next","nextjs","react","tagmanager","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/phantomstudios.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":"SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-07-07T15:19:14.000Z","updated_at":"2025-05-02T11:58:44.000Z","dependencies_parsed_at":"2023-10-04T08:14:21.790Z","dependency_job_id":"973b12c3-9bdd-4956-aa51-5a3034dea851","html_url":"https://github.com/phantomstudios/next-gtm","commit_stats":{"total_commits":29,"total_committers":5,"mean_commits":5.8,"dds":"0.24137931034482762","last_synced_commit":"65fb4e22bee88de37afe0fee3ba1d3ad70487dc1"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phantomstudios%2Fnext-gtm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phantomstudios%2Fnext-gtm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phantomstudios%2Fnext-gtm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phantomstudios%2Fnext-gtm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phantomstudios","download_url":"https://codeload.github.com/phantomstudios/next-gtm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948503,"owners_count":21988961,"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":["analytics","googletagmanager","gtm","lightweight","next","nextjs","react","tagmanager","typescript"],"created_at":"2025-05-13T13:14:58.093Z","updated_at":"2025-05-13T13:14:58.761Z","avatar_url":"https://github.com/phantomstudios.png","language":"TypeScript","readme":"# @phntms/next-gtm\n\n[![NPM version][npm-image]][npm-url]\n[![Actions Status][ci-image]][ci-url]\n[![PR Welcome][npm-downloads-image]][npm-downloads-url]\n\nA lightweight Next library to implement custom Google Tag Manager events.\n\n## Introduction\n\nExtends [@phntms/react-gtm](https://www.npmjs.com/package/@phntms/react-gtm) with native support for [Next.JS 12](https://nextjs.org/blog/next-12), utilizing the new Script Component to **automatically prioritize loading of third-party scripts to improve performance**.\n\n## Installation\n\nInstall this package with `npm`.\n\n```bash\nnpm i @phntms/next-gtm\n```\n\n## Usage\n\n### \u0026lt;TrackingHeadScript /\u003e\n\n| Property       | Type      | Default   | Notes                                                                                                    |\n| -------------- | --------- | --------- | -------------------------------------------------------------------------------------------------------- |\n| **id**         | `string`  | undefined | ID that uniquely identifies GTM Container. Example format: `GTM-xxxxxx`.                                 |\n| **disable**    | `boolean` | false     | Used to disable tracking events (isGTM=false only). Use if you want user to consent to cookies first     |\n| **isGTM**      | `boolean` | false     | Loads the gtag.js script by default (legacy behaviour - compatible with UA/GA4/GTM), else, loads gtm.js. |\n| **GTMAuth**    | `string`  | undefined | (isGTM = true required) Optional parameter to load a non-default GTM environment, e.g. for testing GTM.  |\n| **GTMPreview** | `string`  | undefined | (isGTM = true required) Optional parameter to load a non-default GTM environment, e.g. for testing GTM.  |\n\nTo initialize GTM, add `TrackingHeadScript` to the `head` of the page.\n\nThis package utilizes [next/script](https://nextjs.org/docs/basic-features/script), which means you **can't** place it inside a `next/head`. Further, `TrackingHeadScript` should not be used in `pages/_document.js` as `next/script` has client-side functionality to ensure loading order.\n\nThe `isGTM`, `GTMAuth` and `GTMPreview` optional properties are a backwards-compatible update to provide multiple GTM environment support to this library. Using multiple GTM container environments allow developers to test different GTM config versions on a preview codebase before publishing the change to the production GTM container.\n\n- If the project is known to be using GTM - the `isGTM` should be set to `true` regardless of the environment (the default `false` will continue to function though).\n- Typically you want to set the `GTMAuth` and `GTMPreview` properties (obtained from the GTM preview environment script snippet) via optional environment variables in the applications' preview environments - when left as undefined - GTM will default to the master (production) container config.\n\nExample usage:\n\n```JSX\nimport type { AppProps } from \"next/app\";\nimport { TrackingHeadScript } from \"@phntms/next-gtm\";\n\nconst GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID || \"\";\n\nconst App = ({ Component }: AppProps) =\u003e (\n  \u003c\u003e\n    \u003cTrackingHeadScript id={GA_TRACKING_ID} isGTM={true} /\u003e\n    \u003cComponent /\u003e\n  \u003c/\u003e\n);\n\nexport default App;\n```\n\n**Note**: If used alongside any cookie consent scripts, `\u003cTrackingHeadScript /\u003e` must be loaded after.\n\n### Using trackEvent() and enableTracking()\n\nFor how to use `trackEvent()`, `enableTracking()`, learn more about `EventDataProps` and how this library extends `window.dataLayer`, please reference [@phntms/react-gtm](https://www.npmjs.com/package/@phntms/react-gtm).\n\n## 🍰 Contributing\n\nWant to get involved, or found an issue? Please contribute using the GitHub Flow. Create a branch, add commits, and open a Pull Request or submit a new issue.\n\nPlease read `CONTRIBUTING` for details on our `CODE_OF_CONDUCT`, and the process for submitting pull requests to us!\n\n[npm-image]: https://img.shields.io/npm/v/@phntms/next-gtm.svg?style=flat-square\u0026logo=react\n[npm-url]: https://npmjs.org/package/@phntms/next-gtm\n[npm-downloads-image]: https://img.shields.io/npm/dm/@phntms/next-gtm.svg\n[npm-downloads-url]: https://npmcharts.com/compare/@phntms/next-gtm?minimal=true\n[ci-image]: https://github.com/phantomstudios/next-gtm/workflows/Test/badge.svg\n[ci-url]: https://github.com/phantomstudios/next-gtm/actions\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphantomstudios%2Fnext-gtm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphantomstudios%2Fnext-gtm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphantomstudios%2Fnext-gtm/lists"}