Thinking metrics on React apps
0 likes355 views
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
- 5. React Router 2.0 & Server side render & Client side user login
- 6. 1. How can we track our traffic with Google Analytics?
- 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?
- 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
- 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