Integrate the Klaritics Web SDK in Your Application

The Klaritics Web SDK sends analytics events directly from the browser to your self-hosted Klaritics instance. You can install it via npm for bundler-based projects or load it from a CDN script tag for simpler setups. This guide covers installation, initialization, event logging, user and session management, and SPA behavior.

Installation

npm
Script tag

Install the package from npm:

npm install --save @deeptaai/klaritics-web-sdk

Then import and initialize:

import Klaritics from "@deeptaai/klaritics-web-sdk";

Klaritics.init("YOUR_APP_ID", {
  server_host: "https://YOUR_SERVER_HOST"
});

Add the script tag to your HTML. The defer attribute ensures it loads after the page content.

<script type="text/javascript" defer
  src="https://unpkg.com/@deeptaai/klaritics-web-sdk@latest">
</script>

Then initialize in your application code:

Klaritics.init("YOUR_APP_ID", {
  server_host: "https://YOUR_SERVER_HOST"
});

Initialization options

You can pass additional options when calling init:

Option	Type	Description
`server_host`	string	Required. URL of your Klaritics instance.
`honorDNT`	boolean	Honor the browser’s Do Not Track setting.
`idle_time_out`	number	Milliseconds of inactivity before a session ends.
`version`	string	Application version to attach to events.

Logging events

Use logEvent to send standard analytics events. Use logClientEvent for events that are specific to your client-side logic.

Klaritics.logEvent("ProductClicked", {
  product_id: "sku-123",
  category: "electronics"
});

// Third argument true sends the event before a page refresh
Klaritics.logEvent("CheckoutStarted", { cart_value: 99.99 }, true);

Klaritics.logClientEvent("SoftBackPressed", { page: "settings" });

User and session management

// Identify the current user
Klaritics.setUserId("user@example.com");

// Attach user properties
Klaritics.setUserProperties({
  plan: "pro",
  signup_date: "2024-01-15"
});

// Attach session properties
Klaritics.setSessionProperties({
  campaign: "summer_sale"
});

// Retrieve the SDK-generated client ID
const clientId = Klaritics.getClientId();

// Manually control sessions
Klaritics.startNewSession();
Klaritics.endSession();

Single-page applications

For SPAs, you can use your existing redirection handler to trigger events on route changes. URL-based page tracking is configured from the Klaritics dashboard and does not require additional SDK setup.

Get Started

User Management

Analysis

Dashboards

Widgets

Data

Templates

Alerts & Integrations

SDK Integration

Deployment

Reference

Integrate the Klaritics Web SDK in Your Application

Installation

Initialization options

Logging events

User and session management

Single-page applications

​Installation

​Initialization options

​Logging events

​User and session management

​Single-page applications

Installation

Initialization options

Logging events

User and session management

Single-page applications