Analytics Integration

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)
  eventData?: {           // Optional: Contains collected variables
    variables: Record<string, any>  // Variable IDs mapped to their values
  }
}

Variable Structure

When a flow completes, eventData.variables contains an object where:

Key: Variable ID (e.g., var_1758310510757_as20wkeo4)
Value: Object containing:
- id (string): Unique variable identifier
- name (string): Human-readable variable name from the Muta editor
- type (string): Variable type (e.g., “text”)
- value (any): The collected value
- defaultValue (any): The default value

Example:

Muta.on('flow_completed', (event) => {
  if (event.eventData?.variables) {
    Object.entries(event.eventData.variables).forEach(([varId, varData]) => {
      console.log(`Variable '${varData.name}': ${varData.value}`)
    })
  }
})

Output:

Variable 'MultipleChoice1': Family
Variable 'MultipleChoice2': Fluent

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. Custom Events

Emitted when users trigger actions configured with “Emit Event” behavior in the Muta web editor.

{
  type: string,         // Your custom event name (e.g., 'signup_clicked', 'plan_selected')
  timestamp: number,    // Unix timestamp in ms
  placementId: string,  // ID of the placement
  flowName?: string,    // Name of the flow (if configured)
  screenIndex?: number, // Current screen index
  eventData?: any       // Custom data configured in the editor
}

Setting Up Custom Events

In the Muta web editor, add an “Emit Event” behavior to any element
Give your event a unique name (e.g., signup_started, premium_selected)
Optionally add custom data to pass along with the event

Listening for Custom Events

// Listen for specific custom events
Muta.on('signup_started', (event) => {
  console.log('User started signup', event.eventData)
  navigateToSignup()
})

Muta.on('plan_selected', (event) => {
  const { planType, price } = event.eventData
  trackPlanSelection(planType, price)
})

Integration Examples

Mixpanel Example

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

function setupAnalytics() {
  // Track standard events
  Muta.on('flow_completed', (event) => {
    const properties = {
      flow_name: event.flowName,
      total_screens: event.totalScreens,
    }

    // Include collected variables if present
    if (event.eventData?.variables) {
      properties.variables = event.eventData.variables
    }

    mixpanel.track('Onboarding Complete', properties)
  })

  // Track custom events
  Muta.on('form_submitted', (event) => {
    mixpanel.track('Form Submitted', {
      flow_name: event.flowName,
      form_data: event.eventData,
    })
  })

  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

Event Naming: Use consistent event naming conventions across your analytics platform.
Data Enrichment: Add additional context to events when needed (e.g., user ID, app version).
Error Handling: Implement proper error handling for analytics tracking.
Performance: Consider batching events for better performance, especially for high-frequency events.
Privacy: Ensure you’re not tracking sensitive information in your analytics events.

Get Started

SDKs

Tracking All Events

Available Events

1. Flow Started (`flow_started`)

2. Screen Viewed (`screen_viewed`)

3. Flow Completed (`flow_completed`)

Variable Structure

4. Flow Abandoned (`flow_abandoned`)

5. Custom Events

Setting Up Custom Events

Listening for Custom Events

Integration Examples

Mixpanel Example

AppsFlyer Example

Best Practices

​Tracking All Events

​Available Events

​1. Flow Started (flow_started)

​2. Screen Viewed (screen_viewed)

​3. Flow Completed (flow_completed)

​Variable Structure

​4. Flow Abandoned (flow_abandoned)

​5. Custom Events

​Setting Up Custom Events

​Listening for Custom Events

​Integration Examples

​Mixpanel Example

​AppsFlyer Example

​Best Practices

Tracking All Events

Available Events

1. Flow Started (`flow_started`)

2. Screen Viewed (`screen_viewed`)

3. Flow Completed (`flow_completed`)

Variable Structure

4. Flow Abandoned (`flow_abandoned`)

5. Custom Events

Setting Up Custom Events

Listening for Custom Events

Integration Examples

Mixpanel Example

AppsFlyer Example

Best Practices