mixpanel-react-native
Version:
Official React Native Tracking Library for Mixpanel Analytics
341 lines (298 loc) • 8.72 kB
JavaScript
import React from "react";
import {
SectionList,
Text,
View,
Button,
StyleSheet,
SafeAreaView,
} from "react-native";
import { Mixpanel } from "mixpanel-react-native";
const App = () => {
const trackAutomaticEvents = false;
const useNative = false;
const mixpanel = new Mixpanel(
"YOUR_MIXPANEL_TOKEN",
trackAutomaticEvents,
useNative
);
mixpanel.init();
mixpanel.setLoggingEnabled(true);
const group = mixpanel.getGroup("company_id", 111);
const track = async () => {
await mixpanel.track("Track Event!");
};
const identify = async () => {
await mixpanel.identify("testDistinctId");
};
const timeEvent = () => {
const eventName = "Timed Event";
mixpanel.timeEvent(eventName);
setTimeout(async () => {
await mixpanel.track(eventName);
}, 2000);
};
const createAlias = async () => {
const distinctId = await mixpanel.getDistinctId();
alert(distinctId);
await mixpanel.alias("New Alias", distinctId);
};
const trackWProperties = async () => {
const properties = { "Cool Property": "Property Value" };
await mixpanel.track("Track event with property", properties);
};
/**
registerSuperProperties will store a new superProperty and possibly overwriting any existing superProperty with the same name.
*/
const registerSuperProperties = () => {
mixpanel.registerSuperProperties({
"super property": "super property value",
"super property1": "super property value1",
});
};
/**
Erase all currently registered superProperties.
*/
const clearSuperProperties = () => {
mixpanel.clearSuperProperties();
};
const unregisterSuperProperty = () => {
mixpanel.unregisterSuperProperty("super property");
};
/**
Returns a json object of the user's current super properties.
*/
const getSuperProperties = () => {
mixpanel.getSuperProperties().then((t) => {
alert(JSON.stringify(t));
});
};
const registerSuperPropertiesOnce = () => {
mixpanel.registerSuperPropertiesOnce({
"super property": "super property value1",
});
};
const flush = () => {
mixpanel.flush();
};
const optIn = () => {
mixpanel.optInTracking(mixpanel.getDistinctId());
};
const optOut = () => {
mixpanel.optOutTracking();
};
const reset = () => {
mixpanel.reset();
};
const setProperty = () => {
mixpanel.getPeople().set({
a: 1,
b: 2.3,
c: ["4", 5],
});
};
const setOneProperty = () => {
mixpanel.getPeople().set("d", "yo");
};
const setOnePropertyOnce = () => {
mixpanel.getPeople().setOnce("c", "just once");
};
const unsetProperties = () => {
mixpanel.getPeople().unset("a");
};
const incrementProperty = () => {
mixpanel.getPeople().increment("a", 2.2);
};
const removePropertyValue = () => {
mixpanel.getPeople().remove("c", 5);
};
const appendProperties = () => {
mixpanel.getPeople().append("a", "Hello");
};
const unionProperties = () => {
mixpanel.getPeople().union("a", ["goodbye", "hi"]);
};
const trackChargeWithoutProperties = () => {
mixpanel.getPeople().trackCharge(22.8);
};
const trackCharge = () => {
mixpanel.getPeople().trackCharge(12.8, { sandwich: 1 });
};
const clearCharges = () => {
mixpanel.getPeople().clearCharges();
};
const deleteUser = () => {
mixpanel.getPeople().deleteUser();
};
// ----------------- Group API -----------------
const addGroup = () => {
mixpanel.addGroup("company_id", 111);
};
const deleteGroup = () => {
mixpanel.deleteGroup("company_id", 111);
};
const setGroup = () => {
mixpanel.setGroup("company_id", 3233);
};
const removeGroup = () => {
mixpanel.removeGroup("company_id", 3233);
};
const setGroupProperty = () => {
group.set("prop_key", "prop_value1");
group.set("prop_key1", ["prop_value11", "prop_value12"]);
};
const setGroupPropertyOnce = () => {
group.setOnce("prop_key", "prop_value222");
};
const unsetGroupProperty = () => {
group.unset("aaa");
};
const removeGroupProperty = () => {
group.remove("prop_key1", "prop_value11");
};
const unionGroupProperty = () => {
group.union("prop_key", ["prop_value_a", "prop_value_b"]);
};
const trackWithGroups = () => {
mixpanel.trackWithGroups(
"tracked with groups",
{ a: 1, b: 2.3 },
{ company_id: 111 }
);
};
const DATA = [
{
title: "Events and Properties",
data: [
{ id: "1", label: "Track Event", onPress: track },
{ id: "2", label: "Identify", onPress: identify },
{ id: "3", label: "Time Event for 2 secs", onPress: timeEvent },
{
id: "4",
label: "Track Event with Properties",
onPress: trackWProperties,
},
{
id: "5",
label: "Register Super Properties",
onPress: registerSuperProperties,
},
{
id: "6",
label: "Clear Super Properties",
onPress: clearSuperProperties,
},
{
id: "7",
label: "Unregister Super Property",
onPress: unregisterSuperProperty,
},
{
id: "8",
label: "Get Super Properties",
onPress: getSuperProperties,
},
{
id: "9",
label: "Register Super Properties Once",
onPress: registerSuperPropertiesOnce,
},
{ id: "10", label: "Create Alias", onPress: createAlias },
{ id: "11", label: "Flush", onPress: flush },
],
},
{
title: "GDPR",
data: [
{ id: "1", label: "Opt In", onPress: optIn },
{ id: "2", label: "Opt Out", onPress: optOut },
],
},
{
title: "Profile",
data: [
{ id: "2", label: "Set Property", onPress: setProperty },
{ id: "3", label: "Set One Property", onPress: setOneProperty },
{
id: "4",
label: "Set One Property Once",
onPress: setOnePropertyOnce,
},
{ id: "5", label: "Unset Properties", onPress: unsetProperties },
{ id: "6", label: "Increment Property", onPress: incrementProperty },
{
id: "7",
label: "Remove Property Value",
onPress: removePropertyValue,
},
{ id: "8", label: "Append Properties", onPress: appendProperties },
{ id: "9", label: "Union Properties", onPress: unionProperties },
{
id: "10",
label: "Track Charge",
onPress: trackChargeWithoutProperties,
},
{
id: "11",
label: "Track Charge with Properties",
onPress: trackCharge,
},
{ id: "12", label: "Clear Charges", onPress: clearCharges },
{ id: "1", label: "Reset", onPress: reset },
{ id: "13", label: "Delete User", onPress: deleteUser },
{ id: "14", label: "Flush", onPress: flush },
],
},
{
title: "Group",
data: [
{ id: "1", label: "Add Group", onPress: addGroup },
{ id: "2", label: "Set Group", onPress: setGroup },
{ id: "3", label: "Remove Group", onPress: removeGroup },
{ id: "4", label: "Delete Group", onPress: deleteGroup },
{ id: "5", label: "Track With Groups", onPress: trackWithGroups },
{ id: "6", label: "Set Group Property", onPress: setGroupProperty },
{ id: "7", label: "Set Property Once", onPress: setGroupPropertyOnce },
{ id: "8", label: "Unset Property", onPress: unsetGroupProperty },
{ id: "9", label: "Remove Property", onPress: removeGroupProperty },
{ id: "10", label: "Union Property", onPress: unionGroupProperty },
{ id: "11", label: "Flush", onPress: flush },
],
},
];
const renderItem = ({ item }) => (
<View style={styles.item}>
<Button title={item.label} onPress={item.onPress} color="#8A2BE2" />
</View>
);
const renderSectionHeader = ({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
);
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item.id}
renderItem={renderItem}
renderSectionHeader={renderSectionHeader}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
fontSize: 20,
backgroundColor: "#f4f4f4",
padding: 10,
},
item: {
backgroundColor: "#ffffff",
padding: 10,
borderBottomWidth: 1,
borderBottomColor: "#eeeeee",
},
});
export default App;