@formo/analytics 1.9.0 → 1.10.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 +12 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,7 +26,9 @@ Add the following to your `index.html`:
|
|
|
26
26
|
|
|
27
27
|
---
|
|
28
28
|
|
|
29
|
-
1. Install the npm package:
|
|
29
|
+
### 1. Install the npm package:
|
|
30
|
+
|
|
31
|
+
Install @formo/analytics via yarn or npm:
|
|
30
32
|
|
|
31
33
|
```
|
|
32
34
|
yarn add @formo/analytics
|
|
@@ -38,7 +40,7 @@ or
|
|
|
38
40
|
npm install @formo/analytics --save
|
|
39
41
|
```
|
|
40
42
|
|
|
41
|
-
2. Set up the `FormoAnalyticsProvider` in your application:
|
|
43
|
+
### 2. Set up the `FormoAnalyticsProvider` in your application:
|
|
42
44
|
|
|
43
45
|
```jsx
|
|
44
46
|
// AnalyticsProvider.tsx
|
|
@@ -77,10 +79,11 @@ export const AnalyticsProvider: FC<FormoAnalyticsProviderProps> = ({
|
|
|
77
79
|
initialize();
|
|
78
80
|
}, [apiKey, projectId]);
|
|
79
81
|
|
|
82
|
+
// To prevent app crashes, render a loading state during initialization
|
|
80
83
|
if (!isInitialized) {
|
|
81
84
|
return (
|
|
82
85
|
<FormoAnalyticsProvider apiKey={apiKey} projectId={projectId}>
|
|
83
|
-
|
|
86
|
+
Loading Content
|
|
84
87
|
</FormoAnalyticsProvider>
|
|
85
88
|
);
|
|
86
89
|
}
|
|
@@ -95,9 +98,9 @@ export const AnalyticsProvider: FC<FormoAnalyticsProviderProps> = ({
|
|
|
95
98
|
export default AnalyticsProvider;
|
|
96
99
|
```
|
|
97
100
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
Wrap your application with the `AnalyticsProvider`
|
|
101
|
+
### 3. Integrating the Provider in Your Root Layout
|
|
102
|
+
|
|
103
|
+
Wrap your application with the newly created `AnalyticsProvider` in your main layout file:
|
|
101
104
|
|
|
102
105
|
```jsx
|
|
103
106
|
import { AnalyticsProvider } from './AnalyticsProvider';
|
|
@@ -119,8 +122,9 @@ export default function RootLayout({
|
|
|
119
122
|
}
|
|
120
123
|
```
|
|
121
124
|
|
|
122
|
-
|
|
123
|
-
|
|
125
|
+
### 4. Using the SDK
|
|
126
|
+
|
|
127
|
+
Once the SDK is initialized, you can use its methods to track events and user interactions. Here’s how to do that:
|
|
124
128
|
|
|
125
129
|
```jsx
|
|
126
130
|
import { useFormoAnalytics } from '@formo/analytics';
|