event-tracker

A lightweight, type-safe event tracking library for React applications that simplifies analytics integration while maintaining clean code and optimal performance.

Key Features

• 🎯 Declarative event tracking with type-safe APIs
• ⚡️ Optimized performance with event batching
• 🔄 Guaranteed execution order for async operations
• 🔌 Analytics tool agnostic - works with any provider
• 🧩 Clean separation of tracking logic from business logic

Why event-tracker?

Event tracking is essential for modern web applications, but implementing it cleanly can be challenging. Common pain points include:

• Mixing tracking logic with business logic
• Managing complex tracking state
• Ensuring reliable event delivery
• Maintaining type safety
• Performance overhead

event-tracker solves these problems with a declarative API that keeps your code clean and performant.

Install

Using npm:

1$ npm install @loggists/event-tracker

Using yarn:

1$ yarn add @loggists/event-tracker

Using pnpm:

1$ pnpm add @loggists/event-tracker

Example with react-ga4

tracker.ts

1import ReactGA from "react-ga4";
2import { createTracker } from "@loggists/event-tracker";
3import { SendParams, EventParams, GAContext, ImpressionParams, PageViewParams } from "./types";
4
5export const [Track, useTracker] = createTracker<GAContext, SendParams, EventParams, ImpressionParams, PageViewParams>({
6  init: () => {
7    ReactGA.initialize("(your-ga-id)");
8  },
9  DOMEvents: {
10    onClick: (params, context) => {
11      ReactGA.event({
12        ...params,
13        ...context,
14        action: "click",
15      });
16    },
17  },
18  impression: {
19    onImpression: (params, context) => {
20      ReactGA.event({
21        ...params,
22        ...context,
23        action: "impression",
24      });
25    },
26  },
27  pageView: {
28    onView: ({ page }) => {
29      ReactGA.send({
30        hitType: "pageview",
31        page,
32      });
33    },
34  },
35});
36

App.tsx

1import { useState } from "react";
2import { Track } from "./tracker";
3
4function App() {
5  const [count, setCount] = useState(0);
6
7  return (
8    <Track.Provider
9      initialContext={{ userId: "USERID", clientId: "CLIENTID" }}
10    >
11      <h1>Event Tracker</h1>
12      <div className="card">
13        <Track.Click
14          params={{ category: "button", label: "count", value: count + 1 }}
15        >
16          <button onClick={() => setCount((count) => count + 1)} >
17            count is {count}
18          </button>
19        </Track.Click>
20      </div>
21      <Track.Impression
22        params={{ category: "text", label: "Good morning" }}
23      >
24         <div>Good morning</div>
25      </Track.Impression>
26      <Track.PageView params={{page: "/home"}} />
27    </Track.Provider>
28  );
29}
30

Docs

• API
• Components
• Hook
• Batching