React Native SDK

A powerful analytics library for React Native applications that provides comprehensive user interaction tracking and behavioral analysis through the Moveo One platform.

Current version: 1.0.13

Moveo Analytics React Native Library is designed to capture and analyze user interactions within your React Native application. It provides detailed insights into user behavior, interaction patterns, and application usage through a comprehensive tracking system.

Key Features

Context-based tracking for organizing user sessions
Semantic grouping for logical element organization
Flexible metadata for enhanced analytics
Data processing with configurable flush intervals
Multiple event types and actions for comprehensive interaction capture
Pre-built components for automatic tracking

Prerequisites

React Native project
Node.js and npm installed
Moveo One API key (obtain from Moveo One App)

Installation

Install the package using npm:

npm install moveo-one-analytics-react-native

Library Initialization

Initialize the library in your main App component:

import { MoveoOne } from "moveo-one-analytics-react-native";

// Initialize with your API token
const moveoInstance = MoveoOne.getInstance("YOUR_API_KEY");

Setup

Configure additional parameters as needed:

// Set flush interval (5-60 seconds)
moveoInstance.setFlushInterval(20000); // 20 seconds

// Enable logging for debugging
moveoInstance.setLogging(true);

Metadata and Additional Metadata

The library supports two types of metadata management:

updateSessionMetadata()

Updates current session metadata. Session metadata should split sessions by information that influences content or creates visually different variations of the same application. Sessions split by these parameters will be analyzed separately by our UX analyzer.

Session metadata examples:

"test": "a"
"locale": "eng"
"app_version": "2.1.0"

updateAdditionalMetadata()

Updates additional metadata for the session. This is used as data enrichment and enables specific queries or analysis by the defined split.

Additional metadata examples:

"user_country": "US"
"company": "example_company"
"user_role": "admin" // or "user", "manager", "viewer"
"acquisition_channel": "organic" // or "paid", "referral", "direct"
"device_category": "mobile" // or "desktop", "tablet"
"subscription_plan": "pro" // or "basic", "enterprise"
"has_purchased": "true" // or "false"

Track Data

Understanding start() Calls and Context

Single Session, Single Start

You do not need multiple start() calls for multiple contexts. The start() method is called only once at the beginning of a session and must be called before any track() or tick() calls.

// Start session with context
moveoInstance.start("main_app_flow", {
  test: "a",
  locale: "eng"
});

When to Use Each Tracking Method

Use track() when:

You want to explicitly specify the event context
You need to change context between events
You want to use different context than one specified in start method

import { TYPE, ACTION } from 'moveo-one-analytics-react-native';

moveoInstance.track("checkout_process", {
  semanticGroup: "user_interactions",
  id: "payment_button",
  type: TYPE.BUTTON,
  action: ACTION.CLICK,
  value: "pay_now"
});

Use tick() when:

You're tracking events within the same context
You want tracking without explicitly defining context
You want to track events in same context specified in start method

import { TYPE, ACTION } from 'moveo-one-analytics-react-native';

moveoInstance.tick({
  semanticGroup: "screen_0",
  id: "text_view_1",
  type: TYPE.TEXT,
  action: ACTION.VIEW,
  value: "welcome_message"
});

Context Definition

Context represents large, independent parts of the application and serves to divide the app into functional units that can exist independently of each other
Examples: onboarding, main_app_flow, checkout_process

Semantic Groups

Semantic groups are logical units within a context that group related elements
Depending on the application, this could be a group of elements or an entire screen (most common)
Examples: navigation, user_input, content_interaction

Event Types and Actions

Available Event Types

Type	Description
`button`	Interactive buttons
`text`	Text elements
`textEdit`	Text input fields
`image`	Single images
`images`	Multiple images
`image_scroll_horizontal`	Horizontal image scrolling
`image_scroll_vertical`	Vertical image scrolling
`picker`	Selection pickers
`slider`	Slider controls
`switchControl`	Toggle switches
`progressBar`	Progress indicators
`checkbox`	Checkbox controls
`radioButton`	Radio button controls
`table`	Table views
`collection`	Collection views
`segmentedControl`	Segmented controls
`stepper`	Stepper controls
`datePicker`	Date pickers
`timePicker`	Time pickers
`searchBar`	Search bars
`webView`	Web view components
`scrollView`	Scroll views
`activityIndicator`	Loading indicators
`video`	Video elements
`videoPlayer`	Video players
`audioPlayer`	Audio players
`map`	Map components
`tabBar`	Tab bar components
`tabBarPage`	Tab bar pages
`tabBarPageTitle`	Tab bar page titles
`tabBarPageSubtitle`	Tab bar page subtitles
`toolbar`	Toolbar components
`alert`	Alert dialogs
`alertTitle`	Alert titles
`alertSubtitle`	Alert subtitles
`modal`	Modal dialogs
`toast`	Toast notifications
`badge`	Badge elements
`dropdown`	Dropdown menus
`card`	Card components
`chip`	Chip elements
`grid`	Grid layouts
`custom`	Custom elements

Available Event Actions

Action	Description
`click`	Element clicked
`view`	Element viewed
`appear`	Element appeared
`disappear`	Element disappeared
`swipe`	Swipe gesture
`scroll`	Scroll action
`drag`	Drag action
`drop`	Drop action
`tap`	Tap gesture
`doubleTap`	Double tap gesture
`longPress`	Long press gesture
`pinch`	Pinch gesture
`zoom`	Zoom action
`rotate`	Rotate action
`submit`	Form submission
`select`	Selection action
`deselect`	Deselection action
`hover`	Hover action
`focus`	Focus action
`blur`	Blur action
`input`	Input action
`valueChange`	Value change
`dragStart`	Drag start
`dragEnd`	Drag end
`load`	Load action
`unload`	Unload action
`refresh`	Refresh action
`play`	Play action
`pause`	Pause action
`stop`	Stop action
`seek`	Seek action
`error`	Error action
`success`	Success action
`cancel`	Cancel action
`retry`	Retry action
`share`	Share action
`open`	Open action
`close`	Close action
`expand`	Expand action
`collapse`	Collapse action
`edit`	Edit action
`custom`	Custom action

Comprehensive Example Usage

Here's a complete example showing how to integrate Moveo Analytics in a React Native app:

import React, { useEffect, useState } from 'react';
import { 
  View, 
  Text, 
  TouchableOpacity, 
  StyleSheet, 
  TextInput 
} from 'react-native';
import { 
  MoveoOne, 
  TYPE,
  ACTION 
} from 'moveo-one-analytics-react-native';

// Initialize Moveo once at app entry
const moveoInstance = MoveoOne.getInstance("YOUR_API_KEY");

export default function App() {
  const [inputText, setInputText] = useState("");

  useEffect(() => {
    // Core initialization that should run once
    moveoInstance.setLogging(true);
    moveoInstance.setFlushInterval(20000);
    
    // Start session with context
    moveoInstance.start("main_screen", {
      test: "a",
      locale: "eng"
    });

    // Update additional metadata
    moveoInstance.updateAdditionalMetadata({
      user_country: "US",
      company: "example_company"
    });
  }, []);

  const handleButtonPress = (buttonName) => {
    moveoInstance.track("main_screen", {
      semanticGroup: "user_interactions",
      id: "main_button",
      type: TYPE.BUTTON,
      action: ACTION.CLICK,
      value: "primary_action"
    });
    console.log(`${buttonName} clicked!`);
  };

  const handleInputSubmit = () => {
    moveoInstance.track("main_screen", {
      semanticGroup: "user_interactions",
      id: "main_input",
      type: TYPE.TEXT_EDIT,
      action: ACTION.INPUT,
      value: "text_entered"
    });
  };

  return (
    <View style={styles.mainContainer}>
      <Text style={styles.title}>Moveo One</Text>
      <View style={styles.contentContainer}>
        <Text style={styles.paragraph}>
          This is an example React Native app made for demo purposes.
        </Text>
        <View style={styles.buttonGroup}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => handleButtonPress("Button One")}
          >
            <Text style={styles.buttonText}>Button One</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.button, styles.secondaryButton]}
            onPress={() => handleButtonPress("Button Two")}
          >
            <Text style={styles.buttonText}>Button Two</Text>
          </TouchableOpacity>
        </View>
        <TextInput
          style={styles.input}
          onChangeText={setInputText}
          value={inputText}
          onSubmitEditing={handleInputSubmit}
          placeholder="Type something..."
          placeholderTextColor="#a0aec0"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: "#f0f8ff",
    alignItems: "center",
    paddingTop: 60,
  },
  title: {
    fontSize: 32,
    fontWeight: "700",
    color: "#1a365d",
    marginBottom: 40,
    letterSpacing: 1.2,
  },
  contentContainer: {
    backgroundColor: "white",
    width: "85%",
    borderRadius: 20,
    padding: 25,
    shadowColor: "#2b6cb0",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 10,
    elevation: 5,
  },
  paragraph: {
    fontSize: 16,
    color: "#4a5568",
    lineHeight: 24,
    marginBottom: 30,
    textAlign: "center",
  },
  buttonGroup: {
    gap: 16,
  },
  button: {
    backgroundColor: "#2b6cb0",
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: "center",
    shadowColor: "#2b6cb0",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
  },
  secondaryButton: {
    backgroundColor: "#4299e1",
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
  input: {
    backgroundColor: "#ffffff",
    borderWidth: 1,
    borderColor: "#e2e8f0",
    borderRadius: 12,
    paddingVertical: 14,
    paddingHorizontal: 16,
    fontSize: 16,
    color: "#4a5568",
    marginTop: 20,
    shadowColor: "#2b6cb0",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
});

Obtain API Key

You can find your organization's API token in the Moveo One App. Navigate to your organization settings to retrieve your unique API key.

Dashboard Access

Once your data is being tracked, you can access your analytics through Moveo One Dashboard. The dashboard provides comprehensive insights into user behavior, interaction patterns, and application performance.

Support

For any issues or support, feel free to:

Open an issue on our GitHub repository
Email us at info@moveo.one

Note: This library is designed for React Native applications and requires React Native 0.60.0 or later. Make sure to handle user privacy and data collection in compliance with relevant regulations.

Key Features​

Prerequisites​

Installation​

Library Initialization​

Setup​

Metadata and Additional Metadata​

updateSessionMetadata()​

updateAdditionalMetadata()​

Track Data​

Understanding start() Calls and Context​

When to Use Each Tracking Method​

Context Definition​

Semantic Groups​

Event Types and Actions​

Available Event Types​

Available Event Actions​

Comprehensive Example Usage​

Obtain API Key​

Dashboard Access​

Support​