# React Native

### APIs

Add the following import statement in every component where you use Apxor APIs

```java
import RNApxorSDK from "react-native-apxor-sdk";
```

### Identifying Users <a href="#userid" id="userid"></a>

The Apxor SDK automatically captures device IDs and this is used to identify users uniquely by Apxor. Apart from this, you can log a custom user identifier that you use to uniquely identify users in your app.

This identifier would be very instrumental especially when exporting data of a certain campaign or survey to your analytics system to create a cohort and measure the results of the campaign.

Similarly, when you are importing data to Apxor from your system that your marketing/product / data science team has identified and wants to run campaigns specifically to them the `custom user identifier` will serve as the bridge to communicate between your systems and Apxor effectively.

Here is how you can set your user identifier for Apxor to recognize your users :

```javascript
// Syntax
RNApxorSDK.setUserIdentifier("STRING");

// Example
RNApxorSDK.setUserIdentifier("<unique_user_id>");
```

### Setting up campaign triggers, capturing data for targeting and goal tracking[​](http://localhost:3000/docs/android-sdk/Tracking#setting-up-campaign-triggerscapturing-data-for-targetting-and-goal-tracking) <a href="#setting-up-campaign-triggerscapturing-data-for-targetting-and-goal-tracking" id="setting-up-campaign-triggerscapturing-data-for-targetting-and-goal-tracking"></a>

The product/marketing or the growth team lists out the use cases with an idea of when to launch and to whom to launch. To do this we need to capture data in the form of events. Let us consider the following use case as an example :

<figure><img src="/files/cjD16dAViQgcMYKKhg53" alt=""><figcaption></figcaption></figure>

### **App Events**[**​**](http://localhost:3000/docs/android-sdk/Tracking#app-events)

In the above scenario, we want to trigger the campaign for users who have spent 'x' seconds and haven't tapped on a product. To understand that if the user has tapped the product we should log an event along with its attributes as follows to capture data:

<figure><img src="/files/pwqGbcAFBkZQWXuNvL64" alt=""><figcaption></figcaption></figure>

Similarly if you want to send promotions to users who have viewed at least five products of the category shoes in the last three days or you want to measure how many people added an item to a cart from the campaign as a goal all this information is captured in the form of events.

These types of events are classified as `app events` - the data that is transferred to the servers at Apxor where you can segment users based on historic behaviour or measure your goals as specified above.

Here is how we track app events :

```javascript
// Syntax
RNApxorSDK.logAppEvent(event_name, properties);

// Example
RNApxorSDK.logAppEvent("ADD_TO_CART", {
  userId: "johnwick@example.com",
  value: 1299,
  item: "Sony Head Phone 1201",
});
```

### User Attributes <a href="#user-attributes" id="user-attributes"></a>

#### Personalizing and targetting by user persona[​](http://localhost:3000/docs/android-sdk/Tracking#personalising-and-targetting-by-user-persona) <a href="#personalising-and-targetting-by-user-persona" id="personalising-and-targetting-by-user-persona"></a>

We can personalize the messaging copy in the experiences we build for the user or target based on his persona using information that is centric to individual users. Let us consider the following example where we know the user is an `English` with `Gold` membership.

This information helps to tailor content in English to that specific user and gives us the flexibility to different messaging to different membership tiers. This is how the information captured here is used for segmenting.

Similarly capturing attributes like `Name` can help to personalize your message copy where it reads **Hi {username} can't find your product?** where the username is replaced by the attribute value of the property from the nudges dashboard along with providing meaningful defaults in their absence.

<figure><img src="/files/kwd028HZ6jg2J3mAGyFH" alt=""><figcaption></figcaption></figure>

This is how you log user information to Apxor :

```javascript
// Syntax
RNApxorSDK.setUserCustomInfo(properties);

// Example
RNApxorSDK.setUserCustomInfo({
  Age: 10,
  Name: "John Wick",
});
```

### Client Events[**​**](http://localhost:3000/docs/android-sdk/Tracking#client-events) <a href="#client-events" id="client-events"></a>

In the below scenario, let's assume you want to launch a survey when the soft back button is pressed asking the user for product feedback. In this, we don't need to capture the data of how many people pressed the back button which is useless and it bloats your event storage as it is a high-frequency event which increases your cost unnecessarily. This data point doesn't potentially answer any of your product questions and hence there is no ROI in storing data from this event.<br>

So for such scenarios where we need the behavioral data to launch a campaign or to collect feedback, which doesn't provide ROI on storing for measuring goals, answering your product questions or segmenting your target audience, we log these events as `Client Events` which involves zero transfer of data and is used only to set up your triggers on behavioral information from the user.

<figure><img src="/files/aJ3Mv29Z26IODheNEIVE" alt=""><figcaption></figcaption></figure>

```javascript
// Syntax
RNApxorSDK.logClientEvent(event_name, properties);

// Example
RNApxorSDK.logClientEvent("ADD_TO_CART", {
  userId: "johnwick@example.com",
  value: 1299,
  item: "Sony Head Phone 1201",
});
```

### Handle custom redirection using Key-Value pairs <a href="#handle-custom-redirection-using-key-value-pairs" id="handle-custom-redirection-using-key-value-pairs"></a>

If your app wants to redirect users based on simple key-value pairs instead using Deeplink URLs or Activity, you can follow below approach

```java
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 Screen

In the scenario discussed in this guide, how will we know if the user has spent thirty seconds on the home screen and did not click on the product? For this reason, it is important to use track the screens to set them up as triggers and also to capture the time spent on the screens.

<figure><img src="/files/T7Xr6AIf4U1AWAnQruYJ" alt=""><figcaption></figcaption></figure>

By using the following API to track the screens in the app you can setup campaigns on inactivity or time spent on those screens:

```java
RNApxorSDK.trackScreen("HomeScreen");
```

### Track Navigation <a href="#track-navigation" id="track-navigation"></a>

**If you are already using a navigation library like&#x20;**<mark style="background-color:yellow;">**`@react-navigation`**</mark>**,  please follow below mentioned steps for Apxor SDK to automatically track screen navigation**

```typescript
import { useNavigationContainerRef } from "@react-navigation/native"

const navigationRef = useNavigationContainerRef()

return (
  <NavigationContainer
    ref={navigationRef}
    onReady={() => {
      const currentRoute = navigationRef?.current?.getCurrentRoute()
      if (currentRoute) {
        RNApxorSDK.trackScreen(currentRoute.name)
      }
    }}
    onStateChange={() => {
      const currentRoute = navigationRef?.current?.getCurrentRoute()
      if (currentRoute) {
        RNApxorSDK.trackScreen(currentRoute.name)
      }
    }}
  >
   // your screens and navigators
  </NavigationContainer>
)

```

{% hint style="info" %}
**Note**

1. You will need it on both `onReady` and `onStateChange` as the SDK needs to log navigation events on the initial app launch and also on futher navigations between screens.
2. The `NavigationContainer` need **not** be straight from `@react-navigation`. It can be from any 3rd party wrapper around `NavigationContainer` (like BugSnag)
   {% endhint %}

**Otherwise use the following API to track navigations on every screen/route change**

```java
// Syntax
RNApxorSDK.logNavigationEvent(screen_name);

// Example
RNApxorSDK.logNavigationEvent("LoginScreen");
```

#### Handle Deeplinks <a href="#handle-deeplinks" id="handle-deeplinks"></a>

Follow the instructions given in [here](https://reactnative.dev/docs/linking) 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

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

### Yeah! You are ready to create your first [Campaign](/product-guides/create-a-campaign/mobile.md) or [Survey](/product-guides/create-a-survey/legacy.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.apxor.com/getting-started-with-apxor/api-guides/react-native.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.