Muta provides a flexible event system that works with any analytics provider (Mixpanel, AppsFlyer, Amplitude, Firebase, etc.). Events are emitted during key user interactions, allowing you to track and analyze your placement performance.

​
Tracking All Events

Use the wildcard ’*’ to listen to all events:

import { Muta } from '@mutalabs/react-native-muta'

// Example with Mixpanel
function MixpanelTracking() {
  useEffect(() => {
    const subscription = Muta.on('*', (event) => {
      mixpanel.track(event.type, {
        placement_id: event.placementId,
        flow_name: event.flowName,
        timestamp: event.timestamp,
        ...event, // includes all event-specific properties
      })
    })

    return () => subscription.remove()
  }, [])
}

// Example with AppsFlyer
function AppsFlyerTracking() {
  useEffect(() => {
    const subscription = Muta.on('*', (event) => {
      appsflyer.logEvent(event.type, {
        placement_id: event.placementId,
        flow_name: event.flowName,
        ...event,
      })
    })

    return () => subscription.remove()
  }, [])
}

​
Available Events

​
1. Flow Started (flow_started)

Emitted when a placement flow begins displaying.

{
  type: 'flow_started',
  timestamp: number,      // Unix timestamp in ms
  placementId: string,    // ID of the placement
  flowName?: string,      // Name of the flow (if configured)
  totalScreens: number    // Total number of screens in flow
}

​
2. Screen Viewed (screen_viewed)

Emitted when a user views a new screen in the flow.

{
  type: 'screen_viewed',
  timestamp: number,
  placementId: string,
  flowName?: string,
  screenIndex: number,    // Zero-based index of current screen
  totalScreens: number,   // Total number of screens in flow
  screenName?: string     // Name of the screen (if configured)
}

​
3. Flow Completed (flow_completed)

Emitted when a user successfully finishes the flow.

{
  type: 'flow_completed',
  timestamp: number,      // Unix timestamp in ms
  placementId: string,    // ID of the placement
  flowName?: string,      // Name of the flow (if configured)
  screenIndex: number,    // Index of final screen
  totalScreens: number,   // Total screens in flow
  screenName?: string     // Name of final screen (if configured)
}

​
4. Flow Abandoned (flow_abandoned)

Emitted when a user exits the flow before completion.

{
  type: 'flow_abandoned',
  timestamp: number,
  placementId: string,
  flowName?: string,
  screenIndex: number,    // Index of last viewed screen
  totalScreens: number,   // Total screens in flow
  lastScreenIndex: number, // Index of last viewed screen
  screenName?: string     // Name of last viewed screen
}

​
5. User Input Final (user_input_final)

Emitted when user inputs are collected at the end of the flow.

{
  type: 'user_input_final',
  timestamp: number,
  placementId: string,
  flowName?: string,
  userInputs: {
    multipleChoices: {
      screenIndex: number,
      screenName: string,
      isRequired: boolean,
      selections: { choiceText: string, choiceIndex: number }[]
    }[],
    textInputs: {
      screenIndex: number,
      screenName: string,
      value: string,
      placeholder: string,
      isRequired: boolean
    }[]
  }
}

​
Integration Examples

​
Mixpanel Example

import { Muta } from '@mutalabs/react-native-muta'
import mixpanel from 'mixpanel-react-native'

function setupAnalytics() {
  Muta.on('flow_completed', (event) => {
    mixpanel.track('Onboarding Complete', {
      flow_name: event.flowName,
      total_screens: event.totalScreens,
      user_inputs: event.userInputs,
    })
  })

  Muta.on('flow_abandoned', (event) => {
    mixpanel.track('Onboarding Abandoned', {
      flow_name: event.flowName,
      last_screen_index: event.lastScreenIndex,
      total_screens: event.totalScreens,
    })
  })
}

​
AppsFlyer Example

import { Muta } from '@mutalabs/react-native-muta'
import appsFlyer from 'react-native-appsflyer'

function setupAnalytics() {
  Muta.on('*', (event) => {
    const eventName = `onboarding_${event.type}`
    appsFlyer.logEvent(eventName, {
      placement_id: event.placementId,
      flow_name: event.flowName,
      timestamp: new Date(event.timestamp).toISOString(),
      ...event,
    })
  })
}

​
Best Practices

  1. Event Naming: Use consistent event naming conventions across your analytics platform.

  2. Data Enrichment: Add additional context to events when needed (e.g., user ID, app version).

  3. Error Handling: Implement proper error handling for analytics tracking.

  4. Performance: Consider batching events for better performance, especially for high-frequency events.

  5. Privacy: Ensure you’re not tracking sensitive information in your analytics events.