Skip to content

Commit 9d50f0f

Browse files
authored
Merge pull request #66 from mixpanel/update-readme
Update README: Improve the quick start guide
2 parents 5af0f82 + b06920e commit 9d50f0f

File tree

2 files changed

+90
-25
lines changed

2 files changed

+90
-25
lines changed

.github/workflows/node.js.yml

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,24 @@ on:
1010
branches: [ master ]
1111

1212
jobs:
13-
build:
14-
13+
test_main_code:
1514
runs-on: macos-latest
15+
strategy:
16+
matrix:
17+
node-version: [15.x]
18+
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
19+
steps:
20+
- name: Checkout
21+
uses: actions/checkout@v2
22+
- name: Use Node.js ${{ matrix.node-version }}
23+
uses: actions/setup-node@v2
24+
with:
25+
node-version: ${{ matrix.node-version }}
26+
- run: npm install
27+
- run: npm test
1628

29+
test_android:
30+
runs-on: macos-11
1731
strategy:
1832
matrix:
1933
node-version: [15.x]
@@ -30,12 +44,6 @@ jobs:
3044
- name: Test Integration - Install dependencies
3145
working-directory: ./MixpanelDemo
3246
run: yarn install
33-
- name: Setup iOS
34-
working-directory: ./MixpanelDemo/ios
35-
run: pod install
36-
- name: Test iOS
37-
working-directory: ./MixpanelDemo
38-
run: yarn ios
3947
- name: Setup Android
4048
uses: reactivecircus/android-emulator-runner@v2
4149
with:
@@ -44,4 +52,29 @@ jobs:
4452
script: ./gradlew connectedCheck
4553
- name: Test Android
4654
working-directory: ./MixpanelDemo
47-
run: yarn android
55+
run: yarn android
56+
57+
test_ios:
58+
runs-on: macos-latest
59+
strategy:
60+
matrix:
61+
node-version: [15.x]
62+
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
63+
steps:
64+
- name: Checkout
65+
uses: actions/checkout@v2
66+
- name: Use Node.js ${{ matrix.node-version }}
67+
uses: actions/setup-node@v2
68+
with:
69+
node-version: ${{ matrix.node-version }}
70+
- run: npm install
71+
- name: Test Integration - Install dependencies
72+
working-directory: ./MixpanelDemo
73+
run: yarn install
74+
- name: Setup iOS
75+
working-directory: ./MixpanelDemo/ios
76+
run: pod install
77+
- name: Test iOS
78+
working-directory: ./MixpanelDemo
79+
run: yarn ios
80+

README.md

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
12
<div align="center" style="text-align: center">
23
<img src="https://github.com/mixpanel/mixpanel-android/blob/assets/mixpanel.png?raw=true" alt="Mixpanel React Native Library" height="150"/>
34
</div>
45

56
#####
6-
# Table of Contents
7+
## Table of Contents
78

89
<!-- MarkdownTOC -->
910
- [Introduction](#introduction)
@@ -15,30 +16,30 @@
1516
<!-- /MarkdownTOC -->
1617

1718

18-
# Introduction
19+
## Introduction
1920
Welcome to the official Mixpanel React Native library.
2021
The Mixpanel React Native library is an open-source project, and we'd love to see your contributions!
2122
We'd also love for you to come and work with us! Check out **[Jobs](https://mixpanel.com/jobs/#openings)** for details
2223

23-
# Quick Start Guide
24+
## Quick Start Guide
2425

2526
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.
2627

2728
<a name="installation"></a>
28-
## Installation
29-
### Prerequisite
29+
### 1. Install Mixpanel
30+
#### Prerequisites
3031
- React Native v0.6+
3132
- [Setup development environment for React Native](https://reactnative.dev/docs/environment-setup)
32-
### Steps
33+
#### Steps
3334
1. Under your app's root directory, install Mixpanel React Native SDK
3435
```npm install mixpanel-react-native```
3536
2. Under your application's ios folder, run
3637
```pod install```
37-
At this point, you are ready to use Mixpanel React Native SDK.
38-
Note: If you experience compile issues in iOS under Xcode 12.5+ and iOS 14.5+, please refer to this **[workaround](https://github.com/mixpanel/mixpanel-react-native/issues/43#issuecomment-829599732)**.
38+
Please note: You do not need to update your Podfile to add Mixpanel.
39+
3. For Xcode 12.5+, there is a known compile issue, please refer to this **[workaround](https://github.com/mixpanel/mixpanel-react-native/issues/43#issuecomment-829599732)**.
40+
3941

40-
## Integration
41-
### Initialization
42+
### 2. Initialize Mixpanel
4243
To start tracking with the library you must first initialize with your project token. To initialize the library, first add `import { Mixpanel }` and call `Mixpanel.init(token)` with your project token as it's argument.
4344
```js
4445
import { Mixpanel } from 'mixpanel-react-native';
@@ -55,19 +56,50 @@ class YourClass extends React.Component {
5556
...
5657
```
5758
Once you've called this method once, you can access `mixpanel` throughout the rest of your application.
58-
### Tracking
59-
Once you've initialized the library, Mixpanel will <a href="https://mixpanel.com/help/questions/articles/which-common-mobile-events-can-mixpanel-collect-on-my-behalf-automatically" target="_blank">automatically collect common mobile events</a>. You can enable/ disable automatic collection through your <a href="https://mixpanel.com/help/questions/articles/how-do-i-enable-common-mobile-events-if-i-have-already-implemented-mixpanel" target="_blank">project settings</a>.
60-
With the `mixpanel` object created in [the last step](#integration) a call to `track` is all you need to send additional events to Mixpanel.
59+
### 3. Send Data
60+
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 collect common mobile events](https://mixpanel.com/help/questions/articles/which-common-mobile-events-can-mixpanel-collect-on-my-behalf-automatically). You can enable/disable automatic collection through your project settings. Also, Mixpanel automatically tracks some properties by default; [learn more](https://help.mixpanel.com/hc/en-us/articles/115004613766-Default-Properties-Collected-by-Mixpanel).
6161
```js
6262
// Track with event-name
6363
mixpanel.track('Sent Message');
6464
// Track with event-name and property
6565
mixpanel.track('Plan Selected', {'Plan': 'Premium'});
6666
```
67-
You're done! You've successfully integrated the Mixpanel React Native SDK into your app. To stay up to speed on important SDK releases and updates, star or watch our repository on [Github](https://github.com/mixpanel/mixpanel-react-native).
68-
67+
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.
68+
### 4. Check for Success
69+
[Open up Live View in Mixpanel](http://mixpanel.com/report/live) to view incoming events.
70+
Once data hits our API, it generally takes ~60 seconds for it to be processed, stored, and queryable in your project.
6971
<a name="i-want-to-know-more"></a>
70-
# I want to know more!
72+
73+
## FAQ
74+
**I want to stop tracking an event/event property in Mixpanel. Is that possible?**
75+
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).
76+
77+
**I have a test user I would like to opt out of tracking. How do I do that?**
78+
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).
79+
80+
**Why aren't my events showing up?**
81+
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.
82+
83+
```
84+
mixpanel.flush();
85+
86+
```
87+
88+
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-swift/Classes/MixpanelInstance.html#/s:8Mixpanel0A8InstanceC14loggingEnabledSbvp) to true, then run your iOS project with Xcode or android project with Android Studio. The logs should be available in the console.
89+
90+
```
91+
mixpanel.setLoggingEnabled(true);
92+
93+
```
94+
95+
**Starting with iOS 14.5, do I need to request the user’s permission through the AppTrackingTransparency framework to use Mixpanel?**
96+
No, Mixpanel does not use IDFA so it does not require user permission through the AppTrackingTransparency(ATT) framework.
97+
98+
**If I use Mixpanel, how do I answer app privacy questions for the App Store?**
99+
Please refer to our [Apple App Developer Privacy Guidance](https://mixpanel.com/legal/app-store-privacy-details/)
100+
101+
102+
## I want to know more!
71103
72104
No worries, here are some links that you will find useful:
73105
* **[Sample app](https://github.com/mixpanel/mixpanel-react-native/tree/master/MixpanelDemo)**

0 commit comments

Comments
 (0)