Mixpanel for Vega Guide

Vega Open Beta Knowledge Base
1

Mixpanel is an analytics tool that enables you to capture data on how users interact with your digital product. Mixpanel then lets you analyze this data with simple, interactive reports that let you query and visualize the data with just a few clicks.

The Mixpanel React Native SDK is now fully supported in Vega. This guide will walk you through the installation and setup process.

Prerequisites

The Mixpanel React Native SDK requires AsyncStorage for data persistence. Vega supports the react-native-async-storage library, which is the recommended approach for all Vega apps.

Installation

To install Mixpanel, under your app’s root directory:


npm install mixpanel-react-native

Add the following dependencies to your package.json:


"dependencies": {

"mixpanel-react-native": "^3.2.2",

"@amazon-devices/react-native-async-storage__async-storage": "~2.0.2+1.23.1",

"@react-native-async-storage/async-storage": "1.23.1"

}

Then run:


npm install

Initialize Mixpanel

To initialize Mixpanel in your code:


import { Mixpanel } from 'mixpanel-react-native';

import AsyncStorage from '@react-native-async-storage/async-storage';

const trackAutomaticEvents = false; // Not supported in JavaScript Mode

const useNative = false; // Must be false for Vega (TV platform)

const mixpanel = new Mixpanel('YOUR_MIXPANEL_TOKEN', trackAutomaticEvents, useNative, AsyncStorage);

await mixpanel.init();

Track Events

To send data:


// Track with event name only

mixpanel.track('Sent Message');

// Track with event name and properties

mixpanel.track('Plan Selected', {'Plan': 'Premium'});

// For critical events, flush immediately

mixpanel.track('Purchase Completed', {'amount': 99.99});

mixpanel.flush();

JavaScript Mode for Vega

Since Vega is a TV platform and doesn’t support native iOS/Android directly, Mixpanel runs in JavaScript Mode. This means:

  • The useNative parameter must be set to false

  • The trackAutomaticEvents parameter should be set to false (automatic events are not supported in JavaScript mode)

  • Data does not automatically flush when the app backgrounds - call mixpanel.flush() more frequently for critical events

  • JavaScript Mode does not have the same default properties as Native Mode

Known Limitations

  1. Automatic Events: Not supported. Setting trackAutomaticEvents to true will have no effect because Vega uses JavaScript Mode.

  2. Default Properties: JavaScript Mode does not include the same default event properties as Native Mode. Some device-specific properties that are automatically collected in native iOS/Android apps may not be available.

  3. Background Flushing: The default flush interval is 10 seconds, but data will not flush automatically when the app moves to the background. For critical events, call mixpanel.flush() manually.

Accessing Device Information

While JavaScript Mode has limited default properties, you can manually collect device information using Vega’s supported libraries:

  • Device Info: Use react-native-device-info to access device name, OS version, app version, and more

  • Display Info: Use Vega Graphics API to query screen resolution, refresh rate, HDR support, and color depth

You can add this information as custom properties when tracking events or as user profile properties.

Example: Tracking Events with Device Properties

The following is an example of how you can use Mixpanel to track events with device properties.

First, add the required dependencies to your package.json:

"dependencies": {
  "@amazon-devices/react-native-device-info": "~2.0.0",
  "@amazon-devices/kepler-graphics": "~2.0.0"
}

Then collect and send device information with your events:

import { Mixpanel } from 'mixpanel-react-native';
import DeviceInfo from '@amazon-devices/react-native-device-info';
import { DisplayManager } from '@amazon-devices/kepler-graphics';

// Initialize Mixpanel (as shown above)
const mixpanel = new Mixpanel('YOUR_MIXPANEL_TOKEN', false, false, AsyncStorage);
await mixpanel.init();

// Collect device information
const getDeviceProperties = async () => {
  try {
    // Get device info
    const deviceName = await DeviceInfo.getDeviceName();
    const systemVersion = await DeviceInfo.getSystemVersion();
    const appVersion = DeviceInfo.getVersion();
    
    // Get display info
    const display = DisplayManager.getDisplay(0);
    const displayConfig = display.getCurrentConfig();
    
    return {
      device_name: deviceName,
      os_version: systemVersion,
      app_version: appVersion,
      screen_width: displayConfig.width,
      screen_height: displayConfig.height,
      refresh_rate: displayConfig.refreshRate
    };
  } catch (error) {
    console.error('Error collecting device properties:', error);
    return {};
  }
};

// Track events with device properties
const trackEventWithDeviceInfo = async (eventName, customProperties = {}) => {
  const deviceProperties = await getDeviceProperties();
  
  mixpanel.track(eventName, {
    ...deviceProperties,
    ...customProperties
  });
};

// Usage examples
await trackEventWithDeviceInfo('App Launched');

await trackEventWithDeviceInfo('Video Played', {
  video_id: '12345',
  video_title: 'Sample Video'
});

await trackEventWithDeviceInfo('Purchase Completed', {
  amount: 99.99,
  plan: 'Premium'
});

You can also set device properties as super properties so they’re automatically included with every event:

const deviceProperties = await getDeviceProperties();
mixpanel.registerSuperProperties(deviceProperties);

// Now all events will include device properties automatically
mixpanel.track('Button Clicked');
mixpanel.track('Screen Viewed');

Additional Resources

Support

For Mixpanel support, contact support@mixpanel.com or visit the Mixpanel Help Center:

Last updated: Feb 11, 2026

Vega Supported Libraries and Services