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
260
Aplicações Web - um estudo sobre React
jcemer
1
160
Lapidando o Globo Play
jcemer
1
230
Desenvolvedor mobile precisa aprender Web
jcemer
1
89
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
590
Tudo o que a web (podia ser) ainda será
jcemer
8
550
Embarque App
jcemer
0
460
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
430
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
150
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
490
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
440
Platform Engineering for Software Developers and Architects
syntasso
1
520
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
540
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
180
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
8.9k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Unsuck your backbone
ammeep
668
57k
Done Done
chrislema
181
16k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Statistics for Hackers
jakevdp
796
220k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing for Performance
lara
604
68k
Ruby is Unlike a Banana
tanoku
97
11k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
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