Basic Product Analytics

The beauty of having something (relatively) complete and available to the general public, is that it can get some legs of its own, and have some exciting moments.

Pickr.lol has had two big moments in the last half a year, which led me to finally implement some basic Amplitude user tracking.

One moment was 6 months ago, which was the post Dream SMP member Tournament. There was a post on reddit which got somewhat popular, and brought a lot of new users to the site.

The biggest takeaway I got from this post, is that creating a short video of playing the game is the best way to market and promote new visitors to play a game. What was really cool about this one, is that it was the first instance ever where it was a topic that I didn’t create and actively post to various boards, that got a lot of plays.

The other one was just 5 days ago, which was the post Greatest WWE Divas Champion?!. This one got popular as a result of this twitter post.

Always figured that Pickr would cater to die-hard niche fanbases that are just craving for any sorts of new ways to participate in their fandom, but to have these two organic posts spring up and have ~3000 and ~4200 plays respectively; was quite a pleasant, welcome surprise.

There is basic Google Analytics hoisted on the site, but the problem was that even while the twitter post was trending and there were lots of users playing on the site in real time, Google Analytics was collecting almost no user analytics, to my dismay.

I had always meant to implement a real, controlled product analytics solution anyway, so after considering a few options, I turned to Amplitude because of its reputation as the industry standard in product analytics, and my familiarity having used it before.

A client-side implementation to track user events would be OK, but I didn’t want to account for the uncertainty of the tracking being blocked by privacy tools. So as the first solution, server-side tracking was to be implemented instead.

Pickr uses AWS Lambda to do all the server-side computing, which meant in order to use the Amplitude Node.js SDK a layer was the best way to use the library in my lambda instances. I didn’t want to bother with that, so as the first pass, I used the simple HTTP requests API in order to send the events.

Amplitude tracking also requires at a minimum, a device ID or user ID for a given event. Because users don’t need to log in on my site in order to play games, a device ID needed to be generated and kept track. Here’s my simple implmentation of a useDeviceId.ts.

import { useEffect } from 'react'
import { getLongId } from '../lib/id'
import { DEVICE_ID_KEY } from '../lib/localStorage'
import useLocalStorage from './useLocalStorage'

export const useDeviceId = (): string => {
  const [savedId, setSavedId] = useLocalStorage(DEVICE_ID_KEY, '')

  useEffect(() => {
    if (savedId === '') {
      const generatedId = getLongId()
      setSavedId(generatedId)
    }
  }, [savedId, setSavedId])

  return savedId
}

In my lambda functions, I made tracking an event super easy by creating some library functions that will parse the lambda event for the event parameters, and log it on Amplitude.

export const getTopics = async (
  event: APIGatewayProxyEvent,
  context: Context
): Promise<APIGatewayProxyResult> => {
  ...

  await getTrackingParamsAndTrackEvent('view_topics', event)

  ...

  return getLambdaProxyResponse<ITopic[]>(statusCode, PAYLOAD)
}

This was a really lightweight way to implement some rudimentary product analytics.

Some improvements I’d love to make in the future are:

• to augment request headers with the device and user IDs so they don’t need to be manually populated.
• to implement a proxy which will automatically funnel events to not only amplitude, but a data stream that can be observed.

Last thing I’ll mention, before adding some screenshots from the WWE Divas Twitter post, is that it’s a great motivator to have a dashboard and to try and make those numbers go up by presenting an interesting, worthwhile experience for users.

Here’s to 7000 organic plays of games! 🥂