Web SDK Integration Guide for Klaritics

The Klaritics Web SDK sends analytics events from the browser to your self-hosted Klaritics instance. Install it from npm for bundler-based projects, or load it with a script tag. Package: @deeptaai/klaritics-web-sdk · Version: 1.0.1

Requirements

You need a Project ID and a Server host from the Klaritics dashboard. Your project ID is on the Getting Started page.

Installation

npm
Script tag

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

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

The defer attribute loads the SDK after the page content.

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

Initialize the SDK

Call Klaritics.init once, before any other Klaritics call:

Klaritics.init("YOUR_PROJECT_ID", "https://YOUR_SERVER_HOST");

Argument	Type	Description
1st	`string`	Required. Your `project_id` from the Klaritics dashboard (Getting Started page).
2nd	`string`	Required. Your server host — the URL of your Klaritics instance.

API reference

Method	Usage	Description
`init`	`init(projectId, serverHost)`	Initialize the SDK.
`logAppEvent`	`logAppEvent(eventName, properties, beforeRefresh?)`	Log an analytics event. Pass `true` as the third argument to send it before a page refresh.
`logPageView`	`logPageView(pageName)`	Record a page view.
`setUserId`	`setUserId(userId)`	Identify the current user.
`setUserProperties`	`setUserProperties(properties)`	Attach user properties.
`setSessionProperties`	`setSessionProperties(properties)`	Attach properties to the current session.
`getDeviceId`	`getDeviceId()`	Return the SDK-generated device ID.
`startNewSession`	`startNewSession()`	Start a new session manually.
`endSession`	`endSession()`	End the current session manually.

Common recipes

Log events

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

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

Track a page view

Klaritics.logPageView("pricing");

Identify a user and set properties

Klaritics.setUserId("user_123");

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

Klaritics.setSessionProperties({ campaign: "summer_sale" });

Get the device ID and control sessions

const deviceId = Klaritics.getDeviceId();

Klaritics.startNewSession();
Klaritics.endSession();

Single-page applications

Call logPageView from your existing route-change handler to record navigation between views. URL-based page tracking is configured from the Klaritics dashboard and needs no extra SDK setup.

Troubleshooting

Symptom	Fix
Events lost when the page reloads	Pass `true` as the third argument to `logAppEvent` for events fired just before a refresh.
Nothing is sent	Check that `init` runs before any other call, with both the project ID and a valid server host.

Next steps

Verify your integration

Trigger test events, watch them land on the Getting Started page, and click Complete Setup.

Release notes

What changed in each Web SDK version.

Package: @deeptaai/klaritics-web-sdk · Version: 1.0.1 · Release notes

Get Started

Cohorts

Product Analytics

Data

Behavior Analytics

Charts

Default Templates

Saved Charts

Saved Dashboards

Settings

Integrations

Deployment

Reference

Web SDK Integration Guide for Klaritics

Requirements

Installation

Initialize the SDK

API reference

Common recipes

Log events

Track a page view

Identify a user and set properties

Get the device ID and control sessions

Single-page applications

Troubleshooting

Next steps

Verify your integration

Release notes

​Requirements

​Installation

​Initialize the SDK

​API reference

​Common recipes

​Log events

​Track a page view

​Identify a user and set properties

​Get the device ID and control sessions

​Single-page applications

​Troubleshooting

​Next steps

Verify your integration

Release notes

Requirements

Installation

Initialize the SDK

API reference

Common recipes

Log events

Track a page view

Identify a user and set properties

Get the device ID and control sessions

Single-page applications

Troubleshooting

Next steps