Metrics on the front, data in the back

Metrics on the front, party
data in the back
Approaches to bringing metrics to the front end
Matt Fellows
@matthewfellows
github.com/mefellows

WARNING:
Intended for mature audiences only. Content may contain
harsh and/or violent outbreaks concerning Adobe Analytics.
Offended viewers are advised to stop using the product
immediately and take the team go-karting with the savings.

Why do we need metrics?
Down the rabbit hole

“Alice: Would you tell me, please, which way I ought to go from here?
The Cheshire Cat: That depends a good deal on where you want to get to.
Alice: I don't much care where.
The Cheshire Cat: Then it doesn't much matter which way you go.
― Lewis Carroll, Alice in Wonderland

If we are to succeed, we ought to know where we are and where we’re
going
The lesson?

Metrics on the front, data in the back

Hit Counters - The Analytics Dark Ages
Hit counters tell us basically nothing about how to improve our website:
● We don’t know what we could do to improve the site
● We can’t distinguish between real people and crawlers
● We can’t tell if changing the comic, or the navigation or making
pretty pictures makes any difference at all
We need a way to measure things in more detail to improve our
chances of adding business value
So we evolved….

Analytics 2.0
s.businessUnit = 'ske';
s.country = 'au';
s.platform = 'd';
s.section = 'homepage';
require(['omniture'], function (omniture) {
var queueTrackingOnly = 'false';
if (queueTrackingOnly == 'true' && omniture.store) {
omniture.store({"pageName":"home page","channel":"home","prop4":"home page","prop6":"home","prop11":"b19ee802-ce67-e511-80e9-
6c3be5b017d4","prop12":"loggedin","prop54":"c79529bc-4559-49be-a5b6-8fc8b42c27be","eVar54":"c79529bc-4559-49be-a5b6-8fc8b42c27be"});
}
else {
s.pageName = 'home page';
s.channel = 'home';
s.prop4 = 'home page';
s.prop6 = 'home';
s.prop11 = 'b19ee802-ce67-e511-80e9-6c3be5b017d4';
s.prop12 = 'loggedin';
s.prop54 = 'c79529bc-4559-49be-a5b6-8fc8b42c27be';
var s_code = s.t(); if (s_code) document.write(s_code);
}
});

Analytics 2.0
Instead of sticking hit counters on our websites, we stuck large chunks
of of javascript into our web pages...
And it was good

Analytics 2.0
Told us a hell of a lot about what people did on our websites
(Impressions, Attribution, Funnel Analysis and so on).
But...
1. Designed for business users
2. Lack APIs
3. Cumbersome to implement
4. Real-time (no - they are lying)
5. Data Monoliths (do you own your data and can you query it?)

The Lean Startup
http://theleanstartup.com/principles

Lean Startup
Build, measure, learn and repeat.
This changed the landscape in a number of fundamental ways:
● Develop -> deploy cycle had to shrink
● Rise of DevOps & Continuous Delivery
● Requires better visibility into operational and business metrics
Previous generation tooling insufficient for this purpose.

New Generation Analytics Platforms
Complement traditional analytics tools, and are
1. Designed for technical users
2. API first
3. Easier to implement
4. Near real-time
5. Data ownership
6. Alerts/Notifications
We can now begin ask questions and answer them immediately:
“Did my change to the Widget result in more, less or no change?”

New Generation Analytics Platforms
Commercial
1. keen.io
2. segment.io
3. trak.io
4. KISS Metrics
5. Datadog <- this one is nice!
Open Source:
4. SGG Stack (Statsd, Graphite and Grafana) <- start here
5. TICK Stack (Telegraf, InfluxDB, Chronograf, Kapacitor)

We can take ownership of the metrics we need

Isomorphic Universal Metrics
Metrics on the front and back

Creating, deploying and integrating our own metrics stack is easy.
Implementation

1. React front-end (canonical TODO App) + Redux
2. Metrics Stack
a. Statsd as wire protocol
b. InfluxDB as the time-series database
c. Bucky to broker web <-> InfluxDB
3. All wired together with Docker
Challenge: Sending metrics to statsd (UDP) from Node and direct
from the browser.
Implementation

Bucky to the rescue
Implementation

Setup Bucky...
import bucky from 'bucky';
import { metricsHost, metricsIsEnabled } from 'config';
bucky
.setOptions({
host: metricsHost,
active: metricsIsEnabled
});

import analytics from 'redux-analytics';
const track = ({ type, payload = {} }) => {
const { value = 1 } = payload;
const key = `mymetricnamespace.actions.${type}`;
bucky.count(key, value);
};
const analyticsMiddleware = analytics(track, ({ meta }) =>
meta.metrics);
Create some Redux middleware

Add metadata to Flux Standard Action
const action = {
type: 'MY_ACTION',
meta: {
metrics: {
type: 'my-analytics-event',
payload: {
postfix: 'special', //
value: 3 // default is 1
}
}
}
};
// Will result in the statsd metric ${metricsPrefix}.actions.my-analytics-event.special to be incremented by 3

Manual Instrumentation
import bucky from 'bucky';
class HelloApp extends React.Component {
constructor(props) {
super(props);
bucky.send('helloapp.constructor', 2432.43434); // gauge
this.state = {
filterType: 'all'
};
}

Creating, deploying and integrating our own metrics stack is easy.

Demo
Universal React with metrics
https://github.com/mefellows/react-redux-todo-app/

Matt Fellows
PRESENTED BY:
@matthewfellows
github.com/mefellows
Thank you!

■ Bucky (http://github.hubspot.com/bucky/)
■ Metrics, Metrics Everywhere
(https://dl.dropboxusercontent.com/u/2744222/2011-04-09-
Metrics-Metrics-Everywhere.pdf)
■ Redux Analytics (https://github.com/markdalgleish/redux-
analytics)
■ StatsD (https://github.com/etsy/statsd/)
■ TICK Docker (https://github.com/mefellows/docker-tick)
■ Fun Omniture Memes
■ TODO App: React + Redux + Bucky + TICK Demo
(https://github.com/mefellows/react-redux-todo-app/)
References

Metrics on the front, data in the back

More Related Content

Viewers also liked (19)

Similar to Metrics on the front, data in the back (20)

More from DiUS (20)

Recently uploaded (20)

Metrics on the front, data in the back