npm - @jwiedeman/gtm-kit-remix - Versions diffs - 1.0.1 - Mend

@jwiedeman/gtm-kit-remix 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,440 @@
+# @react-gtm-kit/remix
+[![CI](https://github.com/jwiedeman/react-gtm-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/jwiedeman/react-gtm-kit/actions/workflows/ci.yml)
+[![Coverage](https://codecov.io/gh/jwiedeman/react-gtm-kit/graph/badge.svg?flag=remix)](https://codecov.io/gh/jwiedeman/react-gtm-kit)
+[![npm version](https://img.shields.io/npm/v/@react-gtm-kit/remix.svg)](https://www.npmjs.com/package/@react-gtm-kit/remix)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@react-gtm-kit/remix)](https://bundlephobia.com/package/@react-gtm-kit/remix)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Remix](https://img.shields.io/badge/Remix-2.0+-000000.svg?logo=remix)](https://remix.run/)
+**Remix adapter for Google Tag Manager. Route tracking included.**
+The Remix adapter for GTM Kit - provides components and hooks optimized for Remix applications.
+---
+## Installation
+```bash
+npm install @react-gtm-kit/core @react-gtm-kit/remix
+```
+```bash
+yarn add @react-gtm-kit/core @react-gtm-kit/remix
+```
+```bash
+pnpm add @react-gtm-kit/core @react-gtm-kit/remix
+```
+---
+## Quick Start
+### Step 1: Add to Root
+```tsx
+// app/root.tsx
+import { GtmProvider, GtmScripts, useTrackPageViews } from '@react-gtm-kit/remix';
+function PageViewTracker() {
+  useTrackPageViews();
+  return null;
+}
+export default function App() {
+  return (
+    <html>
+      <head>
+        <Meta />
+        <Links />
+        <GtmScripts containers="GTM-XXXXXX" />
+      </head>
+      <body>
+        <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>
+          <PageViewTracker />
+          <Outlet />
+        </GtmProvider>
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+### Step 2: Push Events
+```tsx
+// app/routes/products.$id.tsx
+import { useGtmPush } from '@react-gtm-kit/remix';
+export default function ProductPage() {
+  const push = useGtmPush();
+  const handlePurchase = () => {
+    push({ event: 'purchase', value: 49.99 });
+  };
+  return <button onClick={handlePurchase}>Buy Now</button>;
+}
+```
+**That's it!** GTM is running with automatic page tracking.
+---
+## Features
+| Feature | Description |
+|---------|-------------|
+| **Remix Native** | Built specifically for Remix |
+| **Auto Page Tracking** | `useTrackPageViews` hook for route changes |
+| **Server Scripts** | `GtmScripts` component for SSR |
+| **React Router v6** | Uses Remix's routing system |
+| **TypeScript** | Full type definitions included |
+| **Consent Mode v2** | Built-in GDPR compliance |
+---
+## Components
+### `<GtmScripts />`
+Server-side component that renders GTM script tags. Place in your document head.
+```tsx
+import { GtmScripts } from '@react-gtm-kit/remix';
+<GtmScripts
+  containers="GTM-XXXXXX"
+  host="https://www.googletagmanager.com"  // optional
+  dataLayerName="dataLayer"                 // optional
+  scriptAttributes={{ nonce: '...' }}       // optional: CSP
+/>
+```
+### `<GtmProvider />`
+Client-side provider that manages GTM state and provides context.
+```tsx
+import { GtmProvider } from '@react-gtm-kit/remix';
+<GtmProvider
+  config={{ containers: 'GTM-XXXXXX' }}
+  onBeforeInit={(client) => {
+    // Set consent defaults here
+  }}
+  onAfterInit={(client) => {
+    // Called after GTM initializes
+  }}
+>
+  {children}
+</GtmProvider>
+```
+---
+## Hooks
+### `useTrackPageViews()`
+Automatically tracks page views on route changes.
+```tsx
+import { useTrackPageViews } from '@react-gtm-kit/remix';
+function PageViewTracker() {
+  useTrackPageViews({
+    eventName: 'page_view',           // default
+    trackInitialPageView: true,        // default
+    customData: { app_version: '1.0' }, // optional
+    transformEvent: (data) => ({       // optional
+      ...data,
+      user_id: getCurrentUserId()
+    })
+  });
+  return null;
+}
+```
+### `useGtmPush()`
+Get the push function for sending events.
+```tsx
+import { useGtmPush } from '@react-gtm-kit/remix';
+function MyComponent() {
+  const push = useGtmPush();
+  return (
+    <button onClick={() => push({ event: 'click', button: 'cta' })}>
+      Click Me
+    </button>
+  );
+}
+```
+### `useGtm()`
+Get the full GTM context.
+```tsx
+import { useGtm } from '@react-gtm-kit/remix';
+function MyComponent() {
+  const { push, client, updateConsent } = useGtm();
+  return <div>GTM Ready: {client.isInitialized() ? 'Yes' : 'No'}</div>;
+}
+```
+### `useGtmConsent()`
+Access consent management functions.
+```tsx
+import { useGtmConsent } from '@react-gtm-kit/remix';
+function CookieBanner() {
+  const { updateConsent } = useGtmConsent();
+  return (
+    <button onClick={() => updateConsent({ analytics_storage: 'granted' })}>
+      Accept
+    </button>
+  );
+}
+```
+### `useGtmClient()`
+Get the raw GTM client instance.
+### `useGtmReady()`
+Get a function that resolves when GTM is loaded.
+---
+## Consent Mode v2 (GDPR)
+```tsx
+// app/root.tsx
+import { GtmProvider, GtmScripts, useGtmConsent } from '@react-gtm-kit/remix';
+import { consentPresets } from '@react-gtm-kit/core';
+function CookieBanner() {
+  const { updateConsent } = useGtmConsent();
+  return (
+    <div className="cookie-banner">
+      <p>We use cookies to improve your experience.</p>
+      <button onClick={() => updateConsent({
+        ad_storage: 'granted',
+        analytics_storage: 'granted',
+        ad_user_data: 'granted',
+        ad_personalization: 'granted'
+      })}>
+        Accept All
+      </button>
+      <button onClick={() => updateConsent({
+        ad_storage: 'denied',
+        analytics_storage: 'denied',
+        ad_user_data: 'denied',
+        ad_personalization: 'denied'
+      })}>
+        Reject All
+      </button>
+    </div>
+  );
+}
+export default function App() {
+  return (
+    <html>
+      <head>
+        <GtmScripts containers="GTM-XXXXXX" />
+      </head>
+      <body>
+        <GtmProvider
+          config={{ containers: 'GTM-XXXXXX' }}
+          onBeforeInit={(client) => {
+            // Deny by default for EU users
+            client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
+          }}
+        >
+          <Outlet />
+          <CookieBanner />
+        </GtmProvider>
+      </body>
+    </html>
+  );
+}
+```
+---
+## CSP (Content Security Policy)
+For strict CSP configurations, generate and pass a nonce:
+```tsx
+// app/root.tsx
+import { GtmScripts } from '@react-gtm-kit/remix';
+export async function loader() {
+  const nonce = generateNonce(); // Your nonce generation
+  return json({ nonce });
+}
+export default function App() {
+  const { nonce } = useLoaderData<typeof loader>();
+  return (
+    <html>
+      <head>
+        <GtmScripts
+          containers="GTM-XXXXXX"
+          scriptAttributes={{ nonce }}
+        />
+      </head>
+      <body>
+        {/* ... */}
+      </body>
+    </html>
+  );
+}
+```
+---
+## Multiple Containers
+```tsx
+<GtmScripts
+  containers={[
+    { id: 'GTM-MAIN' },
+    { id: 'GTM-ADS', queryParams: { gtm_auth: 'abc', gtm_preview: 'env-1' } }
+  ]}
+/>
+<GtmProvider
+  config={{
+    containers: [
+      { id: 'GTM-MAIN' },
+      { id: 'GTM-ADS', queryParams: { gtm_auth: 'abc', gtm_preview: 'env-1' } }
+    ]
+  }}
+>
+  {children}
+</GtmProvider>
+```
+---
+## Full Example
+```tsx
+// app/root.tsx
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+import {
+  GtmProvider,
+  GtmScripts,
+  useTrackPageViews,
+  useGtmConsent
+} from '@react-gtm-kit/remix';
+import { consentPresets } from '@react-gtm-kit/core';
+const GTM_ID = 'GTM-XXXXXX';
+function PageViewTracker() {
+  useTrackPageViews();
+  return null;
+}
+function CookieBanner() {
+  const { updateConsent } = useGtmConsent();
+  return (
+    <div className="fixed bottom-0 left-0 right-0 bg-gray-800 text-white p-4">
+      <div className="max-w-7xl mx-auto flex justify-between items-center">
+        <p>We use cookies to improve your experience.</p>
+        <div className="space-x-2">
+          <button
+            onClick={() => updateConsent({
+              ad_storage: 'granted',
+              analytics_storage: 'granted',
+              ad_user_data: 'granted',
+              ad_personalization: 'granted'
+            })}
+            className="bg-blue-500 px-4 py-2 rounded"
+          >
+            Accept All
+          </button>
+          <button
+            onClick={() => updateConsent({
+              ad_storage: 'denied',
+              analytics_storage: 'denied'
+            })}
+            className="bg-gray-600 px-4 py-2 rounded"
+          >
+            Reject
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+        <GtmScripts containers={GTM_ID} />
+      </head>
+      <body>
+        <GtmProvider
+          config={{ containers: GTM_ID }}
+          onBeforeInit={(client) => {
+            client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
+          }}
+        >
+          <PageViewTracker />
+          <Outlet />
+          <CookieBanner />
+        </GtmProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+---
+## Requirements
+- Remix 2.0+
+- React 18+
+- `@react-gtm-kit/core` (peer dependency)
+---
+## License
+MIT

package/dist/index.cjs ADDED Viewed

@@ -0,0 +1,30 @@
+'use strict';
+var react = require('react');
+var gtmKit = require('@jwiedeman/gtm-kit');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@remix-run/react');
+var g=react.createContext(null);function S({config:e,children:r,onBeforeInit:i,onAfterInit:o}){let s=react.useRef(null),n=react.useRef(!1);s.current||(s.current=gtmKit.createGtmClient(e));let t=s.current;react.useEffect(()=>{if(!n.current)return i&&i(t),t.init(),n.current=!0,o&&o(t),()=>{let a=setTimeout(()=>{document.querySelector("[data-gtm-kit-provider]")||(t.teardown(),s.current=null,n.current=!1);},100);clearTimeout(a);}},[t,i,o]);let p=react.useMemo(()=>({client:t,push:a=>t.push(a),setConsentDefaults:(a,c)=>t.setConsentDefaults(a,c),updateConsent:(a,c)=>t.updateConsent(a,c),whenReady:()=>t.whenReady()}),[t]);return jsxRuntime.jsx(g.Provider,{value:p,children:jsxRuntime.jsx("div",{"data-gtm-kit-provider":"",style:{display:"contents"},children:r})})}var u=()=>{let e=react.useContext(g);if(!e)throw new Error('[gtm-kit] useGtm() was called outside of a GtmProvider. Make sure to wrap your app with <GtmProvider config={{ containers: "GTM-XXXXXX" }}>.');return e},V=()=>u(),d=()=>u().push,D=()=>{let{setConsentDefaults:e,updateConsent:r}=u();return {setConsentDefaults:e,updateConsent:r}},k=()=>u().client,L=()=>u().whenReady;function T(e={}){let{eventName:r="page_view",trackInitialPageView:i=!0,customData:o={},transformEvent:s}=e,n=react$1.useLocation(),t=d(),p=react.useRef(null),a=react.useRef(!0);react.useEffect(()=>{let c=n.pathname+n.search+n.hash;if(c===p.current)return;if(a.current&&!i){a.current=!1,p.current=c;return}a.current=!1,p.current=c;let l={event:r,page_path:n.pathname,page_search:n.search,page_hash:n.hash,page_url:typeof window!="undefined"?window.location.href:c,...o},f=s?s(l):l;t(f);},[n,t,r,i,o,s]);}function m(e){return e.replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(/"/g,'\\"').replace(/\n/g,"\\n").replace(/\r/g,"\\r").replace(/</g,"\\x3c").replace(/>/g,"\\x3e").replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029")}function E(e){return typeof e=="string"?[{id:e}]:Array.isArray(e)?e.map(r=>typeof r=="string"?{id:r}:r):[e]}function I(e,r,i,o){let s=r.endsWith("/")?r.slice(0,-1):r,n=new URLSearchParams;if(n.set("id",e),i!=="dataLayer"&&n.set("l",i),o)for(let[t,p]of Object.entries(o))t!=="id"&&t!=="l"&&n.set(t,String(p));return `${s}/gtm.js?${n.toString()}`}function N({containers:e,host:r="https://www.googletagmanager.com",dataLayerName:i="dataLayer",scriptAttributes:o={}}){let s=E(e),n=m(i),t=o.nonce?m(o.nonce):"",p=`
+    window['${n}'] = window['${n}'] || [];
+    ${s.map(c=>{let l=m(c.id);return `
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      '${m(I(c.id,r,i,c.queryParams))}';${t?`j.nonce='${t}';`:""}f.parentNode.insertBefore(j,f);
+      })(window,document,'script','${n}','${l}');
+      `}).join(`
+`)}
+  `.trim(),a=gtmKit.createNoscriptMarkup(s,{host:r});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("script",{...o,dangerouslySetInnerHTML:{__html:p}}),jsxRuntime.jsx("noscript",{dangerouslySetInnerHTML:{__html:a}})]})}
+exports.GtmContext = g;
+exports.GtmProvider = S;
+exports.GtmScripts = N;
+exports.useGtm = V;
+exports.useGtmClient = k;
+exports.useGtmConsent = D;
+exports.useGtmPush = d;
+exports.useGtmReady = L;
+exports.useTrackPageViews = T;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/provider.tsx","../src/route-tracker.tsx","../src/scripts.tsx"],"names":["createContext","useContext","useEffect","useRef","useMemo","createGtmClient","jsx","GtmContext","GtmProvider","config","children","onBeforeInit","onAfterInit","clientRef","initializedRef","client","timer","contextValue","value","state","options","useGtmContext","context","useGtm","useGtmPush","useGtmConsent","setConsentDefaults","updateConsent","useGtmClient","useGtmReady","useLocation","useTrackPageViews","eventName","trackInitialPageView","customData","transformEvent","location","push","lastPathRef","isFirstRenderRef","currentPath","pageViewData","eventData","createNoscriptMarkup","Fragment","jsxs","escapeJsString","normalizeContainers","containers","c","buildGtmScriptUrl","containerId","host","dataLayerName","queryParams","normalizedHost","params","key","GtmScripts","scriptAttributes","containerConfigs","safeDataLayerName","safeNonce","inlineScript","safeContainerId","noscriptHtml"],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useEffect, useRef, useMemo, type ReactNode } from 'react';\nimport {\n createGtmClient,\n type ConsentRegionOptions,\n type ConsentState,\n type CreateGtmClientOptions,\n type DataLayerValue,\n type GtmClient,\n type ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\n/**\n * Props for the GTM Provider component.\n */\nexport interface GtmProviderProps {\n /** GTM client configuration */\n config: CreateGtmClientOptions;\n\n /** Child components */\n children: ReactNode;\n\n /**\n * Callback executed before GTM initialization.\n * Use this to set consent defaults.\n */\n onBeforeInit?: (client: GtmClient) => void;\n\n /**\n * Callback executed after GTM initialization.\n */\n onAfterInit?: (client: GtmClient) => void;\n}\n\n/**\n * The GTM context value containing all GTM functionality.\n */\nexport interface GtmContextValue {\n /** The underlying GTM client instance */\n client: GtmClient;\n /** Push a value to the data layer */\n push: (value: DataLayerValue) => void;\n /** Set consent defaults (must be called before init) */\n setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n /** Update consent state */\n updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n /** Returns a promise that resolves when all GTM scripts are loaded */\n whenReady: () => Promise<ScriptLoadState[]>;\n}\n\n/**\n * Consent-specific API subset.\n */\nexport interface GtmConsentApi {\n setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n}\n\n/**\n * The GTM context for Remix.\n */\nexport const GtmContext = createContext<GtmContextValue | null>(null);\n\n/**\n * GTM Provider component for Remix.\n * Handles StrictMode correctly and provides GTM context to children.\n *\n * @example\n * ```tsx\n * // app/root.tsx\n * import { GtmProvider } from '@jwiedeman/gtm-kit-remix';\n *\n * export default function App() {\n * return (\n * <html>\n * <head />\n * <body>\n * <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>\n * <Outlet />\n * </GtmProvider>\n * </body>\n * </html>\n * );\n * }\n * ```\n */\nexport function GtmProvider({ config, children, onBeforeInit, onAfterInit }: GtmProviderProps): React.ReactElement {\n // Create client once and store in ref to survive StrictMode remounts\n const clientRef = useRef<GtmClient | null>(null);\n const initializedRef = useRef(false);\n\n // Create client on first render only\n if (!clientRef.current) {\n clientRef.current = createGtmClient(config);\n }\n\n const client = clientRef.current;\n\n // Initialize GTM (handles StrictMode correctly)\n useEffect(() => {\n // Skip if already initialized (StrictMode protection)\n if (initializedRef.current) {\n return;\n }\n\n // Call onBeforeInit hook for consent defaults\n if (onBeforeInit) {\n onBeforeInit(client);\n }\n\n // Initialize GTM\n client.init();\n initializedRef.current = true;\n\n // Call onAfterInit hook\n if (onAfterInit) {\n onAfterInit(client);\n }\n\n // Cleanup on unmount\n return () => {\n // Don't teardown immediately in StrictMode\n // Only teardown if we're truly unmounting\n const timer = setTimeout(() => {\n if (!document.querySelector('[data-gtm-kit-provider]')) {\n client.teardown();\n clientRef.current = null;\n initializedRef.current = false;\n }\n }, 100);\n\n // Clear the timeout on cleanup\n clearTimeout(timer);\n };\n }, [client, onBeforeInit, onAfterInit]);\n\n // Memoize context value\n const contextValue = useMemo<GtmContextValue>(\n () => ({\n client,\n push: (value: DataLayerValue) => client.push(value),\n setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) =>\n client.setConsentDefaults(state, options),\n updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => client.updateConsent(state, options),\n whenReady: () => client.whenReady()\n }),\n [client]\n );\n\n return (\n <GtmContext.Provider value={contextValue}>\n <div data-gtm-kit-provider=\"\" style={{ display: 'contents' }}>\n {children}\n </div>\n </GtmContext.Provider>\n );\n}\n\n/**\n * Internal helper to get the GTM context with proper error handling.\n */\nconst useGtmContext = (): GtmContextValue => {\n const context = useContext(GtmContext);\n if (!context) {\n throw new Error(\n '[gtm-kit] useGtm() was called outside of a GtmProvider. ' +\n 'Make sure to wrap your app with <GtmProvider config={{ containers: \"GTM-XXXXXX\" }}>.'\n );\n }\n return context;\n};\n\n/**\n * Hook to access the full GTM context.\n *\n * @example\n * ```tsx\n * import { useGtm } from '@jwiedeman/gtm-kit-remix';\n *\n * function MyComponent() {\n * const { push, client } = useGtm();\n *\n * return (\n * <button onClick={() => push({ event: 'click' })}>\n * Track\n * </button>\n * );\n * }\n * ```\n */\nexport const useGtm = (): GtmContextValue => {\n return useGtmContext();\n};\n\n/**\n * Hook to get just the push function.\n *\n * @example\n * ```tsx\n * import { useGtmPush } from '@jwiedeman/gtm-kit-remix';\n *\n * function BuyButton() {\n * const push = useGtmPush();\n *\n * return (\n * <button onClick={() => push({ event: 'purchase', value: 99 })}>\n * Buy\n * </button>\n * );\n * }\n * ```\n */\nexport const useGtmPush = (): ((value: DataLayerValue) => void) => {\n return useGtmContext().push;\n};\n\n/**\n * Hook to access consent management functions.\n *\n * @example\n * ```tsx\n * import { useGtmConsent } from '@jwiedeman/gtm-kit-remix';\n *\n * function CookieBanner() {\n * const { updateConsent } = useGtmConsent();\n *\n * return (\n * <button onClick={() => updateConsent({ analytics_storage: 'granted' })}>\n * Accept\n * </button>\n * );\n * }\n * ```\n */\nexport const useGtmConsent = (): GtmConsentApi => {\n const { setConsentDefaults, updateConsent } = useGtmContext();\n return { setConsentDefaults, updateConsent };\n};\n\n/**\n * Hook to get the raw GTM client instance.\n *\n * @example\n * ```tsx\n * import { useGtmClient } from '@jwiedeman/gtm-kit-remix';\n *\n * function MyComponent() {\n * const client = useGtmClient();\n * return <div>{client.isInitialized() ? 'Ready' : 'Loading'}</div>;\n * }\n * ```\n */\nexport const useGtmClient = (): GtmClient => {\n return useGtmContext().client;\n};\n\n/**\n * Hook to get the whenReady function.\n *\n * @example\n * ```tsx\n * import { useGtmReady } from '@jwiedeman/gtm-kit-remix';\n * import { useEffect } from 'react';\n *\n * function MyComponent() {\n * const whenReady = useGtmReady();\n *\n * useEffect(() => {\n * whenReady().then(() => console.log('GTM ready!'));\n * }, [whenReady]);\n *\n * return <div>Loading...</div>;\n * }\n * ```\n */\nexport const useGtmReady = (): (() => Promise<ScriptLoadState[]>) => {\n return useGtmContext().whenReady;\n};\n","import { useEffect, useRef } from 'react';\nimport { useLocation } from '@remix-run/react';\nimport { useGtmPush } from './provider';\n\n/**\n * Options for the useTrackPageViews hook.\n */\nexport interface UseTrackPageViewsOptions {\n /**\n * The event name to use for page view events.\n * @default 'page_view'\n */\n eventName?: string;\n\n /**\n * Whether to track the initial page load.\n * @default true\n */\n trackInitialPageView?: boolean;\n\n /**\n * Custom data to include with each page view event.\n */\n customData?: Record<string, unknown>;\n\n /**\n * Callback to transform the page view event data before pushing.\n * Use this to add custom properties or modify the event.\n */\n transformEvent?: (data: PageViewData) => Record<string, unknown>;\n}\n\n/**\n * Data included with each page view event.\n */\nexport interface PageViewData {\n event: string;\n page_path: string;\n page_search: string;\n page_hash: string;\n page_url: string;\n [key: string]: unknown;\n}\n\n/**\n * Hook to automatically track page views on route changes.\n * Uses Remix's useLocation to detect navigation.\n *\n * @example\n * ```tsx\n * // app/root.tsx\n * import { GtmProvider, useTrackPageViews } from '@jwiedeman/gtm-kit-remix';\n *\n * function PageViewTracker() {\n * useTrackPageViews();\n * return null;\n * }\n *\n * export default function App() {\n * return (\n * <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>\n * <PageViewTracker />\n * <Outlet />\n * </GtmProvider>\n * );\n * }\n * ```\n *\n * @example With custom options\n * ```tsx\n * useTrackPageViews({\n * eventName: 'virtual_page_view',\n * customData: { app_version: '1.0.0' },\n * transformEvent: (data) => ({\n * ...data,\n * user_id: getCurrentUserId()\n * })\n * });\n * ```\n */\nexport function useTrackPageViews(options: UseTrackPageViewsOptions = {}): void {\n const { eventName = 'page_view', trackInitialPageView = true, customData = {}, transformEvent } = options;\n\n const location = useLocation();\n const push = useGtmPush();\n const lastPathRef = useRef<string | null>(null);\n const isFirstRenderRef = useRef(true);\n\n useEffect(() => {\n const currentPath = location.pathname + location.search + location.hash;\n\n // Skip if this is the same path (prevents double-firing)\n if (currentPath === lastPathRef.current) {\n return;\n }\n\n // Skip initial page view if configured\n if (isFirstRenderRef.current && !trackInitialPageView) {\n isFirstRenderRef.current = false;\n lastPathRef.current = currentPath;\n return;\n }\n\n isFirstRenderRef.current = false;\n lastPathRef.current = currentPath;\n\n // Build page view data\n const pageViewData: PageViewData = {\n event: eventName,\n page_path: location.pathname,\n page_search: location.search,\n page_hash: location.hash,\n page_url: typeof window !== 'undefined' ? window.location.href : currentPath,\n ...customData\n };\n\n // Apply transform if provided\n const eventData = transformEvent ? transformEvent(pageViewData) : pageViewData;\n\n // Push to GTM\n push(eventData);\n }, [location, push, eventName, trackInitialPageView, customData, transformEvent]);\n}\n","import React from 'react';\nimport { createNoscriptMarkup, type ContainerConfigInput, type ContainerDescriptor } from '@jwiedeman/gtm-kit';\n\n/**\n * Escape a string for safe use in JavaScript string literals.\n * Prevents XSS when interpolating user-provided values into inline scripts.\n */\nfunction escapeJsString(value: string): string {\n return value\n .replace(/\\\\/g, '\\\\\\\\')\n .replace(/'/g, \"\\\\'\")\n .replace(/\"/g, '\\\\\"')\n .replace(/\\n/g, '\\\\n')\n .replace(/\\r/g, '\\\\r')\n .replace(/</g, '\\\\x3c')\n .replace(/>/g, '\\\\x3e')\n .replace(/\\u2028/g, '\\\\u2028')\n .replace(/\\u2029/g, '\\\\u2029');\n}\n\n/**\n * Props for the GtmScripts component.\n */\nexport interface GtmScriptsProps {\n /**\n * GTM container ID(s).\n */\n containers: ContainerConfigInput | ContainerConfigInput[];\n\n /**\n * Custom GTM host URL.\n * @default 'https://www.googletagmanager.com'\n */\n host?: string;\n\n /**\n * Custom dataLayer name.\n * @default 'dataLayer'\n */\n dataLayerName?: string;\n\n /**\n * Script attributes (e.g., nonce for CSP).\n */\n scriptAttributes?: Record<string, string>;\n}\n\n/**\n * Normalize container config to array format.\n */\nfunction normalizeContainers(containers: ContainerConfigInput | ContainerConfigInput[]): ContainerDescriptor[] {\n if (typeof containers === 'string') {\n return [{ id: containers }];\n }\n if (!Array.isArray(containers)) {\n return [containers];\n }\n return containers.map((c) => (typeof c === 'string' ? { id: c } : c));\n}\n\n/**\n * Server component that renders GTM script tags for Remix.\n * Use this in your root.tsx to add GTM scripts.\n *\n * @example\n * ```tsx\n * // app/root.tsx\n * import { GtmScripts } from '@jwiedeman/gtm-kit-remix';\n *\n * export default function App() {\n * return (\n * <html>\n * <head>\n * <GtmScripts containers=\"GTM-XXXXXX\" />\n * </head>\n * <body>\n * <Outlet />\n * </body>\n * </html>\n * );\n * }\n * ```\n *\n * @example With CSP nonce\n * ```tsx\n * <GtmScripts\n * containers=\"GTM-XXXXXX\"\n * scriptAttributes={{ nonce: 'your-csp-nonce' }}\n * />\n * ```\n */\n/**\n * Build the GTM script URL for a container.\n */\nfunction buildGtmScriptUrl(\n containerId: string,\n host: string,\n dataLayerName: string,\n queryParams?: Record<string, string | number | boolean>\n): string {\n const normalizedHost = host.endsWith('/') ? host.slice(0, -1) : host;\n const params = new URLSearchParams();\n params.set('id', containerId);\n\n if (dataLayerName !== 'dataLayer') {\n params.set('l', dataLayerName);\n }\n\n if (queryParams) {\n for (const [key, value] of Object.entries(queryParams)) {\n if (key !== 'id' && key !== 'l') {\n params.set(key, String(value));\n }\n }\n }\n\n return `${normalizedHost}/gtm.js?${params.toString()}`;\n}\n\nexport function GtmScripts({\n containers,\n host = 'https://www.googletagmanager.com',\n dataLayerName = 'dataLayer',\n scriptAttributes = {}\n}: GtmScriptsProps): React.ReactElement {\n const containerConfigs = normalizeContainers(containers);\n\n // Escape values for safe use in JavaScript string literals\n const safeDataLayerName = escapeJsString(dataLayerName);\n const safeNonce = scriptAttributes.nonce ? escapeJsString(scriptAttributes.nonce) : '';\n\n // Generate inline script for dataLayer initialization and GTM loading\n const inlineScript = `\n window['${safeDataLayerName}'] = window['${safeDataLayerName}'] || [];\n ${containerConfigs\n .map((config) => {\n const safeContainerId = escapeJsString(config.id);\n const scriptSrc = escapeJsString(buildGtmScriptUrl(config.id, host, dataLayerName, config.queryParams));\n return `\n (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n '${scriptSrc}';${safeNonce ? `j.nonce='${safeNonce}';` : ''}f.parentNode.insertBefore(j,f);\n })(window,document,'script','${safeDataLayerName}','${safeContainerId}');\n `;\n })\n .join('\\n')}\n `.trim();\n\n // Generate noscript HTML using the core package\n const noscriptHtml = createNoscriptMarkup(containerConfigs, { host });\n\n return (\n <>\n <script {...scriptAttributes} dangerouslySetInnerHTML={{ __html: inlineScript }} />\n <noscript dangerouslySetInnerHTML={{ __html: noscriptHtml }} />\n </>\n );\n}\n"]}

package/dist/index.d.cts ADDED Viewed

@@ -0,0 +1,262 @@
+import React, { ReactNode } from 'react';
+import { CreateGtmClientOptions, GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, ScriptLoadState, ContainerConfigInput } from '@jwiedeman/gtm-kit';
+/**
+ * Props for the GTM Provider component.
+ */
+interface GtmProviderProps {
+    /** GTM client configuration */
+    config: CreateGtmClientOptions;
+    /** Child components */
+    children: ReactNode;
+    /**
+     * Callback executed before GTM initialization.
+     * Use this to set consent defaults.
+     */
+    onBeforeInit?: (client: GtmClient) => void;
+    /**
+     * Callback executed after GTM initialization.
+     */
+    onAfterInit?: (client: GtmClient) => void;
+}
+/**
+ * The GTM context value containing all GTM functionality.
+ */
+interface GtmContextValue {
+    /** The underlying GTM client instance */
+    client: GtmClient;
+    /** Push a value to the data layer */
+    push: (value: DataLayerValue) => void;
+    /** Set consent defaults (must be called before init) */
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    /** Update consent state */
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    /** Returns a promise that resolves when all GTM scripts are loaded */
+    whenReady: () => Promise<ScriptLoadState[]>;
+}
+/**
+ * Consent-specific API subset.
+ */
+interface GtmConsentApi {
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+}
+/**
+ * The GTM context for Remix.
+ */
+declare const GtmContext: React.Context<GtmContextValue | null>;
+/**
+ * GTM Provider component for Remix.
+ * Handles StrictMode correctly and provides GTM context to children.
+ *
+ * @example
+ * ```tsx
+ * // app/root.tsx
+ * import { GtmProvider } from '@jwiedeman/gtm-kit-remix';
+ *
+ * export default function App() {
+ *   return (
+ *     <html>
+ *       <head />
+ *       <body>
+ *         <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>
+ *           <Outlet />
+ *         </GtmProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+declare function GtmProvider({ config, children, onBeforeInit, onAfterInit }: GtmProviderProps): React.ReactElement;
+/**
+ * Hook to access the full GTM context.
+ *
+ * @example
+ * ```tsx
+ * import { useGtm } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function MyComponent() {
+ *   const { push, client } = useGtm();
+ *
+ *   return (
+ *     <button onClick={() => push({ event: 'click' })}>
+ *       Track
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtm: () => GtmContextValue;
+/**
+ * Hook to get just the push function.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmPush } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function BuyButton() {
+ *   const push = useGtmPush();
+ *
+ *   return (
+ *     <button onClick={() => push({ event: 'purchase', value: 99 })}>
+ *       Buy
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtmPush: () => ((value: DataLayerValue) => void);
+/**
+ * Hook to access consent management functions.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmConsent } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function CookieBanner() {
+ *   const { updateConsent } = useGtmConsent();
+ *
+ *   return (
+ *     <button onClick={() => updateConsent({ analytics_storage: 'granted' })}>
+ *       Accept
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtmConsent: () => GtmConsentApi;
+/**
+ * Hook to get the raw GTM client instance.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmClient } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function MyComponent() {
+ *   const client = useGtmClient();
+ *   return <div>{client.isInitialized() ? 'Ready' : 'Loading'}</div>;
+ * }
+ * ```
+ */
+declare const useGtmClient: () => GtmClient;
+/**
+ * Hook to get the whenReady function.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmReady } from '@jwiedeman/gtm-kit-remix';
+ * import { useEffect } from 'react';
+ *
+ * function MyComponent() {
+ *   const whenReady = useGtmReady();
+ *
+ *   useEffect(() => {
+ *     whenReady().then(() => console.log('GTM ready!'));
+ *   }, [whenReady]);
+ *
+ *   return <div>Loading...</div>;
+ * }
+ * ```
+ */
+declare const useGtmReady: () => (() => Promise<ScriptLoadState[]>);
+/**
+ * Options for the useTrackPageViews hook.
+ */
+interface UseTrackPageViewsOptions {
+    /**
+     * The event name to use for page view events.
+     * @default 'page_view'
+     */
+    eventName?: string;
+    /**
+     * Whether to track the initial page load.
+     * @default true
+     */
+    trackInitialPageView?: boolean;
+    /**
+     * Custom data to include with each page view event.
+     */
+    customData?: Record<string, unknown>;
+    /**
+     * Callback to transform the page view event data before pushing.
+     * Use this to add custom properties or modify the event.
+     */
+    transformEvent?: (data: PageViewData) => Record<string, unknown>;
+}
+/**
+ * Data included with each page view event.
+ */
+interface PageViewData {
+    event: string;
+    page_path: string;
+    page_search: string;
+    page_hash: string;
+    page_url: string;
+    [key: string]: unknown;
+}
+/**
+ * Hook to automatically track page views on route changes.
+ * Uses Remix's useLocation to detect navigation.
+ *
+ * @example
+ * ```tsx
+ * // app/root.tsx
+ * import { GtmProvider, useTrackPageViews } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function PageViewTracker() {
+ *   useTrackPageViews();
+ *   return null;
+ * }
+ *
+ * export default function App() {
+ *   return (
+ *     <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>
+ *       <PageViewTracker />
+ *       <Outlet />
+ *     </GtmProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom options
+ * ```tsx
+ * useTrackPageViews({
+ *   eventName: 'virtual_page_view',
+ *   customData: { app_version: '1.0.0' },
+ *   transformEvent: (data) => ({
+ *     ...data,
+ *     user_id: getCurrentUserId()
+ *   })
+ * });
+ * ```
+ */
+declare function useTrackPageViews(options?: UseTrackPageViewsOptions): void;
+/**
+ * Props for the GtmScripts component.
+ */
+interface GtmScriptsProps {
+    /**
+     * GTM container ID(s).
+     */
+    containers: ContainerConfigInput | ContainerConfigInput[];
+    /**
+     * Custom GTM host URL.
+     * @default 'https://www.googletagmanager.com'
+     */
+    host?: string;
+    /**
+     * Custom dataLayer name.
+     * @default 'dataLayer'
+     */
+    dataLayerName?: string;
+    /**
+     * Script attributes (e.g., nonce for CSP).
+     */
+    scriptAttributes?: Record<string, string>;
+}
+declare function GtmScripts({ containers, host, dataLayerName, scriptAttributes }: GtmScriptsProps): React.ReactElement;
+export { GtmConsentApi, GtmContext, GtmContextValue, GtmProvider, GtmProviderProps, GtmScripts, GtmScriptsProps, UseTrackPageViewsOptions, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady, useTrackPageViews };

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,262 @@
+import React, { ReactNode } from 'react';
+import { CreateGtmClientOptions, GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, ScriptLoadState, ContainerConfigInput } from '@jwiedeman/gtm-kit';
+/**
+ * Props for the GTM Provider component.
+ */
+interface GtmProviderProps {
+    /** GTM client configuration */
+    config: CreateGtmClientOptions;
+    /** Child components */
+    children: ReactNode;
+    /**
+     * Callback executed before GTM initialization.
+     * Use this to set consent defaults.
+     */
+    onBeforeInit?: (client: GtmClient) => void;
+    /**
+     * Callback executed after GTM initialization.
+     */
+    onAfterInit?: (client: GtmClient) => void;
+}
+/**
+ * The GTM context value containing all GTM functionality.
+ */
+interface GtmContextValue {
+    /** The underlying GTM client instance */
+    client: GtmClient;
+    /** Push a value to the data layer */
+    push: (value: DataLayerValue) => void;
+    /** Set consent defaults (must be called before init) */
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    /** Update consent state */
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    /** Returns a promise that resolves when all GTM scripts are loaded */
+    whenReady: () => Promise<ScriptLoadState[]>;
+}
+/**
+ * Consent-specific API subset.
+ */
+interface GtmConsentApi {
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+}
+/**
+ * The GTM context for Remix.
+ */
+declare const GtmContext: React.Context<GtmContextValue | null>;
+/**
+ * GTM Provider component for Remix.
+ * Handles StrictMode correctly and provides GTM context to children.
+ *
+ * @example
+ * ```tsx
+ * // app/root.tsx
+ * import { GtmProvider } from '@jwiedeman/gtm-kit-remix';
+ *
+ * export default function App() {
+ *   return (
+ *     <html>
+ *       <head />
+ *       <body>
+ *         <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>
+ *           <Outlet />
+ *         </GtmProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+declare function GtmProvider({ config, children, onBeforeInit, onAfterInit }: GtmProviderProps): React.ReactElement;
+/**
+ * Hook to access the full GTM context.
+ *
+ * @example
+ * ```tsx
+ * import { useGtm } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function MyComponent() {
+ *   const { push, client } = useGtm();
+ *
+ *   return (
+ *     <button onClick={() => push({ event: 'click' })}>
+ *       Track
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtm: () => GtmContextValue;
+/**
+ * Hook to get just the push function.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmPush } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function BuyButton() {
+ *   const push = useGtmPush();
+ *
+ *   return (
+ *     <button onClick={() => push({ event: 'purchase', value: 99 })}>
+ *       Buy
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtmPush: () => ((value: DataLayerValue) => void);
+/**
+ * Hook to access consent management functions.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmConsent } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function CookieBanner() {
+ *   const { updateConsent } = useGtmConsent();
+ *
+ *   return (
+ *     <button onClick={() => updateConsent({ analytics_storage: 'granted' })}>
+ *       Accept
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtmConsent: () => GtmConsentApi;
+/**
+ * Hook to get the raw GTM client instance.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmClient } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function MyComponent() {
+ *   const client = useGtmClient();
+ *   return <div>{client.isInitialized() ? 'Ready' : 'Loading'}</div>;
+ * }
+ * ```
+ */
+declare const useGtmClient: () => GtmClient;
+/**
+ * Hook to get the whenReady function.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmReady } from '@jwiedeman/gtm-kit-remix';
+ * import { useEffect } from 'react';
+ *
+ * function MyComponent() {
+ *   const whenReady = useGtmReady();
+ *
+ *   useEffect(() => {
+ *     whenReady().then(() => console.log('GTM ready!'));
+ *   }, [whenReady]);
+ *
+ *   return <div>Loading...</div>;
+ * }
+ * ```
+ */
+declare const useGtmReady: () => (() => Promise<ScriptLoadState[]>);
+/**
+ * Options for the useTrackPageViews hook.
+ */
+interface UseTrackPageViewsOptions {
+    /**
+     * The event name to use for page view events.
+     * @default 'page_view'
+     */
+    eventName?: string;
+    /**
+     * Whether to track the initial page load.
+     * @default true
+     */
+    trackInitialPageView?: boolean;
+    /**
+     * Custom data to include with each page view event.
+     */
+    customData?: Record<string, unknown>;
+    /**
+     * Callback to transform the page view event data before pushing.
+     * Use this to add custom properties or modify the event.
+     */
+    transformEvent?: (data: PageViewData) => Record<string, unknown>;
+}
+/**
+ * Data included with each page view event.
+ */
+interface PageViewData {
+    event: string;
+    page_path: string;
+    page_search: string;
+    page_hash: string;
+    page_url: string;
+    [key: string]: unknown;
+}
+/**
+ * Hook to automatically track page views on route changes.
+ * Uses Remix's useLocation to detect navigation.
+ *
+ * @example
+ * ```tsx
+ * // app/root.tsx
+ * import { GtmProvider, useTrackPageViews } from '@jwiedeman/gtm-kit-remix';
+ *
+ * function PageViewTracker() {
+ *   useTrackPageViews();
+ *   return null;
+ * }
+ *
+ * export default function App() {
+ *   return (
+ *     <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>
+ *       <PageViewTracker />
+ *       <Outlet />
+ *     </GtmProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom options
+ * ```tsx
+ * useTrackPageViews({
+ *   eventName: 'virtual_page_view',
+ *   customData: { app_version: '1.0.0' },
+ *   transformEvent: (data) => ({
+ *     ...data,
+ *     user_id: getCurrentUserId()
+ *   })
+ * });
+ * ```
+ */
+declare function useTrackPageViews(options?: UseTrackPageViewsOptions): void;
+/**
+ * Props for the GtmScripts component.
+ */
+interface GtmScriptsProps {
+    /**
+     * GTM container ID(s).
+     */
+    containers: ContainerConfigInput | ContainerConfigInput[];
+    /**
+     * Custom GTM host URL.
+     * @default 'https://www.googletagmanager.com'
+     */
+    host?: string;
+    /**
+     * Custom dataLayer name.
+     * @default 'dataLayer'
+     */
+    dataLayerName?: string;
+    /**
+     * Script attributes (e.g., nonce for CSP).
+     */
+    scriptAttributes?: Record<string, string>;
+}
+declare function GtmScripts({ containers, host, dataLayerName, scriptAttributes }: GtmScriptsProps): React.ReactElement;
+export { GtmConsentApi, GtmContext, GtmContextValue, GtmProvider, GtmProviderProps, GtmScripts, GtmScriptsProps, UseTrackPageViewsOptions, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady, useTrackPageViews };

package/dist/index.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { createContext, useRef, useEffect, useMemo, useContext } from 'react';
+import { createGtmClient, createNoscriptMarkup } from '@jwiedeman/gtm-kit';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useLocation } from '@remix-run/react';
+var g=createContext(null);function S({config:e,children:r,onBeforeInit:i,onAfterInit:o}){let s=useRef(null),n=useRef(!1);s.current||(s.current=createGtmClient(e));let t=s.current;useEffect(()=>{if(!n.current)return i&&i(t),t.init(),n.current=!0,o&&o(t),()=>{let a=setTimeout(()=>{document.querySelector("[data-gtm-kit-provider]")||(t.teardown(),s.current=null,n.current=!1);},100);clearTimeout(a);}},[t,i,o]);let p=useMemo(()=>({client:t,push:a=>t.push(a),setConsentDefaults:(a,c)=>t.setConsentDefaults(a,c),updateConsent:(a,c)=>t.updateConsent(a,c),whenReady:()=>t.whenReady()}),[t]);return jsx(g.Provider,{value:p,children:jsx("div",{"data-gtm-kit-provider":"",style:{display:"contents"},children:r})})}var u=()=>{let e=useContext(g);if(!e)throw new Error('[gtm-kit] useGtm() was called outside of a GtmProvider. Make sure to wrap your app with <GtmProvider config={{ containers: "GTM-XXXXXX" }}>.');return e},V=()=>u(),d=()=>u().push,D=()=>{let{setConsentDefaults:e,updateConsent:r}=u();return {setConsentDefaults:e,updateConsent:r}},k=()=>u().client,L=()=>u().whenReady;function T(e={}){let{eventName:r="page_view",trackInitialPageView:i=!0,customData:o={},transformEvent:s}=e,n=useLocation(),t=d(),p=useRef(null),a=useRef(!0);useEffect(()=>{let c=n.pathname+n.search+n.hash;if(c===p.current)return;if(a.current&&!i){a.current=!1,p.current=c;return}a.current=!1,p.current=c;let l={event:r,page_path:n.pathname,page_search:n.search,page_hash:n.hash,page_url:typeof window!="undefined"?window.location.href:c,...o},f=s?s(l):l;t(f);},[n,t,r,i,o,s]);}function m(e){return e.replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(/"/g,'\\"').replace(/\n/g,"\\n").replace(/\r/g,"\\r").replace(/</g,"\\x3c").replace(/>/g,"\\x3e").replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029")}function E(e){return typeof e=="string"?[{id:e}]:Array.isArray(e)?e.map(r=>typeof r=="string"?{id:r}:r):[e]}function I(e,r,i,o){let s=r.endsWith("/")?r.slice(0,-1):r,n=new URLSearchParams;if(n.set("id",e),i!=="dataLayer"&&n.set("l",i),o)for(let[t,p]of Object.entries(o))t!=="id"&&t!=="l"&&n.set(t,String(p));return `${s}/gtm.js?${n.toString()}`}function N({containers:e,host:r="https://www.googletagmanager.com",dataLayerName:i="dataLayer",scriptAttributes:o={}}){let s=E(e),n=m(i),t=o.nonce?m(o.nonce):"",p=`
+    window['${n}'] = window['${n}'] || [];
+    ${s.map(c=>{let l=m(c.id);return `
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      '${m(I(c.id,r,i,c.queryParams))}';${t?`j.nonce='${t}';`:""}f.parentNode.insertBefore(j,f);
+      })(window,document,'script','${n}','${l}');
+      `}).join(`
+`)}
+  `.trim(),a=createNoscriptMarkup(s,{host:r});return jsxs(Fragment,{children:[jsx("script",{...o,dangerouslySetInnerHTML:{__html:p}}),jsx("noscript",{dangerouslySetInnerHTML:{__html:a}})]})}
+export { g as GtmContext, S as GtmProvider, N as GtmScripts, V as useGtm, k as useGtmClient, D as useGtmConsent, d as useGtmPush, L as useGtmReady, T as useTrackPageViews };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,59 @@
+{
+  "name": "@jwiedeman/gtm-kit-remix",
+  "version": "1.0.1",
+  "description": "Remix adapter for GTM Kit - Google Tag Manager integration with route tracking.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jwiedeman/GTM-Kit.git",
+    "directory": "packages/remix"
+  },
+  "author": "jwiedeman",
+  "keywords": [
+    "gtm",
+    "google-tag-manager",
+    "remix",
+    "routes"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "lint": "eslint --max-warnings=0 \"src/**/*.{ts,tsx}\"",
+    "test": "jest --config ./jest.config.cjs --runInBand",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@jwiedeman/gtm-kit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "@remix-run/react": "^2.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@remix-run/react": "^2.8.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tslib": "^2.6.2"
+  }
+}