Thinking metrics on React apps

Transcript

1. Thinking metrics on
 React apps @jcemer
2. I work on GloboPlay.
 globo.com
5. React Router 2.0 & Server side render & Client side user login
6. 1. How can we 
 track our traffic with Google Analytics?
7. <PageView 
 location={this.props.location} />
8. @PureRender class PageView extends Component { static propTypes = { location: PropTypes.object.isRequired } componentDidMount() { const { action, state } = this.props.location trackPageView(action, state) } componentDidUpdate() { /* */ } }
9. 2. How can we 
 analyse custom data?
10. Global metrics data:
 user account info & app version
11. <DocumentMetrics 
 data={{ appVersion: "2.3" }} />
12. function handleStateChangeOnClient(vars) { setMetricsDataLayer(vars) } export default withSideEffect( reducePropsToState, handleStateChangeOnClient )(DocumentMetrics) https://github.com/ gaearon/react-side-effect
13. 3. How can we track the user navigation flow?
14. Playlist Recommendation
15. Component metrics:
 playlist or
 other lists
16. <Playlist /> <Recommendation /> <Video /> is a list of <Video /> is a list of
17. <Playlist /> <Recommendation /> <Video 
 metrics="playlist" /> is a list of <Video 
 metrics="recommendation" /> is a list of
18. <LinkMetrics data="playlist"> <Playlist /> </LinkMetrics> https://facebook.github.io/ react/docs/context.html
19. class Video extends Component { static contextTypes = { linkMetrics: PropTypes.object } render() { const state = { metrics: this.context.linkMetrics } return <Link state={state}>/* ... */</Link> } }
20. * redux should be 
 an option too
21. Components React side effect Context
22. Thank you! @jcemer