You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Welcome to the official Mixpanel React Native library.
26
-
The Mixpanel React Native library is an open-source project, and we'd love to see your contributions!
26
+
The Mixpanel React Native library is an open-source project, and we'd love to see your contributions!
27
27
We'd also love for you to come and work with us! Check out **[Jobs](https://mixpanel.com/jobs/#openings)** for details.
28
28
29
29
## Quick Start Guide
30
30
31
31
Mixpanel's React Native SDK is a wrapper around Mixpanel’s native iOS and Android SDKs and it supports offline tracking. Check out our **[official documentation](https://developer.mixpanel.com/docs/react-native)** for more in depth information on installing and using Mixpanel on React Native.
32
32
33
33
<aname="installation"></a>
34
+
34
35
### 1. Install Mixpanel
36
+
35
37
#### Prerequisites
38
+
36
39
- React Native v0.6+
37
40
-[Setup development environment for React Native](https://reactnative.dev/docs/environment-setup)
41
+
38
42
#### Steps
39
-
1. Under your app's root directory, install Mixpanel React Native SDK.
43
+
44
+
1. Under your app's root directory, install Mixpanel React Native SDK.
45
+
40
46
```
41
47
npm install mixpanel-react-native
42
48
```
49
+
43
50
2. Under your application's ios folder, run
51
+
44
52
```
45
53
pod install
46
-
```
47
-
Please note: You do not need to update your Podfile to add Mixpanel.
54
+
```
48
55
49
-
3. Since Xcode 12.5, there is a known swift compile issue, please refer to this **[workaround](https://github.com/mixpanel/mixpanel-react-native/issues/43#issuecomment-829599732)**. However the compile issue has been resolved in Xcode 13.2.1+, there is no extra step required as long as you upgrade to Xcode 13.2.1+.
56
+
Please note: You do not need to update your Podfile to add Mixpanel.
50
57
58
+
3. Since Xcode 12.5, there is a known swift compile issue, please refer to this **[workaround](https://github.com/mixpanel/mixpanel-react-native/issues/43#issuecomment-829599732)**. However the compile issue has been resolved in Xcode 13.2.1+, there is no extra step required as long as you upgrade to Xcode 13.2.1+.
51
59
52
60
### 2. Initialize Mixpanel
61
+
53
62
To start tracking with the library you must first initialize with your project token. You can get your project token from [project settings](https://mixpanel.com/settings/project).
Once you've called this method once, you can access `mixpanel` throughout the rest of your application.
73
+
64
74
### 3. Send Data
75
+
65
76
Let's get started by sending event data. You can send an event from anywhere in your application. Better understand user behavior by storing details that are specific to the event (properties). After initializing the library, Mixpanel will automatically track some properties by default. [learn more](https://help.mixpanel.com/hc/en-us/articles/115004613766-Default-Properties-Collected-by-Mixpanel)
In addition to event data, you can also send [user profile data](https://developer.mixpanel.com/docs/react-native#storing-user-profiles). We recommend this after completing the quickstart guide.
86
+
73
87
### 4. Check for Success
74
-
[Open up Events in Mixpanel](http://mixpanel.com/report/events) to view incoming events.
88
+
89
+
[Open up Events in Mixpanel](http://mixpanel.com/report/events) to view incoming events.
75
90
Once data hits our API, it generally takes ~60 seconds for it to be processed, stored, and queryable in your project.
### Expo and React Native for Web support (3.0.2 and above)
104
-
Starting from version 3.0.2, we have introduced support for Expo, React Native for Web, and other platforms utilizing React Native that do not support iOS and Android directly.
105
-
To enable this feature,
106
-
<br>Step 1:
119
+
120
+
Starting from version 3.0.2, we have introduced support for Expo, React Native for Web, and other platforms utilizing React Native that do not support iOS and Android directly.
When JavaScript mode is enabled, Mixpanel utilizes [AsyncStorage](https://react-native-async-storage.github.io/async-storage/) to persist data. If you prefer not to use it, or if AsyncStorage is unavailable in your target environment, you can import or define a different storage class. However, it must follow a subset (see: [`MixpanelAsyncStorage`](index.d.ts)) of the same interface as [AsyncStorage](https://react-native-async-storage.github.io/async-storage/) The following example demonstrates how to use a custom storage solution:
111
129
112
130
```
113
131
// Optional: if you do not want to use the default AsyncStorage
const mixpanel = new Mixpanel('YOUR_TOKEN', trackAutomaticEvents, useNative, MyAsyncStorage);
@@ -120,6 +138,7 @@ mixpanel.init();
120
138
121
139
<br>Step 2:
122
140
Initialize Mixpanel with an additional parameter, `useNative`, set to false.
141
+
123
142
```
124
143
const trackAutomaticEvents = false;
125
144
const useNative = false;
@@ -128,44 +147,46 @@ const mixpanel = new Mixpanel(
128
147
trackAutomaticEvents,
129
148
useNative
130
149
);
131
-
```
132
-
This will activate JavaScript mode.
133
-
150
+
```
134
151
135
-
👋 👋 Tell us about the Mixpanel developer experience! [https://www.mixpanel.com/devnps](https://www.mixpanel.com/devnps) 👍 👎
152
+
This will activate JavaScript mode.
136
153
154
+
👋 👋 Tell us about the Mixpanel developer experience! [https://www.mixpanel.com/devnps](https://www.mixpanel.com/devnps) 👍 👎
137
155
138
156
## FAQ
139
-
**I want to stop tracking an event/event property in Mixpanel. Is that possible?**
140
-
Yes, in Lexicon, you can intercept and drop incoming events or properties. Mixpanel won’t store any new data for the event or property you select to drop. [See this article for more information](https://help.mixpanel.com/hc/en-us/articles/360001307806#dropping-events-and-properties).
141
157
142
-
**I have a test user I would like to opt out of tracking. How do I do that?**
143
-
Mixpanel’s client-side tracking library contains the [optOutTracking()](https://mixpanel.github.io/mixpanel-react-native/Mixpanel.html#optOutTracking) method, which will set the user’s local opt-out state to “true” and will prevent data from being sent from a user’s device. More detailed instructions can be found in the section, [Opting users out of tracking](https://developer.mixpanel.com/docs/react-native#opting-users-out-of-tracking).
158
+
**I want to stop tracking an event/event property in Mixpanel. Is that possible?**
159
+
Yes, in Lexicon, you can intercept and drop incoming events or properties. Mixpanel won’t store any new data for the event or property you select to drop. [See this article for more information](https://help.mixpanel.com/hc/en-us/articles/360001307806#dropping-events-and-properties).
160
+
161
+
**I have a test user I would like to opt out of tracking. How do I do that?**
162
+
Mixpanel’s client-side tracking library contains the [optOutTracking()](https://mixpanel.github.io/mixpanel-react-native/Mixpanel.html#optOutTracking) method, which will set the user’s local opt-out state to “true” and will prevent data from being sent from a user’s device. More detailed instructions can be found in the section, [Opting users out of tracking](https://developer.mixpanel.com/docs/react-native#opting-users-out-of-tracking).
144
163
145
-
**Why aren't my events showing up?**
146
-
First, make sure your test device has internet access. To preserve battery life and customer bandwidth, the Mixpanel library doesn't send the events you record immediately. Instead, it sends batches to the Mixpanel servers every 60 seconds while your application is running, as well as when the application transitions to the background. You can call [flush()](https://mixpanel.github.io/mixpanel-react-native/Mixpanel.html#flush) manually if you want to force a flush at a particular moment.
164
+
**Why aren't my events showing up?**
165
+
First, make sure your test device has internet access. To preserve battery life and customer bandwidth, the Mixpanel library doesn't send the events you record immediately. Instead, it sends batches to the Mixpanel servers every 60 seconds while your application is running, as well as when the application transitions to the background. You can call [flush()](https://mixpanel.github.io/mixpanel-react-native/Mixpanel.html#flush) manually if you want to force a flush at a particular moment.
147
166
148
167
```
149
168
mixpanel.flush();
150
169
```
151
170
152
-
If your events are still not showing up after 60 seconds, check if you have opted out of tracking. You can also enable Mixpanel debugging and logging, it allows you to see the debug output from the Mixpanel library. To enable it, call [setLoggingEnabled](https://mixpanel.github.io/mixpanel-react-native/Mixpanel.html#setLoggingEnabled) with true, then run your iOS project with Xcode or android project with Android Studio. The logs should be available in the console.
171
+
If your events are still not showing up after 60 seconds, check if you have opted out of tracking. You can also enable Mixpanel debugging and logging, it allows you to see the debug output from the Mixpanel library. To enable it, call [setLoggingEnabled](https://mixpanel.github.io/mixpanel-react-native/Mixpanel.html#setLoggingEnabled) with true, then run your iOS project with Xcode or android project with Android Studio. The logs should be available in the console.
153
172
154
173
```
155
174
mixpanel.setLoggingEnabled(true);
156
175
```
157
176
158
-
**Starting with iOS 14.5, do I need to request the user’s permission through the AppTrackingTransparency framework to use Mixpanel?**
177
+
**Starting with iOS 14.5, do I need to request the user’s permission through the AppTrackingTransparency framework to use Mixpanel?**
159
178
No, Mixpanel does not use IDFA so it does not require user permission through the AppTrackingTransparency(ATT) framework.
160
179
161
-
**If I use Mixpanel, how do I answer app privacy questions for the App Store?**
162
-
Please refer to our [Apple App Developer Privacy Guidance](https://mixpanel.com/legal/app-store-privacy-details/)
163
-
180
+
**If I use Mixpanel, how do I answer app privacy questions for the App Store?**
181
+
Please refer to our [Apple App Developer Privacy Guidance](https://mixpanel.com/legal/app-store-privacy-details/)
164
182
165
183
## I want to know more!
166
184
167
185
No worries, here are some links that you will find useful:
0 commit comments