Skip to main content

JavaScript SDK

The Moveo One JavaScript SDK lets you capture user interactions and behavioral data from your website or web app with zero backend dependencies.

It’s lightweight, asynchronous, and privacy-friendly — all data is batched and sent securely to Moveo One’s analytics API.

Installation​

You can include Moveo One either via script tag (recommended for static sites) or as an NPM/Yarn package (for modern build pipelines).

Option 1. Using Script Tag​

To install the Moveo One analytics library for web, please follow the instructions below:

Basic Installation

Include the two <script> lines at the very end of every page you want to track—just before each </body> tag. For example, on every HTML file:

<!-- At the very end of the <body>, just before </body> -->
<script src="https://moveoonestorage.blob.core.windows.net/000-scripts/moveo-one-script.min.js"></script>
<script>
  // Initialize MoveoOne with their token
  const moveo = MoveoOne.init('YOUR_TOKEN_HERE');
</script>

App Version Tracking

You can track your application version by setting it during initialization:

<script>
  // Initialize with app version
  const moveo = MoveoOne.init('YOUR_TOKEN_HERE', {
    appVersion: '1.0.0'
  });
</script>

Complete Configuration Options

<script>
  const moveo = MoveoOne.init('YOUR_TOKEN_HERE', {
    appVersion: '1.0.0',        // Your app version
    locale: 'en-US',            // User locale
    test: 'false'               // Test mode flag
  });
</script>

Note: For script tag integration, the above configuration is all you need to get started with Moveo One analytics. If you're using NPM/Yarn integration, continue reading below for additional setup and configuration options.

Important: This code needs to be added to every HTML page you want to track. Include the two <script> lines at the very end of every page you want to track—just before each </body> tag. For example, on every HTML file.

Option 2. Using NPM/Yarn​

# Using npm
npm install moveo-one-analytics-js

# Or using yarn
yarn add moveo-one-analytics-js

Then in your app:

import { MoveoOne } from 'moveo-one-analytics-js';

// Initialize with your API token
const analytics = MoveoOne.getInstance('<YOUR_API_TOKEN>');

Setup​

// Enable logging for debugging (optional)
analytics.setLogging(true);

// Set custom flush interval (optional, default: 10 seconds)
analytics.setFlushInterval(5000);

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:

sessionMetadata.put("test", "a");
sessionMetadata.put("locale", "eng");

Additional Metadata​

Additional metadata is used for data enrichment and enables specific queries or analysis by the defined split.

Additional metadata examples:

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

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.

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 the one specified in the start method

Use tick() when:

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

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

Tracking Examples​

// Start the session
analytics.start("checkout_flow", {
  version: "1.0.0",
  environment: "production"
});

// Track an event with explicit context
analytics.track("checkout_flow", {
  semanticGroup: "payment",
  id: "submit_button",
  type: "button",
  action: "click",
  value: "complete"
});

// Track an event in the same context (using tick)
analytics.tick({
  semanticGroup: "navigation",
  id: "back_button",
  type: "button",
  action: "click",
  value: "go_back"
});

Event Types and Actions​

Available Event Types​

  • button - Interactive buttons and controls
  • input - Form inputs and text fields
  • text - Static text content
  • image - Images and media content
  • link - Hyperlinks and navigation elements
  • form - Form containers and submissions
  • container - Content containers and sections
  • navigation - Navigation elements and menus

Available Event Actions​

  • click - User clicks on an element
  • view - Element comes into view
  • edit - User modifies input content
  • submit - Form submission
  • hover - User hovers over an element
  • scroll - Scrolling interactions
  • focus - Element receives focus
  • blur - Element loses focus

Comprehensive Example Usage​

import { MoveoOne } from "moveo-one-analytics-js";

// Initialize analytics
const analytics = MoveoOne.getInstance("your-api-token-here");
analytics.setLogging(true);

// Start session with metadata
sessionMetadata.put("test", "a");
sessionMetadata.put("locale", "eng");
additionalMetadata.put("app_version", "2.1.0");

// Set additional metadata
additionalMetadata.put("user_country", "US");
additionalMetadata.put("company", "example_company");
additionalMetadata.put("user_role", "admin");
additionalMetadata.put("acquisition_channel", "organic");
additionalMetadata.put("device_category", "mobile");
additionalMetadata.put("subscription_plan", "pro");
additionalMetadata.put("has_purchased", "true");

// Track user interactions
function handleProductClick(productId) {
  analytics.track("ecommerce_app", {
    semanticGroup: "product_catalog",
    id: `product_${productId}`,
    type: "button",
    action: "click",
    value: "view_product"
  });
}

function handleAddToCart(productId) {
  analytics.track("ecommerce_app", {
    semanticGroup: "shopping_cart",
    id: `add_to_cart_${productId}`,
    type: "button",
    action: "click",
    value: "add_item"
  });
}

function handleFormInput(fieldName) {
  analytics.tick({
    semanticGroup: "user_input",
    id: fieldName,
    type: "input",
    action: "edit",
    value: "text_update"
  });
}

// Update session metadata when user changes preferences
function updateUserPreferences(preferences) {
  sessionMetadata.put("test", "a");
  sessionMetadata.put("locale", "eng");
}

Obtain API Key​

To get your API key, visit Moveo One Application and create a new project.

Dashboard Access​

Once your data is being tracked, you can access your analytics through the Moveo One Dashboard.

Support​

For any issues or support, feel free to: