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
150
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
170
Cache em aplicações web
jcemer
0
270
Aplicações Web - um estudo sobre React
jcemer
1
180
Lapidando o Globo Play
jcemer
1
240
Desenvolvedor mobile precisa aprender Web
jcemer
1
100
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
600
Tudo o que a web (podia ser) ainda será
jcemer
8
590
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
AWS全冠芸人が見た世界 ~資格取得より大切なこと~
masakiokuda
6
6.5k
OPENLOGI Company Profile
hr01
0
63k
ガバクラのAWS長期継続割引 ~次の4/1に慌てないために~
hamijay_cloud
1
540
Winning at PHP in Production in 2025
beberlei
1
250
持続可能なドキュメント運用のリアル: 1年間の成果とこれから
akitok_
1
260
OPENLOGI Company Profile for engineer
hr01
1
25k
[JPOUG Tech Talk Night #12]SQL Plan Management(SPM)とAdaptive Cursor Sharing(ACS)の組み合わせ
oracle4engineer
PRO
2
100
3D生成AIのための画像生成
kosukeito
2
570
もう難しくない!誰でもカンタンDocker入門 〜30分であなたのPCにアプリを立ち上げる〜
devops_vtj
0
160
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
1.1k
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
1
260
エンジニアリングで組織のアウトカムを最速で最大化する!
ham0215
1
260
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
580
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Code Review Best Practice
trishagee
67
18k
Writing Fast Ruby
sferik
628
61k
Music & Morning Musume
bryan
47
6.5k
Building Adaptive Systems
keathley
41
2.5k
Building an army of robots
kneath
305
45k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
550
How to Think Like a Performance Engineer
csswizardry
23
1.5k
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