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

If you are already using @react-navigation, Apxor SDK automatically tracks screen navigation if you follow below mentioned steps

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);
    });
  }, []);
}