Collect metrics on UI events

[terichadbourne]

There are a few events within ProtoSchool that we may want to start tracking analytics on in 2019.

For example, @mikeal has suggested that we could track clicks on "Reset code" and instances where the user gets back to default code either by that click event or by deleting their way back to the original state, comparing the two stats.

During the latest PR, I left some comments that begin with "TRACK?" at spots where we may want to come back later and add proper events to implement that.

More on Event Tracking via Google Analytics at: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

See the related conversation at: ipfs/community#376 (comment)

[terichadbourne]

@mikeal I know that this issue is specifically about event tracking, but do we already have standard Google Analytics set up for simple page views, etc. I'd love to ensure that's in place as we see increased traffic during launch.

[mikeal]

We have standard analytics already, so when people hit particular pages we know what is being hit. Actually, we may not be tracking this properly right now since we're a single page app and we may want to consider using https://www.npmjs.com/package/vue-analytics

Anyway, that will give us standard analytics tracking. However, we have page interactions we may want to track as well. For instance, we probably want to track how many incorrect submissions each lesson gets. That's doable with a custom event but we'll have to add that in ourselves.

[terichadbourne]

@mikeal How can I get hooked up with login info so I can see what data is being generated by our current Google Analytics and where we're falling short? Should I reach out to IT for that?

[mikeal]

@terichadbourne yup, it@protocol.ai should be able to get you access :)

[terichadbourne]

Per a discussion with @mikeal, we'll postpone addressing this issue until after making a decision on Vuepress (#141), which we'll be exploring the week of 2/11-2/15.

Vuepress has bult-in analytics that would likely make the mentioned package (https://www.npmjs.com/package/vue-analytics) unnecessary.

[terichadbourne]

Got myself access to the existing Google Analytics, and wanted to share a quick look at the types of data we are able to track at present. (This may be old news to folks who are experienced with Google Analytics, so bear with me.)

The whole SPA does appear to be treated as a single website now, so we can see how long people are staying and whether they're new visitors but we don't know where they're going within the site. Using either an analytics package with our current Vue implementation or switching to VuePress looks like it will be very helpful in providing more useful info, as will adding specific event tracking to better identify how far people are getting in lessons, etc.

What we can already see includes:
Traffic spikes, like this one from our public launch shown within the past 2 months:

Where our audience is coming from (this has shifted more toward "direct" and less "social" in more recent periods that don't include launch):

GitHub is still our biggest referrer, although we can see in a 2-month period that we had hits from being highlighted in the IPFS newsletter and blog:

We can also see some basics on where traffic is coming from geographically and what types of devices are being used (the interest in China corresponds to what we see in chapter organizing requests and we should consider the mobile stats as we decide what to support in our UX):

[terichadbourne]

@olizilla has suggested that Countly might be appropriate for this metric collection. (cc @mikeal)

[mikeal]

You’re going to spend more time in this tool than anyone so I’ll defer to you on which tool to use :)

[terichadbourne]

Thanks for offering to pick up this issue and build out our analytics, @olizilla!

As we discussed today, you have an idea we can use to get Countly to track views for each separate lesson despite Vue producing an SPA, which should also address some of the concerns expressed in #179.