React Native Integration

Vexo is the first React Native out of the box tool for analytics. We provide a solution for precise and actionable data with a seamless integration and zero-configuration, zero-coding support.

Our documentation is a great place to find most answers and make sure that your experience using Vexo is a magical one.

Quickstart

Prerequisites

• Using React Navigation or Expo Router

Expo

• ✅ You can use this library with Development Builds. No config plugin is required.
• ❌ This library can't be used in the "Expo Go" app because it requires custom native code.

Getting started

1. Create an account here
2. You'll be prompted into creating a new app, give it a cool name (you will be able to change that later) and once you submit it, you'll be given an API key.
3. Run yarn add vexo-analytics or npm install vexo-analytics in your project. If you are using bare React Native, run pod install in the iOS folder.
4. Add the following code to your app entry file (usually index.js, App.js or _layout.tsx if you're using Expo Router):

import { vexo } from 'vexo-analytics';

// You may want to wrap this with `if (!__DEV__) { ... }` to only run Vexo in production.
vexo('YOUR_API_KEY');

5. Re-build and run your app (the vexo-analytics package includes native code).
6. Go to your app's page on Vexo and you should see your first event!

Wait, that's it? Yes! That's it. With that ease of integration experience you get an incredible set of features, go check them out!

How it works

One line of code? How is this possible?

It's very simple! Vexo is a very lightweight advanced piece of technology that listens to React Native events, such as AppState changes, packs the data into a buffer and sends it to our servers. Given that it works in background with your app, there are no code dependencies and it's effortless to integrate!

Events

Supported events are:

• Opened/closed/browsing app
• Changed screen
• Tapped on screen
• Started/finished typing
• Turned phone to landscape/portrait
• Your app sent a request for data
• An error occurred
• Custom events

Device Identity

As well as being seamless, privacy is a key focus. We don't store any PII from your devices or users, so we provide a way in which you can identify a user in order to be able to navigate through your dashboards in a personalized way. To achieve this, do the following:

import { useEffect } from 'react'
import { View } from 'react-native'
import { identifyDevice } from 'vexo-analytics'

const LoginComponent = () => {
    const login = async () => {
        // your code
        await identifyDevice('IDENTIFIER');
    }
    return (<View>{...}</View>);
};

It's important to note that the identifier is a string and can be anything you want. We recommend that you identify your device with a token/hash that you can then map it into your users' data to be able to know which user is it. As an example, in SQL a unique ID as a foreign key to your users' table should suffice.

In case you want to make the device anonymous, identifyDevice supports null like in the following example:

import { useEffect } from 'react'
import { View } from 'react-native'
import { identifyDevice } from 'vexo-analytics'

const TrackerComponent = () => {
    const onAskedNotToTrack = async () => {
        // your code
        await identifyDevice(null);
    }
    return (<View>{...}</View>);
};

Tracking Opt-in

Today users are more and more the owners of their data, and we want to go down that road for real. There's opt-in methods you can call based on your users' preferences to enable or disable tracking.

import { enableTracking, disableTracking } from 'vexo-analytics'

// user asked app not to track
await disableTracking();
// re-enable tracking, under X condition
await enableTracking();

Custom events

This is where the power of out of the box analytics meets the custom needs of your business. You'll be able to send custom events specific to you application's needs, and that data will be enriched with the context data that we provide:

import { View } from 'react-native'
import { customEvent } from 'vexo-analytics'

const SaaSPurchaseComponent = () => {
    const onSuccessfulPurchase = (subscriptionType, amount, description) => {
        customEvent(`sale-${subscriptionType}`, { amount, description })
    }
    return (<View>{...}</View>)
}

We will understand the context about the event that has just happened and infer multiple axis of data, such as:

• Screen it happened on
• Device OS
• App version
• ... and more!

For further understanding on custom events check out the docs