Skip to content

soumydip/ucoder_insight_core

Repository files navigation

UCoder Insight Logo

UCoder Insight

Powerful analytics and user insights tracking SDK for modern web applications

Live Dashboard  •  Documentation  •  NPM

npm version npm downloads TypeScript License: MIT

Core developed and maintained by Soumyadip Maity


UCoder Insight SDK - Core NPM Library

Features

  • Lightweight & Fast - Minimal bundle size with no required dependencies
  • Real-time Analytics - Track user behavior, events, and custom metrics
  • Privacy-First - GDPR compliant with built-in consent management
  • Custom Events - Track anything from clicks to complex user journeys
  • Cross-Platform - Works seamlessly on web, mobile, and desktop
  • Framework Agnostic - Works with React, Vue, Angular, Next.js, and vanilla JS
  • Easy Integration - Get started in under 2 minutes
  • Advanced Insights - User sessions, funnels, retention, and more
  • Geo-location - Automatic location detection and tracking
  • Bot Detection - Filters out bot traffic automatically
  • Web Vitals - Automatic performance tracking (LCP, CLS, INP, FCP, TTFB) when web-vitals is available

Installation

npm

npm install ucoder-insight

yarn

yarn add ucoder-insight

pnpm

pnpm add ucoder-insight

CDN

<script src="https://cdn.jsdelivr.net/npm/ucoder-insight@latest/dist/index.global.js"></script>

Configuration Options

Option Type Default Description
notFoundPath string undefined Custom 404 page path
notTrackPath string | string[] undefined Paths to exclude from tracking
debug boolean false Log to console instead of API
apiUrl string undefined Custom backend API endpoint

Quick Start

1. Get Your API Key

Sign up at insights.ucoder.in and get your tracking ID.

2. Initialize the SDK

JavaScript / TypeScript

import { initUcoderInsight } from "ucoder-insight";

initUcoderInsight("YOUR_TRACKING_ID", {
  notTrackPath: ["/privacy", "/terms", "/admin/*"], // all pages under /admin will be ignored
});

React

import { useEffect } from "react";
import { initUcoderInsight } from "ucoder-insight";

function App() {
  useEffect(() => {
    initUcoderInsight("YOUR_TRACKING_ID", {
      notTrackPath: ["/privacy", "/terms", "/admin/*"], // all pages under /admin will be ignored
      // added more config
    });
  }, []);

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

Next.js (App Router)

Create a client component for analytics first:

// app/components/Analytics.tsx
"use client";
import { useEffect } from "react";
import { initUcoderInsight } from "ucoder-insight";

export default function Analytics() {
  useEffect(() => {
    initUcoderInsight("YOUR_TRACKING_ID", {
      notTrackPath: ["/privacy", "/terms", "/admin/*"],
      debug: process.env.NODE_ENV !== "production", // Optional: helps in local dev
      // added more config
    });
  }, []);

  return null;
}

Then include it in your root layout:

// app/layout.tsx
import Analytics from "./components/Analytics";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Vue 3

// main.js
import { createApp } from "vue";
import { initUcoderInsight } from "ucoder-insight";
import App from "./App.vue";

initUcoderInsight("YOUR_TRACKING_ID", {
  notTrackPath: ["/privacy", "/terms", "/admin/*"], // all pages under /admin will be ignored
});

createApp(App).mount("#app");

Vanilla JavaScript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/ucoder-insight@latest/dist/index.global.js"></script>
  </head>
  <body>
    <script>
      UcoderInsight.init("YOUR_TRACKING_ID", {
        notTrackPath: ["/privacy", "/terms", "/admin/*"], // all pages under /admin will be ignored
        // added more config
      });
    </script>
  </body>
</html>

Usage

Track Custom Events

import { trackCustomEvent } from "ucoder-insight";

// Simple event
trackCustomEvent("button_click");

// Event with properties
trackCustomEvent({
  event_name: "email_input_clicked",
  action_category: "interaction",
  object_id: "email_input_field",
  status: "success",
});

Web Vitals (Performance Tracking)

UCoder Insight automatically collects Web Vitals metrics (LCP, CLS, INP, FCP, TTFB) if web-vitals is available in your project.

React / Next.js usersweb-vitals comes pre-installed, so performance tracking works out of the box with zero extra setup.

Vanilla JS / other frameworks — Install web-vitals manually to enable performance tracking:

npm install web-vitals

If web-vitals is not installed, all other tracking features (page views, custom events, sessions, etc.) will continue to work normally. Performance tracking is silently skipped.


Dashboard Features

Visit insights.ucoder.in to access:

What you get with Ucoder Insights

Analytics

  • Page Views & Sessions — Track visits, unique users, and session duration
  • Geo Analytics — See where your users are coming from, country and city level
  • Device Breakdown — Browser, OS, screen size, and device type
  • Referrer Tracking — Know which sources drive your traffic
  • OutBound Link Tracking — See which external links users click on
  • 6-Month Data Retention — All your analytics data kept for 6 months

User Behavior

  • Click Tracking — See exactly what users click on
  • Rage Clicks — Detect frustrated users clicking repeatedly
  • Dead Clicks — Find buttons and links that don't respond
  • Custom Events — Track anything with trackCustomEvent()

Error Monitoring

  • JS Error Tracking — Catch TypeErrors, ReferenceErrors with file name and line number
  • Unhandled Promise Rejections — Never miss a silent async failure
  • Resource Errors — Detect broken images, scripts, and stylesheets
  • Error Management — Resolve, ignore, or mark errors in progress with full activity history
  • Regression Detection — Know when a fixed bug comes back

Privacy & Performance

  • No Cookies — Zero cookie consent banners needed
  • Privacy First — No PII collected by default
  • Lightweight SDK — Under 7.4kb (Minified + Gzipped), no performance impact
  • Offline Support — IndexedDB queue, events sent when connection restores

Contributing

Contributions are welcome! Please read our Contributing Guide first.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Changelog

For a detailed list of changes, please see the CHANGELOG.

Bug Reports

Found a bug? Please open an issue on GitHub with:

  • Clear description of the issue
  • Steps to reproduce
  • Expected vs actual behavior
  • Browser/environment details
  • Code examples (if applicable)

Support


License

MIT License - see LICENSE file for details.


Acknowledgments

  • Built with ❤️ by the UCoder team
  • Inspired by modern analytics tools
  • Thanks to all contributors!

Links


Made with ❤️ by UCoder

⭐ Star us on GitHub

About

Resources

License

Code of conduct

Contributing

Security policy

Stars

2 stars

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors