react-event-tracking 1.0.1 → 1.0.2
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 +9 -9
- package/dist/index.cjs +12 -13
- package/dist/index.d.cts +10 -12
- package/dist/index.d.mts +10 -12
- package/dist/index.d.ts +10 -12
- package/dist/index.mjs +10 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,32 +19,32 @@ yarn add react-event-tracking
|
|
|
19
19
|
|
|
20
20
|
1. Define the root handler (e.g., send to GTM or API)
|
|
21
21
|
```tsx
|
|
22
|
-
import {
|
|
22
|
+
import { TrackRoot } from 'react-event-tracking';
|
|
23
23
|
|
|
24
24
|
const Main = () => (
|
|
25
|
-
<
|
|
25
|
+
<TrackRoot onEvent={(name, params) => gtag('event', name, params)}>
|
|
26
26
|
<App/>
|
|
27
|
-
</
|
|
27
|
+
</TrackRoot>
|
|
28
28
|
);
|
|
29
29
|
```
|
|
30
30
|
2. Wrap any component with shared parameters
|
|
31
31
|
```tsx
|
|
32
|
-
import {
|
|
32
|
+
import { TrackProvider } from 'react-event-tracking';
|
|
33
33
|
|
|
34
34
|
const Dashboard = () => (
|
|
35
|
-
<
|
|
35
|
+
<TrackProvider params={{ screen: 'dashboard' }}>
|
|
36
36
|
<DashboardView/>
|
|
37
|
-
</
|
|
37
|
+
</TrackProvider>
|
|
38
38
|
);
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
3. Send events conveniently. On button click, parameters will be merged.
|
|
42
42
|
|
|
43
43
|
```tsx
|
|
44
|
-
import {
|
|
44
|
+
import { useTracker } from 'react-event-tracking';
|
|
45
45
|
|
|
46
46
|
const MyButton = () => {
|
|
47
|
-
const { sendEvent } =
|
|
47
|
+
const { sendEvent } = useTracker();
|
|
48
48
|
|
|
49
49
|
return (
|
|
50
50
|
// event sent with parameters: { screen: 'dashboard', button_id: '123' }
|
|
@@ -61,7 +61,7 @@ const MyButton = () => {
|
|
|
61
61
|
|
|
62
62
|
```tsx
|
|
63
63
|
export function PageView(props) {
|
|
64
|
-
const { sendEvent } =
|
|
64
|
+
const { sendEvent } = useTracker();
|
|
65
65
|
|
|
66
66
|
useEffect(() => {
|
|
67
67
|
sendEvent('page_view');
|
package/dist/index.cjs
CHANGED
|
@@ -6,15 +6,15 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
6
6
|
|
|
7
7
|
const React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
8
8
|
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const ctx = React.useContext(
|
|
9
|
+
const TrackContext = React__default.createContext(null);
|
|
10
|
+
const useTracker = () => {
|
|
11
|
+
const ctx = React.useContext(TrackContext);
|
|
12
12
|
if (!ctx) {
|
|
13
|
-
throw new Error("
|
|
13
|
+
throw new Error("useTracker must be used within TrackRoot");
|
|
14
14
|
}
|
|
15
15
|
return ctx;
|
|
16
16
|
};
|
|
17
|
-
const
|
|
17
|
+
const TrackRoot = ({
|
|
18
18
|
onEvent,
|
|
19
19
|
children
|
|
20
20
|
}) => {
|
|
@@ -24,13 +24,13 @@ const AnalyticsRoot = ({
|
|
|
24
24
|
onEventRef.current(eventName, params);
|
|
25
25
|
}, []);
|
|
26
26
|
const value = React.useMemo(() => ({ sendEvent }), [sendEvent]);
|
|
27
|
-
return /* @__PURE__ */ React__default.createElement(
|
|
27
|
+
return /* @__PURE__ */ React__default.createElement(TrackContext.Provider, { value }, children);
|
|
28
28
|
};
|
|
29
|
-
const
|
|
29
|
+
const TrackProvider = ({
|
|
30
30
|
params,
|
|
31
31
|
children
|
|
32
32
|
}) => {
|
|
33
|
-
const ctx =
|
|
33
|
+
const ctx = useTracker();
|
|
34
34
|
const paramsRef = React.useRef(params);
|
|
35
35
|
paramsRef.current = params;
|
|
36
36
|
const sendEvent = React.useCallback(
|
|
@@ -44,10 +44,9 @@ const AnalyticsProvider = ({
|
|
|
44
44
|
[ctx]
|
|
45
45
|
);
|
|
46
46
|
const value = React.useMemo(() => ({ sendEvent }), [sendEvent]);
|
|
47
|
-
return /* @__PURE__ */ React__default.createElement(
|
|
47
|
+
return /* @__PURE__ */ React__default.createElement(TrackContext.Provider, { value }, children);
|
|
48
48
|
};
|
|
49
49
|
|
|
50
|
-
exports.
|
|
51
|
-
exports.
|
|
52
|
-
exports.
|
|
53
|
-
exports.useAnalytics = useAnalytics;
|
|
50
|
+
exports.TrackProvider = TrackProvider;
|
|
51
|
+
exports.TrackRoot = TrackRoot;
|
|
52
|
+
exports.useTracker = useTracker;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
3
3
|
|
|
4
|
-
type
|
|
5
|
-
interface
|
|
6
|
-
sendEvent: (eventName: string, params?:
|
|
4
|
+
type EventParams = Record<string, any>;
|
|
5
|
+
interface TrackContextValue {
|
|
6
|
+
sendEvent: (eventName: string, params?: EventParams) => void;
|
|
7
7
|
}
|
|
8
|
-
declare const
|
|
9
|
-
declare const
|
|
10
|
-
|
|
11
|
-
onEvent: (eventName: string, params?: AnalyticsParams) => void;
|
|
8
|
+
declare const useTracker: () => TrackContextValue;
|
|
9
|
+
declare const TrackRoot: ({ onEvent, children }: PropsWithChildren<{
|
|
10
|
+
onEvent: (eventName: string, params?: EventParams) => void;
|
|
12
11
|
}>) => react_jsx_runtime.JSX.Element;
|
|
13
|
-
declare const
|
|
14
|
-
params:
|
|
12
|
+
declare const TrackProvider: ({ params, children }: PropsWithChildren<{
|
|
13
|
+
params: EventParams;
|
|
15
14
|
}>) => react_jsx_runtime.JSX.Element;
|
|
16
15
|
|
|
17
|
-
export {
|
|
18
|
-
export type { AnalyticsParams };
|
|
16
|
+
export { TrackProvider, TrackRoot, useTracker };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
3
3
|
|
|
4
|
-
type
|
|
5
|
-
interface
|
|
6
|
-
sendEvent: (eventName: string, params?:
|
|
4
|
+
type EventParams = Record<string, any>;
|
|
5
|
+
interface TrackContextValue {
|
|
6
|
+
sendEvent: (eventName: string, params?: EventParams) => void;
|
|
7
7
|
}
|
|
8
|
-
declare const
|
|
9
|
-
declare const
|
|
10
|
-
|
|
11
|
-
onEvent: (eventName: string, params?: AnalyticsParams) => void;
|
|
8
|
+
declare const useTracker: () => TrackContextValue;
|
|
9
|
+
declare const TrackRoot: ({ onEvent, children }: PropsWithChildren<{
|
|
10
|
+
onEvent: (eventName: string, params?: EventParams) => void;
|
|
12
11
|
}>) => react_jsx_runtime.JSX.Element;
|
|
13
|
-
declare const
|
|
14
|
-
params:
|
|
12
|
+
declare const TrackProvider: ({ params, children }: PropsWithChildren<{
|
|
13
|
+
params: EventParams;
|
|
15
14
|
}>) => react_jsx_runtime.JSX.Element;
|
|
16
15
|
|
|
17
|
-
export {
|
|
18
|
-
export type { AnalyticsParams };
|
|
16
|
+
export { TrackProvider, TrackRoot, useTracker };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
3
3
|
|
|
4
|
-
type
|
|
5
|
-
interface
|
|
6
|
-
sendEvent: (eventName: string, params?:
|
|
4
|
+
type EventParams = Record<string, any>;
|
|
5
|
+
interface TrackContextValue {
|
|
6
|
+
sendEvent: (eventName: string, params?: EventParams) => void;
|
|
7
7
|
}
|
|
8
|
-
declare const
|
|
9
|
-
declare const
|
|
10
|
-
|
|
11
|
-
onEvent: (eventName: string, params?: AnalyticsParams) => void;
|
|
8
|
+
declare const useTracker: () => TrackContextValue;
|
|
9
|
+
declare const TrackRoot: ({ onEvent, children }: PropsWithChildren<{
|
|
10
|
+
onEvent: (eventName: string, params?: EventParams) => void;
|
|
12
11
|
}>) => react_jsx_runtime.JSX.Element;
|
|
13
|
-
declare const
|
|
14
|
-
params:
|
|
12
|
+
declare const TrackProvider: ({ params, children }: PropsWithChildren<{
|
|
13
|
+
params: EventParams;
|
|
15
14
|
}>) => react_jsx_runtime.JSX.Element;
|
|
16
15
|
|
|
17
|
-
export {
|
|
18
|
-
export type { AnalyticsParams };
|
|
16
|
+
export { TrackProvider, TrackRoot, useTracker };
|
package/dist/index.mjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import React, { useContext, useRef, useCallback, useMemo } from 'react';
|
|
2
2
|
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
const ctx = useContext(
|
|
3
|
+
const TrackContext = React.createContext(null);
|
|
4
|
+
const useTracker = () => {
|
|
5
|
+
const ctx = useContext(TrackContext);
|
|
6
6
|
if (!ctx) {
|
|
7
|
-
throw new Error("
|
|
7
|
+
throw new Error("useTracker must be used within TrackRoot");
|
|
8
8
|
}
|
|
9
9
|
return ctx;
|
|
10
10
|
};
|
|
11
|
-
const
|
|
11
|
+
const TrackRoot = ({
|
|
12
12
|
onEvent,
|
|
13
13
|
children
|
|
14
14
|
}) => {
|
|
@@ -18,13 +18,13 @@ const AnalyticsRoot = ({
|
|
|
18
18
|
onEventRef.current(eventName, params);
|
|
19
19
|
}, []);
|
|
20
20
|
const value = useMemo(() => ({ sendEvent }), [sendEvent]);
|
|
21
|
-
return /* @__PURE__ */ React.createElement(
|
|
21
|
+
return /* @__PURE__ */ React.createElement(TrackContext.Provider, { value }, children);
|
|
22
22
|
};
|
|
23
|
-
const
|
|
23
|
+
const TrackProvider = ({
|
|
24
24
|
params,
|
|
25
25
|
children
|
|
26
26
|
}) => {
|
|
27
|
-
const ctx =
|
|
27
|
+
const ctx = useTracker();
|
|
28
28
|
const paramsRef = useRef(params);
|
|
29
29
|
paramsRef.current = params;
|
|
30
30
|
const sendEvent = useCallback(
|
|
@@ -38,7 +38,7 @@ const AnalyticsProvider = ({
|
|
|
38
38
|
[ctx]
|
|
39
39
|
);
|
|
40
40
|
const value = useMemo(() => ({ sendEvent }), [sendEvent]);
|
|
41
|
-
return /* @__PURE__ */ React.createElement(
|
|
41
|
+
return /* @__PURE__ */ React.createElement(TrackContext.Provider, { value }, children);
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
-
export {
|
|
44
|
+
export { TrackProvider, TrackRoot, useTracker };
|