APXOR React Native API Guide
APIs
Add the following import statement in every component where you use Apxor APIs
import RNApxorSDK from "react-native-apxor-sdk";
UserId
Sets a unique user identifier. You can set it when user logged into application and reset it when users logged out
// Syntax
RNApxorSDK.setUserIdentifier("STRING");
// Example
RNApxorSDK.setUserIdentifier("<unique_user_id>");
To track events
// Syntax
RNApxorSDK.logAppEvent(event_name, properties);
// Example
RNApxorSDK.logAppEvent("ADD_TO_CART", {
userId: "johnwick@example.com",
value: 1299,
item: "Sony Head Phone 1201",
});
To track client events
// Syntax
RNApxorSDK.logClientEvent(event_name, properties);
// Example
RNApxorSDK.logClientEvent("ADD_TO_CART", {
userId: "johnwick@example.com",
value: 1299,
item: "Sony Head Phone 1201",
});
User Properties
Set unique user properties only when you need to add or update them. All the properties whose value is null
or undefined
will be ignored
// Syntax
RNApxorSDK.setUserCustomInfo(properties);
// Example
RNApxorSDK.setUserCustomInfo({
Age: 10,
Name: "John Wick",
});
Handle custom redirection using Key-Value pairs
If your app wants to redirect users based on simple key-value pairs instead using Deeplink URLs or Activity, you can follow below approach
import android.app.Application;
import com.apxor.androidsdk.core.ApxorSDK;
import com.apxor.androidsdk.core.RedirectionListener;
import org.json.JSONArray;
public class MyApplication extends Application {
@Override
public void onCreate() {
// Register a redirection listener ONLY ONCE in your app
// If you register in multiple places, ONLY the last value will be available.
// Whenever you register a new one, it will override the existing listener
Apxor.setRedirectionListener(new RedirectionListener() {
@Override
public void onActionComplete(JSONArray keyValuePairs) {
int length = keyValuePairs.length();
/**
* [
* {
* "name": "YourKey",
* "value": "YourValue"
* },
* ....
* ]
*/
try {
for (int i = 0; i < length; i++) {
JSONObject pair = keyValuePairs.getJSONObject(i);
String key = pair.getString("name");
// Values are always String type. You need to convert based on your need
String value = pair.getString("value");
// Your logic continues from here
}
} catch (JSONException e) {
}
}
});
}
}
Track Navigation
@react-navigation
, Apxor SDK automatically tracks screen navigation if you follow below mentioned steps
If you are already using Apxor's ApxNavigationContainer
is just a wrapper over NavigationContainer
which internally handles the route navigations (nested route navigations too) and take necessary actions within RNApxorSDK
To automatically track navigations, use ApxNavigationContainer
and pass the same props you pass to NavigationContainer
like below
Note
If you don't use
ApxNavigationContainer
and didn't log navigation events, walkthroughs might not work as expected.
import { ApxNavigationContainer } from "react-native-apxor-sdk";
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator();
function App() {
return (
<ApxNavigationContainer
theme={yourTheme}
linking={yourLinkingOptions}
fallback={yourFallbackNode}
{...others}
>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name={"Home"} component={Home} />
<Stack.Screen name="Details" component={DetailsScreen} />
<Stack.Screen name="FlatList" component={FlatListSample} />
</Stack.Navigator>
</ApxNavigationContainer>
);
}
Otherwise use the following API to track navigations
// Syntax
RNApxorSDK.logNavigationEvent(screen_name);
// Example
RNApxorSDK.logNavigationEvent("LoginScreen");
Handle Deeplinks
Follow the instructions given in here to enable deeplinks in your application.
Whenever Apxor React Native SDK sends the deeplink URL to the app, the following callback will be executed and you have to interpret the URL and navigate the user to the necessary page or tab.
Add the following code snippet in your root component to handle deeplink URLs
import { Linking } from "react-native";
function YourRootComponent(props) {
// Use `componentDidMount` for Class components
useEffect(() => {
Linking.addEventListener("url", (event) => {
const { url } = event;
// Your custom function which interprets the URL
// and redirect users to the necessary page or tab
handleDeeplinkURL(url);
});
}, []);
}