Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Thinking
metrics on

React apps@jcemer
I work on
GloboPlay.

globo.com
React Router 2.0
& Server side
render & Client
side user login
1. How can we 

track our traffic
with Google
Analytics?
<PageView 

location={this.props.location} />
@PureRender
class PageView extends Component {
static propTypes = {
location: PropTypes.object.isRequired
}
componentDidMo...
2. How can we 

analyse custom
data?
Global
metrics data:

user account info
& app version
<DocumentMetrics 

data={{ appVersion: "2.3" }} />
function handleStateChangeOnClient(vars) {
setMetricsDataLayer(vars)
}
export default withSideEffect(
reducePropsToState,
...
3. How can we
track the user
navigation flow?
Playlist
Recommendation
Component
metrics:

playlist or

other lists
<Playlist />
<Recommendation />
<Video />is a list of
<Video />is a list of
<Playlist />
<Recommendation />
<Video 

metrics="playlist" />
is a list of
<Video 

metrics="recommendation" />
is a list...
<LinkMetrics data="playlist">
<Playlist />
</LinkMetrics>
https://facebook.github.io/
react/docs/context.html
class Video extends Component {
static contextTypes = {
linkMetrics: PropTypes.object
}
render() {
const state = {
metrics...
* redux should be 

an option too
Components
React side effect
Context
Thank you!@jcemer
Thinking metrics on React apps
Thinking metrics on React apps
Upcoming SlideShare
Loading in …5
×

Thinking metrics on React apps

277 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Thinking metrics on React apps

  1. 1. Thinking metrics on
 React apps@jcemer
  2. 2. I work on GloboPlay.
 globo.com
  3. 3. React Router 2.0 & Server side render & Client side user login
  4. 4. 1. How can we 
 track our traffic with Google Analytics?
  5. 5. <PageView 
 location={this.props.location} />
  6. 6. @PureRender class PageView extends Component { static propTypes = { location: PropTypes.object.isRequired } componentDidMount() { const { action, state } = this.props.location trackPageView(action, state) } componentDidUpdate() { /* */ } }
  7. 7. 2. How can we 
 analyse custom data?
  8. 8. Global metrics data:
 user account info & app version
  9. 9. <DocumentMetrics 
 data={{ appVersion: "2.3" }} />
  10. 10. function handleStateChangeOnClient(vars) { setMetricsDataLayer(vars) } export default withSideEffect( reducePropsToState, handleStateChangeOnClient )(DocumentMetrics) https://github.com/ gaearon/react-side-effect
  11. 11. 3. How can we track the user navigation flow?
  12. 12. Playlist Recommendation
  13. 13. Component metrics:
 playlist or
 other lists
  14. 14. <Playlist /> <Recommendation /> <Video />is a list of <Video />is a list of
  15. 15. <Playlist /> <Recommendation /> <Video 
 metrics="playlist" /> is a list of <Video 
 metrics="recommendation" /> is a list of
  16. 16. <LinkMetrics data="playlist"> <Playlist /> </LinkMetrics> https://facebook.github.io/ react/docs/context.html
  17. 17. class Video extends Component { static contextTypes = { linkMetrics: PropTypes.object } render() { const state = { metrics: this.context.linkMetrics } return <Link state={state}>/* ... */</Link> } }
  18. 18. * redux should be 
 an option too
  19. 19. Components React side effect Context
  20. 20. Thank you!@jcemer

×