Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fanesz/browser-activity-tracker
NPM Package - Track every activity that a user does while accessing the website
https://github.com/fanesz/browser-activity-tracker
npm-package react
Last synced: about 2 months ago
JSON representation
NPM Package - Track every activity that a user does while accessing the website
- Host: GitHub
- URL: https://github.com/fanesz/browser-activity-tracker
- Owner: fanesz
- License: mit
- Created: 2023-11-08T16:14:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-04T22:18:47.000Z (5 months ago)
- Last Synced: 2024-08-05T00:07:28.047Z (5 months ago)
- Topics: npm-package, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/browser-activity-tracker
- Size: 207 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Browser Activity Tracker](https://www.npmjs.com/package/browser-activity-tracker) · [](https://github.com/fanesz/browser-activity-tracker/blob/main/LICENSE) [](https://github.com/fanesz/browser-activity-tracker)
In accordance with its name, this is a module that contains functions to track whatever activities are carried out by the user.
The tracked activities are switching applications, changing browser tabs, mouse clicks, keyboard presses, and when the mouse enters/exits specific components.
### Installation
`npm i browser-activity-tracker`
## Usage
### Application and Browser Tab Tracker
It is tracked when the user is not focused on the browser, such as when opening other applications, pressing the Windows key, using Alt-Tab to switch applications, changing browser tab, and so on.
- Activites: `aplIn`, `aplOut`, `pagein`, `pageOut`
```jsx
import { useState } from 'react';
import { pageTracker } from "browser-activity-tracker"
export default function App() {
const [isStart, setIsStart] = useState(false);
// You can change isStart with button or something
// because the result of pageActivities only triggered after
// isStart changed from true to false
const pageActivities = pageTracker(isStart);
// pageActivities returns an array of objects
// where each object contains activity names and timestamps
return (
setIsStart(prev => !prev)}>
{isStart ? 'stop' : 'start'}
{pageActivities.map((item) => (
{item.activity} - {item.timestamp.toLocaleTimeString()}
))}
{/*
example result when switching aplication and then switching browser tab
aplOut - 11:02:44 PM
aplIn - 11:02:44 PM
pageOut - 11:02:45 PM
pageIn - 11:02:46 PM
*/}
)
}
```
### Keyboard Tracker
It is tracked when the user press any key of the keyboard.
- Activites: `{key} pressed`, `{key} released`
```jsx
import { useState } from 'react';
import { keyboardTracker } from "browser-activity-tracker"
export default function App() {
const [isStart, setIsStart] = useState(false);
const keyboardActivity = keyboardTracker(isStart);
return (
setIsStart(prev => !prev)}>
{isStart ? 'stop' : 'start'}
{keyboardActivity.map((item) => (
{item.activity} - {item.timestamp.toLocaleTimeString()}
))}
{/*
example result when user do ctrl+c
Control pressed - 11:09:36 PM
c pressed - 11:09:37 PM
c released - 11:09:37 PM
Control released - 11:09:37 PM
*/}
)
}
```
### Mouse Tracker
It is tracked when user do a click, and moving in/out on specific component.
- Activites: `mouseClick`, '
```jsx
import { useState } from 'react';
import { mouseTracker } from "browser-activity-tracker"
export default function App() {
const [isStart, setIsStart] = useState(false);
const [mouseActivity, MouseComponent] = mouseTracker(isStart);
return (
This is the section that tracking mouse in and out.
setIsStart(prev => !prev)}>
{isStart ? 'stop' : 'start'}
{mouseActivity.map((item) => (
{item.activity} - {item.timestamp.toLocaleTimeString()}
))}
{/*
example result when user do cursor in, double click,
and cursor out on MouseComponent component
mouseIn - 11:16:37 PM
mouseClick - 11:16:37 PM
mouseClick - 11:16:38 PM
mouseOut - 11:16:39 PM
*/}
)
}
```
## Some Useful Function
### Counting total Copy pressed (ctrl+c)
```jsx
import { useEffect, useState } from 'react';
import { keyboardTracker, totalCopy } from "browser-activity-tracker"
export default function App() {
const [isStart, setIsStart] = useState(false);
const keyboardActivity = keyboardTracker(isStart);
const [copyPressed, setCopyPressed] = useState(0);
useEffect(() => {
setCopyPressed(totalCopy(keyboardActivity));
}, [isStart]);
return (
setIsStart(prev => !prev)}>
{isStart ? 'stop' : 'start'}
Total ctrl+c pressed: {copyPressed}
)
}
```
## Typescript
Because the tracker function return an array of object, you can import `TActivity` from the module.
```jsx
import { useState } from 'react';
import { keyboardTracker, TActivity } from "browser-activity-tracker"
export default function App() {
const [isStart, setIsStart] = useState(false);
const keyboardActivity: TActivity[] = keyboardTracker(isStart);
return (
...
)
}
```