react-gtm-module

react-gtm-module is a small JavaScript library that wires Google Tag Manager into React (or any JS) applications without hand-copying GTM’s snippet into index.html. Calling TagManager.initialize({ gtmId }) injects the head script and body noscript iframe GTM expects, and exposes a dataLayer() helper for pushing custom events and variables to GTM after the initial page load.

The library also supports GTM’s auth/preview query parameters for testing against draft containers, multiple named dataLayers for apps that need to keep separate data streams, and custom event payloads merged into the initial gtm.js bootstrap script — covering the handful of GTM integration patterns most single-page apps actually need.

What You Get

• One-call GTM initialization - TagManager.initialize({ gtmId }) injects the head script and body noscript tag GTM requires.
• Custom dataLayer support - pass an initial dataLayer object at initialize time and push further updates later via TagManager.dataLayer().
• Multiple named dataLayers - set a custom dataLayerName to run several independent GTM containers or data streams in one app.
• Auth/preview environment support - pass auth and preview values to test against a draft GTM container before publishing.

Common Use Cases

• SPA page-view tracking - initialize GTM once at app boot and push a dataLayer event on each route change.
• QA against a draft GTM container - pass auth/preview tokens from GTM’s environment snippet to verify tags before publishing.
• Per-page custom data - call TagManager.dataLayer() on each page/component to send page-specific variables to GTM.
• Custom event tracking - pass an events object at initialization to merge extra event keys into the bootstrap gtm.js push.

Under The Hood

Architecture react-gtm-module is a flat, three-file module: TagManager.js orchestrates GTM setup by calling into Snippets.js, which builds the raw HTML/script strings for the GTM script tag, noscript iframe, and dataLayer bootstrap, while a small warn.js utility emits a console warning when a required id is missing. There’s no class hierarchy, dependency injection, or internal state beyond the DOM itself — initialize() and dataLayer() each build a snippet string with Snippets and insert it directly into document.head/document.body, so the library’s entire behavior can be traced by reading three short files end to end.

Tech Stack The package ships as a CommonJS module built with Babel (babel-preset-es2015 and babel-preset-react) from src to dist, has zero runtime dependencies, and works with any React app (React itself is not a listed dependency). The dev toolchain — babel-cli, eslint with eslint:recommended, Jest 19, Enzyme, and Sinon — reflects the library’s 2017 origin and hasn’t been modernized to newer bundling or type-checking tooling.

Code Quality Three Jest test files cover TagManager, Snippets, and the warn utility with a handful of assertions each (dataLayer length, iframe/script string contents, the missing-id warning); tests exercise the DOM directly rather than mocking heavily. ESLint is configured with the recommended ruleset, but there’s no TypeScript or Flow typing anywhere, and one test file has a leftover console.log debug statement. CI is defined only via an old Travis config pinned to Node 6.11.0, which no longer reflects a working pipeline.

API Design The public surface is deliberately small — initialize(), dataLayer(), and internal gtm()/dataScript() helpers — with sensible defaults for dataLayerName, events, auth, and preview, so a working GTM integration is typically a single object literal. The tradeoff is that the API is untyped and CommonJS-only (no ESM build, no TypeScript definitions shipped), so consumers get plain JS ergonomics without editor-assisted autocomplete or compile-time checks.