MPVAnalytics

Funcionamento:

A biblioteca funciona através de eventos aninhados, cronometrados ou não, eles são apenas registrados pela biblioteca, o desenvolvedor pode passar um callback para que, quando a aplicação for encerrada, parar o registro e utilizar esses dados, geralmente, enviando pro servidor

Toda a API são eventos, eles possuem um nome, subeventos, dados (informações adicionais que serão vinculadas ao evento) e, se forem cronometrados, um tempo, ele pode ser iniciado, pausado, retomado e parado, ao criar um evento cronometrado, ele será automaticamente iniciado. Além disso todos eventos possuem um método get(): EventResult | TimedEventResult que retorna os dados registrados

A biblioteca exporta apenas uma classe (e algumas interfaces, se estiver usando TypeScript), ela deve ser instanciada passando um nome e dados, pois ela é um evento cronometrado. Você pode gerenciar quando o Analytics deve parar chamando o método stop(): Analytics e obter os dados registrados chamando o método get(): AnalyticsResult. Se desejar, pode usar o ouvinte de eventos da biblioteca se inscrevendo pelo método onDone(): Analytics, ele será chamado quando o evento unload for disparado

Exemplo:

import { Analytics } from 'mpv-analytics';

const analytics = new Analytics('My Wonderful App')
    .onDone(data => {
        // Verifique o suporte em https://caniuse.com/#feat=beacon
        navigator.sendBeacon('my-api.example.com/analytics', JSON.stringify(data));
    });

// URL da página atual, se for iframe, da página pai, se não houver permissão pra acessar, "unkown"
console.log(analytics.origin)

analytics.origin = 'Landing Page';

// UUID do visitante/dispositivo auto gerado e armazenado em LocalStorage
console.log(analytics.visitor)

analytics.visitor = currentUser.id;

let subEvent;

myAwesomeButton.addEventListener('click', () => {
    subEvent = analytics.event('subEvent', { myAwesomeAdditionalData: 'Additional Data' });
});

myAwesomeForm.addEventListener('submit', () => {
    subEvent.event('subSubEvent');
});

let subTimedEvent;

myAnotherAwesomeButton.addEventListener('click', () => {
    if (!subTimedEvent)
        subTimedEvent = analytics.event('subTimedEvent', { myAnotherAwesomeAdditionalData: 'Another Additional Data' });

    subTimedEvent.status == 'runnig' ?  subTimedEvent.pause() : subTimedEvent.continue();
});