Thinkingmetrics on React apps@jcemer
View Slide
I work onGloboPlay. globo.com
React Router 2.0& Server siderender & Clientside user login
1. How can we track our trafficwith GoogleAnalytics?
location={this.props.location} />
@PureRenderclass PageView extends Component {static propTypes = {location: PropTypes.object.isRequired}componentDidMount() {const { action, state } = this.props.locationtrackPageView(action, state)}componentDidUpdate() { /* */ }}
2. How can we analyse customdata?
Globalmetrics data: user account info& app version
data={{ appVersion: "2.3" }} />
function handleStateChangeOnClient(vars) {setMetricsDataLayer(vars)}export default withSideEffect(reducePropsToState,handleStateChangeOnClient)(DocumentMetrics)https://github.com/gaearon/react-side-effect
3. How can wetrack the usernavigation flow?
PlaylistRecommendation
Componentmetrics: playlist or other lists
is a list ofis a list of
metrics="playlist" />is a list ofmetrics="recommendation" />is a list of
https://facebook.github.io/react/docs/context.html
class Video extends Component {static contextTypes = {linkMetrics: PropTypes.object}render() {const state = {metrics: this.context.linkMetrics}return /* ... */}}
* redux should be an option too
ComponentsReact side effectContext
Thank you!@jcemer