Naphthalene Possum Management

    tuxa
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    Tuxa

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


    Release   Tuxa on npm   Package size   Licence

    Node.js CI   Coverage   Dependencies   Issues  

    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.

    Install

    npm i tuxa

    DownloadsWeekly Downloads

    2

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    89.8 kB

    Total Files

    78

    Last publish

    Collaborators

    • jmejane