@jwiedeman/gtm-kit-react 1.1.2 → 1.1.3
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.
- package/README.md +46 -31
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @jwiedeman/gtm-kit-react
|
|
2
2
|
|
|
3
|
-
[](https://github.com/jwiedeman/GTM-Kit/actions/workflows/ci.yml)
|
|
4
|
+
[](https://codecov.io/gh/jwiedeman/GTM-Kit)
|
|
5
|
+
[](https://www.npmjs.com/package/@jwiedeman/gtm-kit-react)
|
|
6
|
+
[](https://bundlephobia.com/package/@jwiedeman/gtm-kit-react)
|
|
7
7
|
[](https://www.typescriptlang.org/)
|
|
8
8
|
[](https://opensource.org/licenses/MIT)
|
|
9
9
|
[](https://reactjs.org/)
|
|
@@ -17,15 +17,15 @@ The modern React adapter for GTM Kit - uses hooks and Context API for clean, idi
|
|
|
17
17
|
## Installation
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
npm install @
|
|
20
|
+
npm install @jwiedeman/gtm-kit @jwiedeman/gtm-kit-react
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
```bash
|
|
24
|
-
yarn add @
|
|
24
|
+
yarn add @jwiedeman/gtm-kit @jwiedeman/gtm-kit-react
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
```bash
|
|
28
|
-
pnpm add @
|
|
28
|
+
pnpm add @jwiedeman/gtm-kit @jwiedeman/gtm-kit-react
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
---
|
|
@@ -36,7 +36,7 @@ pnpm add @react-gtm-kit/core @react-gtm-kit/react-modern
|
|
|
36
36
|
|
|
37
37
|
```tsx
|
|
38
38
|
// App.tsx or index.tsx
|
|
39
|
-
import { GtmProvider } from '@
|
|
39
|
+
import { GtmProvider } from '@jwiedeman/gtm-kit-react';
|
|
40
40
|
|
|
41
41
|
function App() {
|
|
42
42
|
return (
|
|
@@ -50,7 +50,7 @@ function App() {
|
|
|
50
50
|
### Step 2: Push Events
|
|
51
51
|
|
|
52
52
|
```tsx
|
|
53
|
-
import { useGtmPush } from '@
|
|
53
|
+
import { useGtmPush } from '@jwiedeman/gtm-kit-react';
|
|
54
54
|
|
|
55
55
|
function BuyButton() {
|
|
56
56
|
const push = useGtmPush();
|
|
@@ -140,21 +140,43 @@ useEffect(() => {
|
|
|
140
140
|
|
|
141
141
|
## Consent Mode v2 (GDPR)
|
|
142
142
|
|
|
143
|
+
### Setting Consent Defaults Before GTM Loads
|
|
144
|
+
|
|
145
|
+
To set consent defaults before GTM initializes, use `useGtmConsent` in a component that renders early:
|
|
146
|
+
|
|
143
147
|
```tsx
|
|
144
|
-
import { GtmProvider, useGtmConsent } from '@
|
|
145
|
-
import { consentPresets } from '@
|
|
148
|
+
import { GtmProvider, useGtmConsent } from '@jwiedeman/gtm-kit-react';
|
|
149
|
+
import { consentPresets } from '@jwiedeman/gtm-kit';
|
|
146
150
|
|
|
147
|
-
//
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
151
|
+
// Component that sets consent defaults on mount
|
|
152
|
+
function ConsentInitializer({ children }) {
|
|
153
|
+
const { setConsentDefaults } = useGtmConsent();
|
|
154
|
+
|
|
155
|
+
useEffect(() => {
|
|
156
|
+
setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
|
|
157
|
+
}, [setConsentDefaults]);
|
|
158
|
+
|
|
159
|
+
return <>{children}</>;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// App wrapper
|
|
163
|
+
function App() {
|
|
164
|
+
return (
|
|
165
|
+
<GtmProvider config={{ containers: 'GTM-XXXXXX' }}>
|
|
166
|
+
<ConsentInitializer>
|
|
167
|
+
<YourApp />
|
|
168
|
+
</ConsentInitializer>
|
|
169
|
+
</GtmProvider>
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Cookie Banner Component
|
|
175
|
+
|
|
176
|
+
```tsx
|
|
177
|
+
import { useGtmConsent } from '@jwiedeman/gtm-kit-react';
|
|
178
|
+
import { consentPresets } from '@jwiedeman/gtm-kit';
|
|
156
179
|
|
|
157
|
-
// In your cookie banner
|
|
158
180
|
function CookieBanner() {
|
|
159
181
|
const { updateConsent } = useGtmConsent();
|
|
160
182
|
|
|
@@ -206,13 +228,6 @@ updateConsent({ ad_storage: 'granted', ad_user_data: 'granted' });
|
|
|
206
228
|
host: 'https://custom.host.com', // Optional
|
|
207
229
|
scriptAttributes: { nonce: '...' } // Optional: CSP
|
|
208
230
|
}}
|
|
209
|
-
onBeforeInit={(client) => {
|
|
210
|
-
// Called before GTM initializes
|
|
211
|
-
// Perfect for consent defaults
|
|
212
|
-
}}
|
|
213
|
-
onAfterInit={(client) => {
|
|
214
|
-
// Called after GTM initializes
|
|
215
|
-
}}
|
|
216
231
|
>
|
|
217
232
|
{children}
|
|
218
233
|
</GtmProvider>
|
|
@@ -224,7 +239,7 @@ updateConsent({ ad_storage: 'granted', ad_user_data: 'granted' });
|
|
|
224
239
|
|
|
225
240
|
```tsx
|
|
226
241
|
import { useLocation } from 'react-router-dom';
|
|
227
|
-
import { useGtmPush } from '@
|
|
242
|
+
import { useGtmPush } from '@jwiedeman/gtm-kit-react';
|
|
228
243
|
import { useEffect, useRef } from 'react';
|
|
229
244
|
|
|
230
245
|
function PageTracker() {
|
|
@@ -267,7 +282,7 @@ In React development mode with StrictMode, components mount twice. This causes m
|
|
|
267
282
|
## Requirements
|
|
268
283
|
|
|
269
284
|
- React 16.8+ (hooks support)
|
|
270
|
-
- `@
|
|
285
|
+
- `@jwiedeman/gtm-kit` (peer dependency)
|
|
271
286
|
|
|
272
287
|
---
|
|
273
288
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jwiedeman/gtm-kit-react",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"description": "React hooks and provider for GTM Kit - Google Tag Manager integration.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"typecheck": "tsc --noEmit"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@jwiedeman/gtm-kit": "^1.1.
|
|
43
|
+
"@jwiedeman/gtm-kit": "^1.1.3"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|