@dcl/hooks 0.2.3-20251202134711.commit-88fc4d5 → 0.3.0
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 +14 -42
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -179,17 +179,17 @@ function MyComponent() {
|
|
|
179
179
|
|
|
180
180
|
#### Using the usePageTracking Hook
|
|
181
181
|
|
|
182
|
-
The `usePageTracking` hook tracks page views when the pathname changes. You need to pass the current pathname as a parameter:
|
|
182
|
+
The `usePageTracking` hook tracks page views when the pathname changes. You need to pass the current pathname as a parameter from your router:
|
|
183
183
|
|
|
184
184
|
```typescript
|
|
185
185
|
import { usePageTracking } from '@dcl/hooks'
|
|
186
|
+
import { useLocation } from 'react-router-dom'
|
|
186
187
|
|
|
187
188
|
function MyPage() {
|
|
188
|
-
|
|
189
|
-
const pathname = typeof window !== 'undefined' ? window.location.pathname : '/'
|
|
189
|
+
const location = useLocation()
|
|
190
190
|
|
|
191
191
|
// Tracks page view when pathname changes
|
|
192
|
-
usePageTracking(pathname)
|
|
192
|
+
usePageTracking(location.pathname)
|
|
193
193
|
|
|
194
194
|
return (
|
|
195
195
|
<div>
|
|
@@ -200,20 +200,6 @@ function MyPage() {
|
|
|
200
200
|
}
|
|
201
201
|
```
|
|
202
202
|
|
|
203
|
-
If you're using a router library, you can get the pathname from it:
|
|
204
|
-
|
|
205
|
-
```typescript
|
|
206
|
-
import { usePageTracking } from '@dcl/hooks'
|
|
207
|
-
import { useLocation } from 'react-router-dom' // React Router example
|
|
208
|
-
|
|
209
|
-
function MyPage() {
|
|
210
|
-
const location = useLocation()
|
|
211
|
-
usePageTracking(location.pathname)
|
|
212
|
-
|
|
213
|
-
return <div>My Page</div>
|
|
214
|
-
}
|
|
215
|
-
```
|
|
216
|
-
|
|
217
203
|
If you need to track additional page properties, you can use the `useAnalytics` hook directly:
|
|
218
204
|
|
|
219
205
|
```typescript
|
|
@@ -247,13 +233,13 @@ Here's a complete example showing how to use all analytics features together:
|
|
|
247
233
|
|
|
248
234
|
```typescript
|
|
249
235
|
import { AnalyticsProvider, useAnalytics, usePageTracking } from '@dcl/hooks'
|
|
236
|
+
import { useLocation } from 'react-router-dom'
|
|
250
237
|
|
|
251
238
|
function MyPage() {
|
|
252
|
-
|
|
253
|
-
const pathname = typeof window !== 'undefined' ? window.location.pathname : '/'
|
|
239
|
+
const location = useLocation()
|
|
254
240
|
|
|
255
241
|
// Track page views
|
|
256
|
-
usePageTracking(pathname)
|
|
242
|
+
usePageTracking(location.pathname)
|
|
257
243
|
|
|
258
244
|
return (
|
|
259
245
|
<div>
|
|
@@ -367,17 +353,17 @@ function MyComponent() {
|
|
|
367
353
|
|
|
368
354
|
#### Using the usePageTracking Hook
|
|
369
355
|
|
|
370
|
-
The `usePageTracking` hook tracks page views when the pathname changes. You need to pass the current pathname as a parameter:
|
|
356
|
+
The `usePageTracking` hook tracks page views when the pathname changes. You need to pass the current pathname as a parameter from your router:
|
|
371
357
|
|
|
372
358
|
```typescript
|
|
373
359
|
import { usePageTracking } from '@dcl/hooks'
|
|
360
|
+
import { useLocation } from 'react-router-dom'
|
|
374
361
|
|
|
375
362
|
function MyPage() {
|
|
376
|
-
|
|
377
|
-
const pathname = typeof window !== 'undefined' ? window.location.pathname : '/'
|
|
363
|
+
const location = useLocation()
|
|
378
364
|
|
|
379
365
|
// Tracks page view when pathname changes
|
|
380
|
-
usePageTracking(pathname)
|
|
366
|
+
usePageTracking(location.pathname)
|
|
381
367
|
|
|
382
368
|
return (
|
|
383
369
|
<div>
|
|
@@ -388,20 +374,6 @@ function MyPage() {
|
|
|
388
374
|
}
|
|
389
375
|
```
|
|
390
376
|
|
|
391
|
-
If you're using a router library, you can get the pathname from it:
|
|
392
|
-
|
|
393
|
-
```typescript
|
|
394
|
-
import { usePageTracking } from '@dcl/hooks'
|
|
395
|
-
import { useLocation } from 'react-router-dom' // React Router example
|
|
396
|
-
|
|
397
|
-
function MyPage() {
|
|
398
|
-
const location = useLocation()
|
|
399
|
-
usePageTracking(location.pathname)
|
|
400
|
-
|
|
401
|
-
return <div>My Page</div>
|
|
402
|
-
}
|
|
403
|
-
```
|
|
404
|
-
|
|
405
377
|
If you need to track additional page properties, you can use the `useAnalytics` hook directly:
|
|
406
378
|
|
|
407
379
|
```typescript
|
|
@@ -435,13 +407,13 @@ Here's a complete example showing how to use all analytics features together:
|
|
|
435
407
|
|
|
436
408
|
```typescript
|
|
437
409
|
import { AnalyticsProvider, useAnalytics, usePageTracking } from '@dcl/hooks'
|
|
410
|
+
import { useLocation } from 'react-router-dom'
|
|
438
411
|
|
|
439
412
|
function MyPage() {
|
|
440
|
-
|
|
441
|
-
const pathname = typeof window !== 'undefined' ? window.location.pathname : '/'
|
|
413
|
+
const location = useLocation()
|
|
442
414
|
|
|
443
415
|
// Track page views
|
|
444
|
-
usePageTracking(pathname)
|
|
416
|
+
usePageTracking(location.pathname)
|
|
445
417
|
|
|
446
418
|
return (
|
|
447
419
|
<div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dcl/hooks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"main": "cjs/index.js",
|
|
5
5
|
"module": "esm/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"<rootDir>/test/setup.ts"
|
|
84
84
|
]
|
|
85
85
|
},
|
|
86
|
-
"commit": "
|
|
86
|
+
"commit": "6e50203e71614a5366c2734eeac779bd463b58ea"
|
|
87
87
|
}
|