O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Thinking metrics on React apps

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Session 3 android study jam
Session 3 android study jam
Carregando em…3
×

Confira estes a seguir

1 de 22 Anúncio

Thinking metrics on React apps

Baixar para ler offline

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.

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.

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Semelhante a Thinking metrics on React apps (20)

Anúncio

Mais recentes (20)

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

×