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
120
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
580
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
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
5
1k
Assisted reorganization of data structures
ennael
PRO
0
240
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
4
150
山手線一周のパフォーマンス改善
suzukahr
0
120
DenoでもViteしたい!インポートパスのエイリアスを指定してラクラクアプリ開発
bengo4com
1
1.8k
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
Pythonを活用したLLMによる構造的データ生成の手法と実践
brainpadpr
3
280
コード✕AIーソフトウェア開発者のための生成AI実践入門~
yuhattor
2
420
Oracle Database 23ai 新機能#4 Rolling Maintenance
oracle4engineer
PRO
0
120
Rubyはなぜ「たのしい」のか? / Why is Ruby a programmers' best friend? #tqrk15
expajp
4
1.8k
Semantic Kernel の Agent 機能試してみた!
okazuki
1
120
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
4
720
Featured
See All Featured
RailsConf 2023
tenderlove
28
840
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Web Components: a chance to create the future
zenorocha
310
42k
Design by the Numbers
sachag
278
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
270
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
360
19k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
A better future with KSS
kneath
236
17k
How to Ace a Technical Interview
jacobian
275
23k
Code Reviewing Like a Champion
maltzj
519
39k
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