The Overcentric JavaScript library is a lightweight, privacy-focused SDK that helps you understand your users' behavior across their entire journey. With a single integration, you can automatically capture key events, track user sessions, and gain powerful insights into your marketing and product performance.
Automatic Event Tracking: Captures page views, clicks, form submissions, and more out of the box.
Privacy-Focused: Collects only the data that matters, respecting user privacy.
Lightweight: Has a minimal impact on your application's performance.
Single-Page Application (SPA) Support: Includes built-in support for single-page applications.
Custom Events: Track any custom events that are important for your business.
User Identification: Associate events with specific users.
Session & Attribution Tracking: Automatically tracks user sessions and attribution data like UTM parameters and initial referrer.
Error Tracking: Captures uncaught JavaScript errors.
Session Replay: Records user session replays for debugging and support.
Support Widgets: Provides widgets for Chat Support and a Help Center (Knowledge Base).
To get started, you need to initialize the library with your unique project ID. Overcentric is designed to track the full user journey, from your marketing website to your product dashboard. The context parameter is crucial for differentiating between these environments.
The context parameter can be set to one of the following values:
website: For your marketing website (e.g., https://www.overcentric.com).
product: For your product dashboard (e.g., https://app.overcentric.com).
This method is ideal for static websites or when using a Content Delivery Network (CDN).
<script src="https://unpkg.com/overcentric/dist/browser/overcentric.min.js" data-project-id="your-project-id" data-context="website"></script>This is the recommended method for modern web applications using a package manager.
overcentric.init("your-project-id", { context: "product"});You can easily configure your Overcentric integration from the dashboard, but you can also use the init() method to manually override default settings. Manually configured options will always take precedence over dashboard settings.
overcentric.init("your-project-id", { // Enable debug logging debugMode: true, // Enable automatic event capturing (default: true) enableAutoCapture: true, // Configure which events to auto-capture autoCaptureConfig: { click: true, scroll: true, formSubmit: true, inputFocus: true, visibilityChange: true, }, // Enable error tracking (default: true) enableErrorCapture: true, // Enable session replay recording (default: true) enableRecording: true, // Enable chat support (default: false) enableChat: false, // Enable Help Center (knowledge base) support (default: false) enableKB: false, // Custom API basepath (optional, defaults to https://app.overcentric.com/api) basePath: "https://your-api.com/api",});The Overcentric library automatically tracks a variety of events, providing a solid foundation for understanding user behavior without additional code.
$page_view
Description: Triggered when a page is viewed.
Properties: url, title, referrer
$error
Description: Triggered when an uncaught JavaScript error occurs.
Properties: error_message, error_stack
$click
Description: Triggered when an element is clicked.
Properties: element_id, element_tag, element_class, element_text
$form_submit
Description: Triggered when a form is submitted.
Properties: form_id, form_name, form_action
$scroll
Description: Triggered when a user scrolls.
Properties: scroll_percentage, scroll_position
$input_focus
Description: Triggered when an input receives focus.
Properties: input_id, input_name, input_type
$page_visible
Description: Triggered when the page becomes visible.
Properties: time_hidden
$page_hidden
Description: Triggered when the page becomes hidden.
Properties: time_visible
$initial_visit
Description: Triggered on the user's first visit.
Properties: initial_referrer, initial_landing_page, utm_parameters
$identify
Description: Triggered when a user is identified.
Properties: user_id, name, email
You can track any custom events that are relevant to your business using the trackEvent method. To get the most out of Overcentric's pre-built analytics reports, it's recommended to use the following reserved event names for common user actions.
$signup
$signin
$activate
$subscription_purchase
$subscription_upgrade
$subscription_downgrade
$subscription_cancel
$account_delete
$onboarding_start
$onboarding_complete
For example, to track a signup and subscription purchase events, you can do the following:
overcentric.trackEvent("$signup", { method: "email", plan: "trial",});overcentric.trackEvent("$subscription_purchase", { plan: "growth",});We recommend using snake_case for event names. The first part of the event name should be a description of the event, business or part of the UI, and the second part should be the action in simple present tense.
Here are a few examples:
cta_click
report_submit
chart_download
table_export
The identify method is essential for connecting events to specific users. After calling identify, all subsequent events will include the provided user ID.
overcentric.identify("user123", { name: "John Doe", // optional email: "john@example.com", // optional});When you identify a user, the library also automatically:
Generates and maintains a unique device ID.
Tracks the initial referrer and UTM parameters on the user's first visit.
Associates all events with both the device ID and user ID (when available).
Overcentric automatically tracks user sessions with intelligent timeout handling:
A session expires after 30 minutes of inactivity.
A new session begins when a user returns after being away for more than 10 minutes.
On a user's first visit to your website or product (whichever is first), the library automatically captures attribution data, which is then stored locally and sent with the $initial_visit event. This allows you to understand where your users are coming from and see which traffic sources drive the best conversions and usage.
Captured attribution data includes:
Initial referrer
Landing page URL
UTM parameters (utm_source, utm_medium, utm_campaign, etc.)
Timestamp of the first visit
When an event is sent to the Overcentric server, it includes the following information. This structure helps you understand the data you can expect to see in your reports.
{ "event": { "name": "event_name", "properties": { /* custom properties */ }, "project_id": "your-project-id", "device_id": "unique-device-id", "session_id": "current-session-id", "url": "current-page-url", "referrer": "referrer-url" }, "identity": { // present only if a user is identified "unique_identifier": "user-id", "email": "user-email", "name": "user-name", "project_id": "your-project-id" }}It's a best practice to use a separate project for each of your development environments (e.g., local, staging, production). You can easily create a new project from your Overcentric dashboard and get a unique project ID for each environment.
If you'd like to send events from the server, using an HTTP API, please refer to this article.