React Native Analytics with Vexo | Simply Amazing

Learn how to integrate Vexo, a modern analytics tool designed for React Native, into your apps using both Expo and the React Native CLI. Vexo offers real-time user insights, including heatmaps, device info, and custom event tracking, all with a great developer experience.

If you want to improve your app decisions with detailed analytics and heatmaps without slowing down your app, this video is for you. You'll learn setup, configuration, and how to send custom events to the Vexo dashboard.

What's inside

• Introduction to Vexo analytics and its React Native focus
• Exploring the Vexo dashboard features and live demo
• Prerequisites: React Navigation and Expo build requirements
• Creating Vexo projects for CLI and Expo apps
• Installing and configuring Vexo in a React Native CLI app
• Real-time user tracking and heatmaps in action
• Sending and viewing custom analytics events
• How Vexo batches events to avoid slowing the app

Introduction to Vexo analytics and its React Native focus

Vexo is a powerful analytics tool built specifically for React Native apps. It supports both Expo and React Native CLI projects, making it flexible for different workflows. I highlight Vexo’s developer-friendly experience and free tier, which includes premium features like heatmaps and real-time analytics.

Vexo helps you make better decisions by providing detailed usage data such as active users, session times, drop-off rates, and device types. It’s designed to integrate seamlessly with React Native apps and offers a modern dashboard to visualize your data.

Exploring the Vexo dashboard features and live demo

The Vexo dashboard provides a rich set of analytics including active users, average session time, new downloads, and drop-off rates. You can switch between different graphs and see user adoption by app version and country.

One standout feature is the heatmap, which visually shows where users tap most on your app screens. This helps improve UX by identifying popular areas or spots that need better placement. The dashboard also offers device insights and a real-time inspector to watch user interactions live.

Prerequisites: React Navigation and Expo build requirements

To use Vexo, your React Native app must use React Navigation for screen tracking. This is a requirement because Vexo hooks into navigation events to collect data.

For Expo users, you need to build your app with Expo’s build service to enable Vexo analytics fully. This ensures the native dependencies are properly linked and the analytics run smoothly.

Creating Vexo projects for CLI and Expo apps

You start by creating separate projects on the Vexo dashboard for your CLI and Expo apps. Each project gives you an API key (or ID) that you will use to configure the analytics in your app.

I show creating two projects named "CLI" and "Expo" to demonstrate integration with both environments. This separation helps manage analytics data per app type.

Installing and configuring Vexo in a React Native CLI app

For the CLI app, install the vexo-analytics package via npm or yarn. Then, for iOS, run pod install inside the ios folder to link native dependencies.

In your app code, import Vexo Analytics and initialize it with your project’s API key. This setup requires just a couple of lines of code. After reloading the app, you start seeing user data in the Vexo dashboard almost immediately.

Real-time user tracking and heatmaps in action

Once integrated, Vexo tracks active users, screen visits, and device info in real time. The dashboard updates live as you navigate your app.

The real-time inspector lets you see a heatmap of user taps on the current screen. Areas with more taps show in red, less in green. This feature is unique and helps you understand user behavior visually, enabling UX improvements.

Sending and viewing custom analytics events

Vexo supports custom events that you can send from your app to track specific user actions beyond screen visits. I demonstrate how to create and send these events, which then appear in the dashboard with counts and details.

Custom events help you tailor analytics to your app’s unique features and goals, giving you deeper insights into user interactions.

How Vexo batches events to avoid slowing the app

Vexo collects analytics data in the background and batches events before sending them in one network call. This approach minimizes performance impact on your app and avoids slowing down the user experience.

I emphasize that despite the rich data collection, Vexo runs seamlessly without noticeable overhead, making it a great choice for production apps.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.