mixan

Mixan is a simple analytics tool for logging events on web and react-native. My goal is to make a minimal mixpanel copy with the most basic features (for now).

Easy to use
Fully responsive UI
Own your own data
GDPR friendly

Whats left?

Currently storing events on postgres but will probably move it to clickhouse to speed up queries. Don't have any performance issues yet so will wait and see how well postgres can handle it.

Speed/Benchmark

As of today (~~2023-12-12~~ 2024-01-16) I have more then ~~1.2~~ 2.8 million events and 20 thousand profiles in postgres and performance is smooth as butter* 🧈. Only thing that is slow (2s response time) is to get all unique events. Solved now with cache but can probably make better with indexes and avoid using distinct.

* Smooth as butter is somewhat exaggerated but I would say it still fast! It takes 1.4 sec to search through all events (3 million) with advanced where clause. I think this performance is absolutly good enough.

GUI

Fix design for report editor
Fix profiles
- Pagination
- Filter by event name
Fix [profileId]
- Add events
- Improve design for properties and linked profiles
New design for events
Map events to convertions
Map ids
Fix menu links when projectId is undefined
Fix tables on settings
Rename event label
Common web dashboard
- User histogram (last 30 minutes)
- Bounce rate
- Session duration
- Views per session
- Unique users
- Total users
- Total pageviews
- Total events
Save report to a specific dashboard
View events in a list
- Simple filters
View profiles in a list
Invite users
[ ] Drag n Drop reports on dashboard
Manage dashboards
Support more chart types
- Bar
- Histogram
- Pie
- Area
- Metric
- Line
Support funnels
Support multiple breakdowns
Aggregations (sum, average...)

SDK

Store duration on screen view events (can be done in backend as well)
Create native sdk
- Handle sessions
Create web sdk
- Screen view function should take in title, path and parse query string (especially utm tags)

@mixan/sdk

For pushing events

Install

npm: npm install @mixan/sdk
pnpm: pnpm add @mixan/sdk
yarn: yarn add @mixan/sdk

Usage

import { MixanWeb } from '@mixan/sdk-web';

// import { MixanNative } from '@mixan/sdk-native';

const mixan = new MixanWeb({
  clientId: 'uuid',
  url: 'http://localhost:8080/api/sdk',
  batchInterval: 10000,
  verbose: false,
  trackIp: true,
});

// const mixan = new MixanNative({
//   clientId: 'uuid',
//   clientSecret: 'uuid',
//   url: 'http://localhost:8080/api/sdk',
//   batchInterval: 10000,
//   verbose: false,
//   trackIp: true,
// });

// Call this before you send any events
// It will create a anonymous profile
// This profile will be merged if you call `setUser` in a later stage
mixan.init();

// tracks all outgoing links as a `link_out` event
mixan.trackOutgoingLinks();

mixan.setUser({
  id: 'id',
  first_name: 'John',
  last_name: 'Doe',
  email: 'john.doe@gmail.com',
  properties: {}, // any properties
});

// will upsert 'app_open' on user property and increment it
mixan.increment('app_open');
// will upsert 'app_open' on user property and increment it by 10
mixan.increment('app_open', 10);
// will upsert 'app_open' on user property and decrement it by 2
mixan.decrement('app_open', 2);

// send a sign_in event
mixan.event('sign_in');

// send a sign_in event with properties
mixan.event('sign_in', {
  provider: 'gmail',
});

// Screen view for web
mixan.screenView();

// Screen view for native
mixan.screenView('Article', {
  id: '3',
  title: 'Nice article here',
});

// Call this when a user is logged out.
// This will just make sure you do not send
// the associated profile id for the next events
mixan.clear();

@mixan/web

A nextjs web app. Collects all events and your gui to analyze your data.

Setup cronjobs (optional)

Use of cronjobs is optional. Everything will work without them but they will enhance the events with more data. We also use cronjobs to warm up the cache to make the user experiance a bit better.

We use https://cron-job.org (free) to handle our cronjobs, you can use any provider you want.