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
130
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
160
Cache em aplicações web
jcemer
0
270
Aplicações Web - um estudo sobre React
jcemer
1
170
Lapidando o Globo Play
jcemer
1
230
Desenvolvedor mobile precisa aprender Web
jcemer
1
94
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
590
Tudo o que a web (podia ser) ainda será
jcemer
8
570
Embarque App
jcemer
0
460
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
600
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.5k
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
170
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
150
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
840
Windows の新しい管理者保護モード
murachiakira
0
170
短縮URLをお手軽に導入しよう
nakasho
0
110
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
430
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
490
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.5k
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
260
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
4 Signs Your Business is Dying
shpigford
182
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Gamification - CAS2011
davidbonilla
80
5.1k
KATA
mclloyd
29
14k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
490
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Adopting Sorbet at Scale
ufuk
74
9.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
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