Conviva JavaScript ECO SDK

Use Conviva JavaScript ECO SDK to auto-collect events and track application-specific events and state changes.

Table of Contents

• Quick Start
• More Features
• Auto-collected Events
• FAQ

Quick Start

1. Installation

• Install the Conviva JavaScript ECO SDK using either npm or yarn:

npm install @convivainc/conviva-js-appanalytics

yarn add @convivainc/conviva-js-appanalytics

Note: For script-based integrations, refer Conviva JS Script ECO SDK for guidelines.

2. Initialization

• Import the required packages into your project:

import {
    convivaAppTracker,
    setUserId,
    trackPageView,
} from '@convivainc/conviva-js-appanalytics';

• Initialize the Conviva JavaScript ECO SDK:

Note: It is recommended to initialize the tracker as early as possible during the DOM load sequence, such as in App.js.

convivaAppTracker({
    appId: 'YOUR_APP_NAME',
    convivaCustomerKey: 'YOUR_CUSTOMER_KEY',
    appVersion: '1.1.0',
});

YOUR_APP_NAME - A string value that uniquely identifies your app across platforms. For example: "WEB App", "LGTV App".

YOUR_CUSTOMER_KEY - A string to identify a specific customer account. Use different keys for dev and prod. Find them in Pulse under My Profile (Conviva login required).

appVersion - Set app version in string format.

3. Set the User ID

User ID is a unique string identifier to distinguish individual viewers. If using Conviva Video Sensor, match it with the Viewer ID.

setUserId('replace_me_by_the_userId');

4. Report Page View

trackPageView() should be called after the page is considered "loaded" by your application—that is, when content is rendered and ready for user interaction. Avoid calling it too early (e.g., before the main content or layout is visible), as this may result in incomplete timing data.

What defines a "page change"? This depends on your app type:

For MPAs: Every full page reload is a new page. For SPAs: A new page is usually identified by URL path or route changes.

Developers should trigger pageview() based on what they define as a meaningful navigation or view transition in their application.

By default, when trackPageView() is called, the Page Title is set using document.title. However, you can override this by passing a custom title in the trackPageView() API:

// Uses document.title as the Page Title
trackPageView();

// Pass a custom Page Title
trackPageView({ title: 'Custom Page Title' });

After steps 1–4, verify auto-collected events in the validation dashboard . (Conviva login required)

More Features

Auto-collected Events

Conviva automatically collects rich set of app performance metrics through app events after completing the Quick Start.

Limitations