@jitsu/jitsu-react 1.1.0-canary.204 → 1.1.0-canary.206.20230220023641
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 +19 -90
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
# jitsu-react
|
|
2
2
|
|
|
3
|
-
>
|
|
4
3
|
|
|
5
|
-
[](https://www.npmjs.com/package/@jitsu/jitsu-react)
|
|
6
5
|
|
|
7
6
|
## Install
|
|
8
7
|
|
|
@@ -13,111 +12,41 @@ npm install --save @jitsu/jitsu-react
|
|
|
13
12
|
## Usage
|
|
14
13
|
|
|
15
14
|
To setup Jitsu-React library you need to add `JitsuProvider` component close to the root level of your app:
|
|
16
|
-
```tsx
|
|
17
|
-
import React, { Component } from 'react'
|
|
18
|
-
import { JitsuProvider } from "@jitsu/jitsu-react";
|
|
19
|
-
|
|
20
|
-
class Example extends Component {
|
|
21
|
-
render() {
|
|
22
|
-
return <JitsuProvider options={{ host: "https://mysiteid.d.jitsu.com" }} >
|
|
23
|
-
<App />
|
|
24
|
-
</JitsuProvider>
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
```
|
|
28
15
|
|
|
29
|
-
Then use `useJitsu` hook in components where you want to track events.
|
|
30
16
|
```tsx
|
|
31
|
-
import
|
|
32
|
-
import {
|
|
17
|
+
import React from "react";
|
|
18
|
+
import { JitsuProvider } from "@jitsu/jitsu-react";
|
|
33
19
|
|
|
34
20
|
export default function App() {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<div>
|
|
41
|
-
...
|
|
42
|
-
</div>
|
|
43
|
-
);
|
|
21
|
+
return <JitsuProvider options={{ host: "https://<id>.d.jitsu.com" }}>
|
|
22
|
+
<Page />
|
|
23
|
+
</JitsuProvider>;
|
|
44
24
|
}
|
|
45
25
|
```
|
|
46
26
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
### For react-router:
|
|
50
|
-
To enable auto page tracking with react-router, pass `useLocation` hook from `react-router-dom` to `autoPageTracking` option:
|
|
51
|
-
```tsx
|
|
52
|
-
import * as React from "react";
|
|
53
|
-
import { useLocation } from "react-router-dom";
|
|
54
|
-
import { useJitsu } from "@jitsu/jitsu-react";
|
|
55
|
-
|
|
56
|
-
export default function App() {
|
|
57
|
-
useJitsu({
|
|
58
|
-
// Enable auto page tracking with react-router
|
|
59
|
-
autoPageTracking: {
|
|
60
|
-
reactRouter: useLocation
|
|
61
|
-
},
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
return (
|
|
65
|
-
<div>
|
|
66
|
-
...
|
|
67
|
-
</div>
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
```
|
|
27
|
+
Then use `useJitsu` hook in components where you want to track events.
|
|
71
28
|
|
|
72
|
-
### For Next.JS router:
|
|
73
|
-
To enable auto page tracking with Next.JS router, pass `useRouter` hook from `next/router` to `autoPageTracking` option:
|
|
74
29
|
```tsx
|
|
75
30
|
import * as React from "react";
|
|
76
|
-
import { useRouter } from "next/router";
|
|
77
31
|
import { useJitsu } from "@jitsu/jitsu-react";
|
|
32
|
+
import { useEffect } from "react";
|
|
78
33
|
|
|
79
|
-
export default function
|
|
80
|
-
useJitsu(
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
});
|
|
34
|
+
export default function Page() {
|
|
35
|
+
const { analytics } = useJitsu();
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
// Track page view
|
|
38
|
+
analytics.track("event", { prop: "value" });
|
|
39
|
+
}, [location]);
|
|
86
40
|
|
|
87
41
|
return (
|
|
88
42
|
<div>
|
|
89
|
-
|
|
43
|
+
<button onClick={() => analytics.track("button-click")}>Click me!</button>
|
|
90
44
|
</div>
|
|
91
45
|
);
|
|
92
46
|
}
|
|
93
47
|
```
|
|
94
48
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
Partial snippet:
|
|
101
|
-
```tsx
|
|
102
|
-
export default function App() {
|
|
103
|
-
const user = useUser();
|
|
104
|
-
|
|
105
|
-
useJitsu({
|
|
106
|
-
autoPageTracking: {
|
|
107
|
-
reactRouter: useLocation,
|
|
108
|
-
before: function (analytics) {
|
|
109
|
-
if (user && user.id) {
|
|
110
|
-
analytics.identify(user.id, { name: user.name, email: user.email });
|
|
111
|
-
}
|
|
112
|
-
},
|
|
113
|
-
beforeDeps: [user],
|
|
114
|
-
},
|
|
115
|
-
});
|
|
116
|
-
|
|
117
|
-
return (
|
|
118
|
-
<div>
|
|
119
|
-
...
|
|
120
|
-
</div>
|
|
121
|
-
);
|
|
122
|
-
}
|
|
123
|
-
```
|
|
49
|
+
As `location` you should use an value that changes on every navigation. Examples:
|
|
50
|
+
* React Router: `useLocationHook()`
|
|
51
|
+
* Next.js: `const rounter = useRouter()`; then `router.asPath`
|
|
52
|
+
* Others: `[window.location.pathname, window.location.search, window.location.hash]`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jitsu/jitsu-react",
|
|
3
|
-
"version": "1.1.0-canary.
|
|
3
|
+
"version": "1.1.0-canary.206.20230220023641",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"node": ">=10"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@jitsu/js": "
|
|
14
|
+
"@jitsu/js": "0.0.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": "15.x || 16.x || 17.x || 18.x",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@types/node": "^18.11.9",
|
|
37
37
|
"microbundle-crl": "^0.13.11",
|
|
38
38
|
"typescript": "^4.9.3",
|
|
39
|
-
"@jitsu/js": "
|
|
39
|
+
"@jitsu/js": "0.0.0"
|
|
40
40
|
},
|
|
41
41
|
"files": [
|
|
42
42
|
"dist"
|