Added my own tiny Analytics to TinyUX with a little help from AI.

As I was releasing TinyUX as quickly as possible, I skipped the part where you add analytics to your app. Recently I added my simple custom analytics to figure out what I need to know.

What features are used most?

TinyUX is a mobile app created in React Native that let's you tap buttons to quickly create wire-frames. The Google Play Store console did provide some stats from the start, so I know there are a couple of users each day.

In order to improve the app more, I need to learn how people are actually using the app. Are people actually using the features that I'm adding? For instance, recently I added a way to search for icons by drawing with your finger.

Deciding on my approach

I wanted to avoid adding a heavy library that would require an account, complexity and extra dependencies that would need to be kept up to date. So I didn't want to go with Firebase analytics and was not able to find anything that was extremely simple.

So I decided to create something myself with the current requirements:

Count how often users tap certain buttons.
Sum those numbers and send them to the back-end where it is stored in a .log file.
To limit network traffic and the size of the .log file, only send data on a new day or every 100th event.

This came down to:

Storing a counter on different buttons in AsyncStorage.
When tapped, I quick check on if it was time to send something.
A simple fetch() command to send the data with a JSON of the payload.

There are no timestamps on these counts, but on the server side there will be snapshots of these numbers, so it will be possible to see how they have grown over time.

Since I had the numbers, I figured it might also be nice to let the user see them, so I added this to the "?"-screen (https://indieweb.social/@juliu/110164198756547699).

Using AI for the back-end

My first plan was to setup a simple Flask server to process the logs and show a simple dashboard. But I already have TinyUX.app website, and it would be nice to have my dashboard over there.

The website is hosted on a basic WordPress website at hosting where I can't add Flask myself. So what to do?

I went to the AI of Bing to ask for advice. I became clear that you can use WordPress as the end-point of a rest Request. It requires creating a custom WordPress plugin. I'm not super experienced in PHP and never created a WordPress plugin before so it was great that the AI was able to write out most of the code.

Within an hour or so I was able to store the logs and show a quick overview of app usage. So now for each month and day I have stats like these:

 April 2023

    lines: 16
    paid/free: 9/7
    unique id's: 15

    Count: 114 | max 100 | 94%)
    event_canvas_tap: 109 | max 99 | 69%)
    event_canvas_icon: 14 | max 4 | 69%)
    event_toggle_grid: 2 | max 1 | 13%)
    event_canvas_tap_group: 1 | max 1 | 6%)
    event_canvas_erase: 96 | max 96 | 6%)
    event_boards: 2 | max 1 | 13%)

First lessons

While it is still early, there are two things I quickly learned:

The app is used daily.
There is a user how used 96 of the first 100 taps to erase icons.

The app starts with a wire-frame at the start to show off what you can do. In order to erase that wire frame you can do: Press erase brush, long tap on one corner, tap on the other corner. As an alternative you can just tap multiple times to erase icon by icon.

While the app starts with an intro video that shows this long-tap feature. It is clear I need to improve the onboarding in this area!