https://github.com/jasonmejane/tuxa
The UX Analyser, your toolbox to analyse user experience of your app
https://github.com/jasonmejane/tuxa
analytics analyzer toolbox ux ux-analyser ux-research
Last synced: about 2 months ago
JSON representation
The UX Analyser, your toolbox to analyse user experience of your app
- Host: GitHub
- URL: https://github.com/jasonmejane/tuxa
- Owner: JasonMejane
- License: mit
- Created: 2021-01-02T19:30:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-01-09T19:12:08.000Z (over 1 year ago)
- Last Synced: 2024-04-26T13:04:07.490Z (about 1 year ago)
- Topics: analytics, analyzer, toolbox, ux, ux-analyser, ux-research
- Language: TypeScript
- Homepage:
- Size: 772 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tuxa
The UX Analyzer, your toolbox to help you analyze User Experience of your app.
## Installation
```sh
npm install tuxa --save
yarn add tuxa
bower install tuxa --save
```
## Tuxa Demo App
### Github repo
https://github.com/JasonMejane/tuxa-demo-app
### Stackblitz demo
https://stackblitz.com/edit/tuxa-demo-app
## Usage
One instance of Tuxa has to be created, started and used across your application. The data is provided through two observables:
you just need to subscribe to `behaviors$` to get the detected behaviors like rage clicks, and `flowEvents$` to get all events (all but mousemove) in order to track user actions in a particular flow.
### In an Angular app, make a service provided in root
```typescript
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { Tuxa } from 'tuxa';
import { takeUntil } from 'rxjs/operators';
import { Config } from 'tuxa/dist/shared/config/config';
import { DataEmitter } from 'tuxa/dist/shared/models/data-emitter.model';
import { EventLog } from 'tuxa/dist/shared/models/event-log.model';
import { BehaviorInfo } from 'tuxa/dist/shared/models/behavior-info.model';
@Injectable({
providedIn: 'root',
})
export class TuxaService {
public behaviors$ = new Subject>();
public flowEvents$ = new Subject>();
private tuxa: Tuxa;
private config = new Config();
private unsubscriber$ = new Subject();
private flowUnsubscriber$ = new Subject();
constructor() {
this.tuxa = new Tuxa(this.config);
this.tuxa.start();
this.subscribeToTuxa();
}
public stop(): void {
this.destroy(this.behaviors$);
this.destroy(this.flowEvents$);
this.unsubscriber$.next();
this.destroy(this.unsubscriber$);
this.flowUnsubscriber$.next();
this.destroy(this.flowUnsubscriber$);
this.tuxa.stop();
}
private destroy(s$: Subject): void {
s$.complete();
s$ = new Subject();
}
private emit(s$: Subject, data: T): void {
s$.next(data);
}
private subscribeToTuxa(): void {
this.tuxa.behaviors$
.pipe(takeUntil(this.unsubscriber$))
.subscribe((dE: DataEmitter) => {
this.emit(this.behaviors$, dE);
});
this.tuxa.flowEvents$
.pipe(takeUntil(this.flowUnsubscriber$))
.subscribe((eL: DataEmitter) => {
this.emit(this.flowEvents$, eL);
});
}
}
```
Note that all the observables have to be unsubscribe in order to avoid memory leaks.
### Configuration
You can use the default configuration, or you can customize it. The default configuration is:
```typescript
cursorTrashingParameters:
threshold: 150
timeRange: 2500
rageClickParameters:
threshold: 3
timeRange: 750
randomScrollingParameters:
threshold: 40
timeRange: 3000
mode: SILENT
```
Threshold represents the number of occurences of a given event to be detected as one of those three behaviors: cursor trashing, rage click and random scrolling.
Time range represents the range during which at least the threshold number of occurences happens.