@jwiedeman/gtm-kit-solid
v1.1.6
Published
SolidJS primitives and context for GTM Kit - Google Tag Manager integration with signals.
Maintainers
jwiedemanReadme
@jwiedeman/gtm-kit-solid
SolidJS primitives and context for Google Tag Manager. Fine-grained reactivity.
The SolidJS adapter for GTM Kit - provides context and hooks for idiomatic Solid integration.
Installation
npm install @jwiedeman/gtm-kit @jwiedeman/gtm-kit-solidyarn add @jwiedeman/gtm-kit @jwiedeman/gtm-kit-solidpnpm add @jwiedeman/gtm-kit @jwiedeman/gtm-kit-solidQuick Start
Step 1: Wrap Your App
// App.tsx
import { GtmProvider } from '@jwiedeman/gtm-kit-solid';
function App() {
return (
<GtmProvider containers="GTM-XXXXXX">
<MyApp />
</GtmProvider>
);
}Step 2: Push Events
import { useGtmPush } from '@jwiedeman/gtm-kit-solid';
function BuyButton() {
const push = useGtmPush();
return <button onClick={() => push({ event: 'purchase', value: 49.99 })}>Buy Now</button>;
}That's it! GTM is now running.
Features
| Feature | Description | | ------------------- | ----------------------------------- | | SolidJS Native | Built for Solid's reactivity system | | Fine-Grained | Only updates what needs to update | | Context-Based | Uses Solid's context API | | TypeScript | Full type definitions included | | Consent Mode v2 | Built-in GDPR compliance | | SSR Compatible | Safe for SolidStart SSR |
Available Hooks
useGtm()
Get the full GTM context.
import { useGtm } from '@jwiedeman/gtm-kit-solid';
function MyComponent() {
const { push, client, updateConsent, initialized } = useGtm();
return (
<div>
<p>GTM Initialized: {initialized ? 'Yes' : 'No'}</p>
<button onClick={() => push({ event: 'click' })}>Track</button>
</div>
);
}useGtmPush()
Get just the push function.
import { useGtmPush } from '@jwiedeman/gtm-kit-solid';
function MyComponent() {
const push = useGtmPush();
return <button onClick={() => push({ event: 'purchase', value: 99 })}>Buy</button>;
}useGtmConsent()
Access consent management functions.
import { useGtmConsent } from '@jwiedeman/gtm-kit-solid';
function CookieBanner() {
const { updateConsent } = useGtmConsent();
const acceptAll = () => {
updateConsent({
ad_storage: 'granted',
analytics_storage: 'granted',
ad_user_data: 'granted',
ad_personalization: 'granted'
});
};
return <button onClick={acceptAll}>Accept All</button>;
}useGtmClient()
Get the raw GTM client instance.
import { useGtmClient } from '@jwiedeman/gtm-kit-solid';
function MyComponent() {
const client = useGtmClient();
return <div>Initialized: {client.isInitialized() ? 'Yes' : 'No'}</div>;
}useGtmReady()
Get a function that resolves when GTM is loaded.
import { useGtmReady } from '@jwiedeman/gtm-kit-solid';
import { onMount } from 'solid-js';
function MyComponent() {
const whenReady = useGtmReady();
onMount(async () => {
const states = await whenReady();
console.log('GTM loaded:', states);
});
return <div>Loading...</div>;
}Provider Options
<GtmProvider
containers="GTM-XXXXXX"
autoInit={true}
dataLayerName="dataLayer"
host="https://www.googletagmanager.com"
scriptAttributes={{ nonce: '...' }}
onBeforeInit={(client) => {
// Set consent defaults here
}}
onAfterInit={(client) => {
// Called after GTM initializes
}}
>
{children}
</GtmProvider>SolidStart Integration
Basic Setup
// src/root.tsx
import { GtmProvider } from '@jwiedeman/gtm-kit-solid';
export default function Root() {
return (
<Html>
<Head />
<Body>
<GtmProvider containers="GTM-XXXXXX">
<Routes />
</GtmProvider>
</Body>
</Html>
);
}Page Tracking with Router
import { useGtmPush } from '@jwiedeman/gtm-kit-solid';
import { useLocation } from '@solidjs/router';
import { createEffect } from 'solid-js';
function PageTracker() {
const push = useGtmPush();
const location = useLocation();
createEffect(() => {
push({
event: 'page_view',
page_path: location.pathname
});
});
return null;
}Consent Mode v2 (GDPR)
import { GtmProvider, useGtmConsent } from '@jwiedeman/gtm-kit-solid';
import { consentPresets } from '@jwiedeman/gtm-kit';
// In your root component
function App() {
return (
<GtmProvider
containers="GTM-XXXXXX"
onBeforeInit={(client) => {
// Deny by default for EU users
client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
}}
>
<MyApp />
<CookieBanner />
</GtmProvider>
);
}
// Cookie banner component
function CookieBanner() {
const { updateConsent } = useGtmConsent();
return (
<div class="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>
);
}Multiple Containers
<GtmProvider
containers={[{ id: 'GTM-MAIN' }, { id: 'GTM-ADS', queryParams: { gtm_auth: 'abc', gtm_preview: 'env-1' } }]}
>
{children}
</GtmProvider>TypeScript
Full TypeScript support is included:
import type { GtmContextValue, GtmConsentApi } from '@jwiedeman/gtm-kit-solid';
import { useGtm, useGtmConsent } from '@jwiedeman/gtm-kit-solid';
function MyComponent() {
const gtm: GtmContextValue = useGtm();
const consent: GtmConsentApi = useGtmConsent();
// Fully typed!
gtm.push({ event: 'my_event', custom_param: 'value' });
}Requirements
- SolidJS 1.0+
@jwiedeman/gtm-kit(peer dependency)
Related Packages
- Core: @jwiedeman/gtm-kit (required)
Support
Have a question, found a bug, or need help?
Open an issue on GitHub — we're actively maintaining this project and respond quickly.
License
MIT