Thinking metrics on React apps

Transcript

1. Thinking metrics on
 React apps @jcemer

2. I work on GloboPlay.
 globo.com

3. None
4. None

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