$30 off During Our Annual Pro Sale. View Details »

Thinking metrics on React apps

Thinking metrics on React apps

Jean Carlo Emer

October 27, 2016
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

Transcript

  1. Thinking
    metrics on

    React apps
    @jcemer

    View Slide

  2. I work on
    GloboPlay.

    globo.com

    View Slide

  3. View Slide

  4. View Slide

  5. React Router 2.0
    & Server side
    render & Client
    side user login

    View Slide

  6. 1. How can we 

    track our traffic
    with Google
    Analytics?

    View Slide

  7. location={this.props.location} />

    View Slide

  8. @PureRender
    class PageView extends Component {
    static propTypes = {
    location: PropTypes.object.isRequired
    }
    componentDidMount() {
    const { action, state } = this.props.location
    trackPageView(action, state)
    }
    componentDidUpdate() { /* */ }
    }

    View Slide

  9. 2. How can we 

    analyse custom
    data?

    View Slide

  10. Global
    metrics data:

    user account info
    & app version

    View Slide

  11. data={{ appVersion: "2.3" }} />

    View Slide

  12. function handleStateChangeOnClient(vars) {
    setMetricsDataLayer(vars)
    }
    export default withSideEffect(
    reducePropsToState,
    handleStateChangeOnClient
    )(DocumentMetrics)
    https://github.com/
    gaearon/react-side-effect

    View Slide

  13. 3. How can we
    track the user
    navigation flow?

    View Slide

  14. Playlist
    Recommendation

    View Slide

  15. Component
    metrics:

    playlist or

    other lists

    View Slide




  16. is a list of

    is a list of

    View Slide



  17. metrics="playlist" />
    is a list of
    metrics="recommendation" />
    is a list of

    View Slide




  18. https://facebook.github.io/
    react/docs/context.html

    View Slide

  19. class Video extends Component {
    static contextTypes = {
    linkMetrics: PropTypes.object
    }
    render() {
    const state = {
    metrics: this.context.linkMetrics
    }
    return /* ... */
    }
    }

    View Slide

  20. * redux should be 

    an option too

    View Slide

  21. Components
    React side effect
    Context

    View Slide

  22. Thank you!
    @jcemer

    View Slide