search

cheatcode / joystick

A full-stack JavaScript framework for building stable, easy-to-maintain apps and websites.
https://cheatcode.co/joystick
Other
209 stars 11 forks source link

Analytics + metrics #359

Open rglover opened 11 months ago

rglover commented 11 months ago

This is for Push but I want to implement it at the framework level. Idea would be to have a way to do this...

import joystick, { track } from '@joystick.js/ui';

const MyPage = joystick.component({
  lifecycle: {
    onMount: () => {
       track.analytics.visit(location?.pathname, { someMetadata: 'blah' });
    },
  },
  events: {
    'click button': () => {
      track.metrics.event('clicked_button', { someMetadata: 'blah' });
    },
  },
  render: () => {
    return `
      <button></button>
    `;
  },
});

On the server, you could define hooks that could be used to output tracked events to any service. Internally, we'd check to see if the app is push deployed, and if it is, route data to the in-memory DB for Push.

import joystick from '@joystick.js/node';

joystick.app({
  track: {
    analytics: {
      on_visit: (url = '', metadata = {}) => {}
    },
    metrics: {
      on_event: (event = '', metadata = {}) => {}
    },
  },
  routes: { ... },
});

The ultimate goal being to avoid getting tied to a single service's way of doing things. If a service goes away or you change, you don't have to reinstrument your app, just update the hook logic on the server.