React Native Analytics with Vexo | Custom Dashboard Tutorial | Code with Beto

Learn how to integrate Vexo Analytics into a React Native app and create custom events to track user interactions. It focuses on building custom widgets and dashboards that help you understand your users better and make data-driven decisions.

If you already know the basics of Vexo Analytics, this tutorial dives deeper into new features like filtering custom events and visualizing them in dashboards. It’s perfect for React Native developers who want to go beyond default analytics and tailor insights to their app’s needs.

What's inside

Introduction to Vexo Analytics and its benefits for React Native
Setting up Vexo Analytics in a React Native app
Creating custom events to track user actions
Assigning attributes to custom events for richer data
Testing custom events with real user data
Exploring the Vexo dashboard and custom widgets
Filtering and visualizing custom events in dashboards
Practical examples using a sample app "Only Chats"

Introduction to Vexo Analytics and its benefits for React Native

Vexo Analytics is a tool designed specifically for React Native apps to provide detailed analytics and insights. Unlike traditional analytics integrations that can be complex and painful, Vexo offers an easy setup and powerful features tailored for React Native developers.

I emphasize how analytics can save time and increase revenue by helping you understand user behavior. Vexo’s revamped UI offers metrics like active users, session time, and downloads, but its real power lies in custom events and dashboards that adapt to your app’s unique needs.

Setting up Vexo Analytics in a React Native app

To get started, you create a free Vexo account and obtain an API key. Installing the Vexo library works with both Expo and React Native CLI projects. The key is added to your app’s entry point (e.g., index.js) via environment variables to keep it secure.

I show the package.json with Vexo installed and explains how to configure environment variables in Expo SDK 49 and above. This setup ensures your analytics data is sent securely without exposing keys in your repository.

Creating custom events to track user actions

Custom events let you track specific user actions beyond default metrics. I demonstrate creating a "sign up" event that fires when a user registers for the first time, using Vexo’s API.

You import from the Vexo library and call it at the moment you want to track, passing an event name and payload. This flexibility allows you to capture meaningful interactions like post likes, sign ups, or purchases.

Assigning attributes to custom events for richer data

Each custom event can include attributes to provide context. For example, when tracking likes, you can send the user’s first name, email, platform, and number of likes as properties in the event payload.

These attributes can be strings, booleans, or numbers, and you can extend them anytime. This detailed data helps you analyze not just the event count but who performed the action and under what conditions.

Testing custom events with real user data

I use a sample app called "Only Chats" running on iOS and Android simulators to test custom events. When users like posts, the app sends custom "likes" events with relevant data to Vexo.

You can see real-time data flowing into the Vexo dashboard, including user emails and platforms. Testing on multiple devices and accounts confirms the analytics setup is working correctly and capturing meaningful user behavior.

Exploring the Vexo dashboard and custom widgets

Vexo’s dashboard shows default metrics like active users and session time, but you can also create custom widgets based on your custom events. I show how to delete existing widgets and add new ones tailored to your data.

These widgets visualize event counts and attributes, making it easier to understand trends and user engagement. The dashboard supports filtering and grouping to slice data by platform, email, or other attributes.

Filtering and visualizing custom events in dashboards

A key new feature is filtering custom events in dashboards. For example, you can create a widget showing only likes from iOS users by applying a filter on the platform attribute.

Filters support operations like "contains" or "not contains," allowing precise queries. This helps you break down analytics by segments and make smarter decisions based on user behavior patterns.

Practical examples using a sample app "Only Chats"

The video’s demos use the "Only Chats" app, a React Native project from Beto’s course. It shows how to integrate Vexo, send custom events on user sign up and post likes, and then visualize this data in the dashboard.

By tracking likes with user details and filtering by platform, you gain insights into which users engage most and how your app performs across devices. This practical example highlights how to leverage Vexo for real-world analytics needs.

Resources

CourseReact Native course

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

Premium resourcePro Membership

Get access to exclusive tutorials and advanced React Native content.

Let's connect!