Thinking metrics on React apps

Thinking metrics on React apps

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

October 27, 2016
Tweet

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