Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Thinking metrics on React apps
Search
Jean Carlo Emer
October 27, 2016
Technology
0
110
Thinking metrics on React apps
Jean Carlo Emer
October 27, 2016
Tweet
Share
More Decks by Jean Carlo Emer
See All by Jean Carlo Emer
Web & Mobile
jcemer
1
150
Cache em aplicações web
jcemer
0
240
Aplicações Web - um estudo sobre React
jcemer
1
150
Lapidando o Globo Play
jcemer
1
230
Desenvolvedor mobile precisa aprender Web
jcemer
1
87
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
570
Tudo o que a web (podia ser) ainda será
jcemer
8
540
Embarque App
jcemer
0
460
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
150
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
140
【基本】データベース設計
oracle4engineer
PRO
2
120
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
430
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
3
590
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
900
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
700
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
1
260
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
250
成長をサポートするピープルマネジメントのやり方
sioncojp
2
230
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
45
9.7k
Building an army of robots
kneath
300
41k
The Cult of Friendly URLs
andyhume
74
5.7k
Building Applications with DynamoDB
mza
88
5.6k
Gamification - CAS2011
davidbonilla
76
4.6k
Fireside Chat
paigeccino
22
2.6k
BBQ
matthewcrist
80
8.8k
How GitHub (no longer) Works
holman
305
140k
Embracing the Ebb and Flow
colly
80
4.2k
Become a Pro
speakerdeck
PRO
12
4.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Transcript
Thinking metrics on React apps @jcemer
I work on GloboPlay. globo.com
None
None
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 } componentDidMount() { const { action, state } = this.props.location trackPageView(action, state) } componentDidUpdate() { /* */ } }
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, handleStateChangeOnClient
)(DocumentMetrics) https://github.com/ gaearon/react-side-effect
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 of
<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: this.context.linkMetrics } return <Link state={state}>/* ... */</Link> } }
* redux should be an option too
Components React side effect Context
Thank you! @jcemer