The Lean Startup approach has led to a proliferation of analytics tools over the past few years, promising faster feedback cycles and better products for our customers. However, many of the tools and approaches apply to the back-end, are slow and inappropriate or cost you an arm and a leg. And then there is Adobe Analytics... In this talk, Matt will discuss why we need metrics, some approaches to bring the party to the front-end, and some cheap/low-fi solutions to get you dreaming up metrics until your heart is content.

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

2. 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.

3. Why do we need metrics?
Down the rabbit hole

4. “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

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

7. 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….

8. 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);
}
});

9. 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

11. 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?)

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

14. 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.

15. 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?”

16. 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)

17. We can take ownership of the metrics we need

18. Isomorphic Universal Metrics
Metrics on the front and back

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

20. Implementation Architecture

21. 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

22. Bucky to the rescue
Implementation

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

24. 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

25. 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

27. 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'
};
}

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

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

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

31. ■ 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