Analytics NPM Package

Overview

Analytics is a simple React component that tracks user sessions, device types, and country information for website analytics. The package automatically captures session data and sends it to a specified tracking server.

Installation

npm install @shrutisharma071204/webanalytic-tracker

or

yarn add @shrutisharma071204/webanalytic-tracker

Usage

Import the Analytics component in your React application and include it in your component tree.

import Analytics from "@shrutisharma071204/webanalytic-tracker";

function App() {
  return (
    <>
      <Analytics keyId="your-tracking-key" />
      <h1>Welcome to My Website</h1>
    </>
  );
}

export default App;

If you are running your own backend, point the component at it:

<Analytics
  keyId="your-tracking-key"
  endpoint="https://your-worker.your-subdomain.workers.dev"
/>

Props

| Prop | Type | Required | Description | | ---------- | -------- | -------- | --------------------------------------------------------------------------- | | keyId | string | yes | A unique tracking key identifying your project. You get this from the dashboard. | | endpoint | string | no | Base URL of your analytics backend. Defaults to the hosted instance. |

Features

• Tracks unique user sessions using localStorage.
• Detects device type using ua-parser-js.
• Fetches country information using ipapi.co.

How It Works

1. The component runs inside useEffect when mounted.
2. It checks for an existing session ID in localStorage.
3. If no session ID exists, it generates a new one and stores it.
4. The component determines the device type.
5. It fetches the user's country from ipapi.co.
6. The collected data is sent to the backend server.

API Request Structure

The analytics data is sent via a POST request to <endpoint>/track with the following JSON payload:

{
  "keyId": "your-tracking-key",
  "sessionId": "random-generated-id",
  "device": "desktop or mobile",
  "country": "US or Unknown",
  "sessionIdPresent": true
}

Notes

• Ensure the backend server at <endpoint>/track is set up to receive analytics data.
• If ipapi.co fails, the country will be reported as "Unknown" and the view is still tracked.

License

This project is licensed under the MIT License.