Metrics on the front, data in the back

Metrics on the front, party data in the backApproaches 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?

Hit Counters - The Analytics Dark AgesHit 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.0s.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.0Told 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 users2. Lack APIs3. Cumbersome to implement4. 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 StartupBuild, 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 PlatformsComplement traditional analytics tools, and are

1. Designed for technical users2. API first3. Easier to implement4. Near real-time5. Data ownership6. 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 PlatformsCommercial

1. keen.io2. segment.io3. trak.io4. KISS Metrics5. Datadog <- this one is nice!

Open Source: 6. SGG Stack (Statsd, Graphite and Grafana) <- start here7. TICK Stack (Telegraf, InfluxDB, Chronograf, Kapacitor)

We can take ownership of the metrics we need

Isomorphic Universal MetricsMetrics on the front and back

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

Implementation

Implementation Architecture

1. React front-end (canonical TODO App) + Redux2. Metrics Stack

a. Statsd as wire protocolb. InfluxDB as the time-series databasec. 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 Actionconst 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 Instrumentationimport 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.

DemoUniversal React with metrics

https://github.com/mefellows/react-redux-todo-app/

Matt Fellows

PRESENTED BY:

@matthewfellowsgithub.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