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