JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16
  • Score
    100M100P100Q40977F
  • License MIT

A privacy-first, cookie-free, and lightweight web analytics SDK for React, Next.js, Vanilla JavaScript, and SPA applications. Developer-friendly and easy to integrate.

Package Exports

  • ucoder-insight
  • ucoder-insight/global

Readme

UCoder Insight Logo

UCoder Insight

Powerful analytics and user insights tracking SDK for modern web applications

npm version npm downloads License: MIT


Features

  • Lightweight & Fast - Minimal bundle size with zero 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

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>

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
    });
  }, []);

  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
    });
  }, []);

  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
      });
    </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",
});

Dashboard Features

Visit insights.ucoder.in to access:

  • Real-user Analytics - Track real users
  • User Segments - Create custom user segments
  • Retention - Analyze user retention rates
  • Geo Analytics - Location-based insights
  • Device Breakdown - Browser, OS, device stats
  • Custom Reports - Build your own reports

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

See https://insights.ucoder.in/docs/changelog for release history.


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!


Made with ❤️ by UCoder

⭐ Star us on GitHub