react-tracking Declarative event tracking for React apps

Jeremy Gayed @tizmagik Lead Software Engineer at The New York
Times React x Node NYC Meetup, Nov 16 2017 react-tracking

The New New York Times • JavaScript • Node/Express •
React • Isomorphic • GraphQL

Problem • Permeated the codebase • Inconsistent • No validation
• Difficult to debug • Providing context was awkward • Impacted performance

Principles • Baked in • Out of the way •
Context provided naturally • Validation

@track() Decorate components with the tracking information that you have,
when you have it.

const logOnRender = msg => Comp => { return class
Logged extends Component { render() { console.log(msg); return <Comp {...this.props} /> } }; } Quick Aside: Decorators • “Higher-order components” • Function that takes in a component and returns a new (wrapped) component • babel-plugin-transform-decorators-legacy • Can be used via “currying” style @logOnRender('Oh hai!') class Home extends Component { ... }

@track({ appName: 'NYT' }) class App extends Component {...} @track({
page: 'story' }) class Story extends Component {...} @track({ region: 'header' }) class Header extends Component {...} @track({ region: 'body' }) class Body extends Component {...} @track({ region: 'footer' }) class Footer extends Component {...} @track({ module: 'share-tool' }) class ShareTool extends Component {...} Decorate as you go... <App> <Story> <Header> <ShareTool /> </Header> <Body /> <Footer> <ShareTool /> </Footer> </Story> </App>

Declarative and out of your way @track({ module: 'share-tool' })
class ShareTool extends Component { @track({ event: 'tweet' }) tweet() { composeTweet() }; render() { return [ <Twitter onClick={this.tweet} /> <Facebook /> <Email /> ]; } } { appName: 'NYT', page: 'story', region: 'header', module: 'share-tool', event: 'tweet' }

Story Page Header ShareTools ShareTools Footer

Automatic PageView Tracking @track( { appName: 'nyt', }, { process:
ownTrackingData => ownTrackingData .page ? { event: 'pageview', } : null, } ) class App extends Component {...} @track({ page: 'home' }) class Home extends Component {...} @track({ page: 'story' }) class Story extends Component {...}

Custom Dispatch Behavior @track( { appName: 'nyt', }, { dispatch:
data => { API.post(data); // anything } } ) class App extends Component {...} // default (GTM) dispatch: data => { (window.dataLayer = window.dataLayer || [] ).push(data); }

Advanced Usage @track((props, state, [event]) => ({ action: 'click', label:
event.currentTarget.title })) handleClick = (event) => { if (this.props.onClick) { this.props.onClick(event); } } render() { return ( <button onClick={this.handleClick}> {this.props.children} </button> ); }

Imperative Option @track() class Button extends Component { handleClick =
() => { API.getData().then(result => { if (result.status) { this.props.tracking.trackEvent({ action: 'click', apiResult: result.status, }); } }); }; render() { return <button onClick={this.handleClick}>{this.props.children}</button>; } }

Validation import { validator } from 'tracking-schema' ; export const
dispatch = data => { validator(data); // logs errors in dev; no-op in prod (window.dataLayer = window.dataLayer || []).push(data); };

Try it npm install react-tracking https://github.com/NYTimes/react-tracking

Jeremy Gayed @tizmagik Thank You We’re Hiring! Come chat… https://nytimes.wd5.myworkdayjobs.com/Tech

react-tracking Declarative event tracking for R...

react-tracking Declarative event tracking for React apps

Jeremy Gayed

More Decks by Jeremy Gayed

Other Decks in Technology

Featured

Transcript

Jeremy Gayed @tizmagik Lead Software Engineer at The New York

The New New York Times • JavaScript • Node/Express •

Problem • Permeated the codebase • Inconsistent • No validation

Principles • Baked in • Out of the way •

@track() Decorate components with the tracking information that you have,

const logOnRender = msg => Comp => { return class

@track({ appName: 'NYT' }) class App extends Component {...} @track({

Declarative and out of your way @track({ module: 'share-tool' })

Story Page Header ShareTools ShareTools Footer

Automatic PageView Tracking @track( { appName: 'nyt', }, { process:

Custom Dispatch Behavior @track( { appName: 'nyt', }, { dispatch:

Advanced Usage @track((props, state, [event]) => ({ action: 'click', label:

Imperative Option @track() class Button extends Component { handleClick =

Validation import { validator } from 'tracking-schema' ; export const

Try it npm install react-tracking https://github.com/NYTimes/react-tracking

Jeremy Gayed @tizmagik Thank You We’re Hiring! Come chat… https://nytimes.wd5.myworkdayjobs.com/Tech