page-tracker-logger/readme.md

A lightweight client-side JavaScript utility to track user behavior like clicks, tab switches, typing, idle time, and more.

# 📊 pageTracker

`pageTracker` is a lightweight JavaScript function that tracks user activity on a webpage, including:

- Tab switches
- Clicks
- Typing sessions
- External paste events
- Idle time
- Session duration
- And optionally saves data to `localStorage` or sends it to a backend via `fetch`.

---


## ✅ Features

- **Click Tracking** — Logs all clicked elements with tag, id, class, text, and timestamp
- **Tab Switch Detection** — Detects when the user switches away and returns to the tab
- **Typing Monitoring** — Measures duration of typing sessions
- **Copy-Paste Detection** — Detects external paste activity and copied content
- **Idle Time Tracking** — Measures time of inactivity based on scroll, mouse, or keyboard events
- **Session Duration** — Logs total session time from page load to unload
- **Optional Storage** — Save data to `localStorage`
- **Optional Backend Send** — Send session data to a backend using `fetch`

---



## 📦 Installation

```bash
npm install page-tracker


## 🛠️ How to Use

I- **React**
- **Plain HTML + `<script type="module">`**
```md
## 📋 Example (React)

```js
import pageTracker from "page-tracker-logger";

pageTracker({
  switchTabTrace: true,
  clickTrace: true,
  typingTrace: true,
  externalPasteTrace: true,
  localStorage: {
    save: true,
    key: "session"
  },
  fetch: {
    senddata: true,
    url: "https://your-api.com/track"
  }
});