Tuxa

The UX Analyzer, your toolbox to help you analyze User Experience of your app.


     

       

Installation

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

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<DataEmitter<BehaviorInfo>>();
	public flowEvents$ = new Subject<DataEmitter<EventLog>>();

	private tuxa: Tuxa;
	private config = new Config();
	private unsubscriber$ = new Subject<void>();
	private flowUnsubscriber$ = new Subject<void>();

	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<T>(s$: Subject<T>): void {
		s$.complete();
		s$ = new Subject<T>();
	}

	private emit<T>(s$: Subject<T>, data: T): void {
		s$.next(data);
	}

	private subscribeToTuxa(): void {
		this.tuxa.behaviors$
			.pipe(takeUntil(this.unsubscriber$))
			.subscribe((dE: DataEmitter<BehaviorInfo>) => {
				this.emit(this.behaviors$, dE);
			});
		this.tuxa.flowEvents$
			.pipe(takeUntil(this.flowUnsubscriber$))
			.subscribe((eL: DataEmitter<EventLog>) => {
				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:

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.