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
Max out Local LLM in Challenging Environments
sashimimochi
1
110
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1k
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
660
開発パフォーマンスを最大化するための開発体制
ham0215
7
1.1k
いいたいことちゃんという
tkengo
0
230
ルーターでプレゼンする
puhitaku
1
3.3k
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
3.3k
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
180
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
270
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
160
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
190
Featured
See All Featured
Code Review Best Practice
trishagee
56
15k
Writing Fast Ruby
sferik
622
60k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
How to train your dragon (web standard)
notwaldorf
75
5.2k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
How STYLIGHT went responsive
nonsquared
92
4.8k
A better future with KSS
kneath
231
16k
A designer walks into a library…
pauljervisheath
201
23k
Documentation Writing (for coders)
carmenintech
60
4k
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