Vanilla JavaScript / React

This guide covers using the Bklit SDK with vanilla JavaScript or React applications.

Installation

npm install @bklit/sdk

Basic Setup

Import the SDK

import { initBklit } from '@bklit/sdk';

Initialize

initBklit({
  projectId: 'your-project-id',
  apiKey: 'your-api-key',
});

Complete Example

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <h1>Welcome</h1>
  <script type="module" src="./app.js"></script>
</body>
</html>

JavaScript (app.js)

import { initBklit } from '@bklit/sdk';

// Initialize SDK
initBklit({
  projectId: 'your-project-id',
  apiKey: 'your-api-key',
  debug: true, // Enable debug logging
});

React Example

Functional Component

import { useEffect } from 'react';
import { initBklit } from '@bklit/sdk';

function App() {
  useEffect(() => {
    initBklit({
      projectId: 'your-project-id',
      apiKey: 'your-api-key',
    });
  }, []);

  return <div>My App</div>;
}

With Environment Variables

import { useEffect } from 'react';
import { initBklit } from '@bklit/sdk';

function App() {
  useEffect(() => {
    initBklit({
      projectId: process.env.REACT_APP_BKLIT_PROJECT_ID,
      apiKey: process.env.REACT_APP_BKLIT_API_KEY,
    });
  }, []);

  return <div>My App</div>;
}

Configuration Options

Basic

initBklit({
  projectId: 'your-project-id',
  apiKey: 'your-api-key',
});

Advanced

initBklit({
  projectId: 'your-project-id',
  apiKey: 'your-api-key',
  wsHost: 'wss://bklit.ws:8080', // Optional - auto-detected
  environment: 'production', // 'development' or 'production'
  debug: false, // Enable debug logging
});

Note: wsHost is optional and defaults to wss://bklit.ws:8080 in production and ws://localhost:8080 in development.

Environment Variables

Store credentials securely:

# .env
REACT_APP_BKLIT_PROJECT_ID=your-project-id
REACT_APP_BKLIT_API_KEY=bk_live_your-token-here

initBklit({
  projectId: process.env.REACT_APP_BKLIT_PROJECT_ID,
  apiKey: process.env.REACT_APP_BKLIT_API_KEY,
});

Manual Tracking

Track Page View

window.trackPageView();

Track Custom Event

window.trackEvent(
  'button-click',
  'click',
  {
    buttonName: 'Sign Up',
    location: 'header'
  }
);

SPA Support

The SDK automatically detects route changes in single-page applications:

React Router
Vue Router
Next.js (with manual tracking)
Any SPA framework

No additional configuration needed!

Captured Data

Bklit automatically captures comprehensive metadata from each pageview to give you rich analytics insights.

Page Metadata

Title - Page title from <title> tag
Description - Meta description for SEO context
Open Graph Image - Social sharing image (og:image)
Open Graph Title - Social sharing title
Favicon - Site icon URL
Canonical URL - Preferred URL version
Language - Document language setting
Robots - SEO directives

Campaign Attribution

Track marketing campaigns and understand where your traffic comes from:

UTM Parameters:

Source (utm_source)
Medium (utm_medium)
Campaign (utm_campaign)
Term (utm_term)
Content (utm_content)
ID (utm_id)

Ad Platform Click IDs:

Google Ads (gclid)
Facebook/Instagram (fbclid)
Microsoft/Bing Ads (msclkid)
TikTok Ads (ttclid)
LinkedIn Ads (li_fat_id)
Twitter Ads (twclid)

Referrer Analysis:

Hostname and path extraction
Automatic classification (organic, social, paid, referral, direct)

Session Tracking

New vs returning visitors
Landing pages per session
Entry and exit pages
Session duration and bounce tracking

All data is captured client-side and sent securely to your Bklit project with no configuration required.

Configuration - All configuration options
Event Tracking - Tracking custom events
Debug Mode - Debugging and logging

Vanilla JavaScript / React

On this page