In regular websites, it is common to send multiple events to track user clicks. Single Page Applications change the way you look at metrics. This is a talk about a simple pattern we created at Globo.com to manage a metrics layer for http://globoplay.globo.com. The talk will cover how to track user flow using Google Analytics and other services. We solved the challenge of tying metrics and components, keeping information across pages and having global data. Also some React, React Router and React Side Effects concepts like context, higher order components, history state will be covered.

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