npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tics

v3.0.363

Published

Simple analytics

Downloads

860

Readme

🎢 tics

Simple self-hosted analytics ideal for Express / React Native stacks

🚥 Install

On both your frontend and backend, install the tics library.

npm i tics

🤹🏼‍ How it works

You mount an Express.js Router, accept requests to your server and save impressions in your database. tics also provides a frontend library to send impressions.

🎛 Usage

Backend

const app = require('express');
const tics = require('tics/server');
const db = require('./mongo');

const {impressions, analytics, stats} = tics({
    db: db.collection('impressions')
});

// Use endpoints to receive impressions and retrieve stats
app.use('/telemetry', impressions);
app.use('/analytics', mustBeAdmin, analytics);

// Or use built-in functions to get stats
await stats.activeUsers.daily() // => 29

tics() takes a MongoDB database collection as an argument. Collections from mongodb and then-mongo drivers have been tested.

tics() returns an object with 3 items:

  • impressions is an Express.js router that the frontend can call to collect telemetry data.
  • analytics is an Express.js router that exposes a JSON API with analytics data. You should add some middleware to protect this router with some sort of authentication.
  • stats is an object containing the following methods:
    • stats.dau() returns daily active users
    • stats.wau() returns weekly active users
    • stats.mau() returns monthly active users
    • stats.userCount(filter) counts users. You can add a mongo query to only count a subset of impressions.
    • stats.platforms() returns a breakdown of the different platforms. Example response: [{id: 'ios', count: 1000, id: 'android', count: 2000}]
    • stats.languages() returns a breakdown of the languages of the users devices. Example response: [{id: 'de', count: 1000, id: 'en', count: 2000}]
    • stats.versions() returns a breakdown of the different versions of the app. Example response: [{id: '1.0.0', count: 200}, {id: '1.0.1', count: 400}, {id: '1.1.0', count: 4000}]
    • stats.contents() returns a breakdown of the different contents that the analytics are tracking.
    • stats.breakDown() allows to break down a custom field similar to the breakdowns above
    • stats.activityLevels focus on breaking down the different interactions of one content.
      • stats.activityLevels.byContentType returns a breakdown of the impressions of the different contents. Example: [{id: 'register-screen', count: 1000}, {id: 'article-page', count: '100'}]
      • stats.activityLevels.byContentId(content_id) returns the breakdown of the different interactions with one entity of a content. Example reponse: [{id: 'view', count: 20000, {id: 'click', count: 1000}, {id: 'conversion': 20}}],
    • stats.db provides raw access to make queries yourself

Track from React Native / Expo / Web

import tics from 'tics';

const analytics = tics({endpoint: 'https://jonny.io/api/telemetry'});

tics.impression('https://jonny.io/api/telemetry', {
    content: 'ad',
    content_id: '3240978',
    level: 'view',
    platform: 'ios',
    identifier: '098324',
    language: 'de',
    version: '1.0.0'
})
.then(() => { /* ... */})

Pass as the endpoint parameter the URL where the impressions router is mounted. This is the host of your server plus the route of the impression router.

Returned is an object which contains:

  • impression: Makes an impression request to the server. Terminology:
    • impression.content: Type of content. For example register-screen, ad, product,
    • impression.content_id optional: Allows to distinguish between different entities of the same content type.
    • impression.level: Type of interaction. For example view/ click/ conversion for sales. Or install / register for tracking registration conversion. Default: view
    • impression.platform optional: Operating system of the device. React native client will try to figure it out itself if this option is omitted.
    • impression.identifier optional: Identifying string of the user. Multiple impressions by the same user get removed when calculating number of users. React native client will try to use native identifier when omitted.
    • impression.language optional: Language of user's device
    • impression.version optional: App version number. React Native client will try to find it when this parameter is omitted.

Track sessions

Track sessions using React hooks. Pass a value for isFocused and it will automatically stop tracking if the user navigates away in React Native.

import {useTics} from 'tics';
import {useIsFocused} from '@react-navigation/native';

export const Comp = () => {
    const isFocused = useIsFocused();
    useTics(isFocused, 'https://jonny.io/api/telemetry', {
        content: 'ad',
        content_id: '3240978',
        level: 'view',
        platform: 'ios',
        identifier: '098324',
        language: 'de',
        version: '1.0.0'
    })
    return null;
}

👨🏻‍💻 Author

🗒 License

MIT