An open API service indexing awesome lists of open source software.

https://github.com/mikechiloane/browser-event-instrumentor

Source for the browser tracker to help with the instrumentation of browser events
https://github.com/mikechiloane/browser-event-instrumentor

Last synced: 4 days ago
JSON representation

Source for the browser tracker to help with the instrumentation of browser events

Awesome Lists containing this project

README

          

# Recced Browser Event Tracker

A lightweight TypeScript library for tracking user actions and events in the browser. It captures clicks and user activity, batches them, and sends them to a configurable endpoint.

## Features

- Tracks user clicks on elements with an `action-name` attribute
- Captures page, element, and event metadata
- Buffers and batches events for efficient network usage
- Handles session management and user/device identification
- Sends data reliably on page unload using `sendBeacon`
- Configurable via simple options
- Written in TypeScript

## Installation

```
npm install
```

## Building

```
npm run build
```

## Testing

```
npm test
```

## Usage

```ts
import ActionTracker from 'recced-browser-event-tracker';

const tracker = ActionTracker.init({
endpoint: 'https://your-endpoint.com/track',
debug: true, // Optional: enable debug logging
});
```

Add the `action-name` attribute to any element you want to track:

```html
Sign Up
```

## Configuration Options

See [`TrackerConfig`](src/types/tracker_config.ts):

- `endpoint` (string, required): Where to send tracked events
- `flushInterval` (number, ms): How often to send batches (default: 10000)
- `maxBatchSize` (number): Max events per batch (default: 20)
- `sessionTimeout` (number, ms): Session inactivity timeout (default: 30min)
- `debug` (boolean): Enable debug logs
- `userId` (string): Override user ID

## Development

- Source code: [src/index.ts](src/index.ts)
- Types: [src/types/](src/types/)