Download to read offline
Uploaded byJean Carlo Emer
Thinking metrics on React apps
The document discusses tracking and analyzing traffic in React applications using Google Analytics, detailing methods for measuring page views and user navigation flow. It emphasizes leveraging global metrics and custom data to enhance user experience and discusses integration with tools like Redux and React Side Effect. Additionally, it provides code snippets for implementation and references to relevant resources.
Thinking metrics on React apps
- 1.
- 2.
- 5. React Router 2.0 &Server side render & Client side user login
- 6. 1. How canwe track our traffic with Google Analytics?
- 7.
- 8. @PureRender class PageView extendsComponent { static propTypes = { location: PropTypes.object.isRequired } componentDidMount() { const { action, state } = this.props.location trackPageView(action, state) } componentDidUpdate() { /* */ } }
- 9. 2. How canwe analyse custom data?
- 10. Global metrics data: user accountinfo & app version
- 11. <DocumentMetrics data={{ appVersion:"2.3" }} />
- 12. function handleStateChangeOnClient(vars) { setMetricsDataLayer(vars) } exportdefault withSideEffect( reducePropsToState, handleStateChangeOnClient )(DocumentMetrics) https://github.com/ gaearon/react-side-effect
- 13. 3. How canwe track the user navigation flow?
- 14.
- 15.
- 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.
- 19. class Video extendsComponent { static contextTypes = { linkMetrics: PropTypes.object } render() { const state = { metrics: this.context.linkMetrics } return <Link state={state}>/* ... */</Link> } }
- 20. * redux shouldbe an option too
- 21.
- 22.