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
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
440
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.8k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
550
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
120
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
870
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
競技としてのKaggle、役に立つKaggle
yu4u
5
2.1k
Building Dashboards as a Hobby
egmc
0
300
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
390
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
260
Featured
See All Featured
Statistics for Hackers
jakevdp
789
220k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Unsuck your backbone
ammeep
663
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Bash Introduction
62gerente
604
210k
Code Reviewing Like a Champion
maltzj
514
39k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Designing for Performance
lara
601
67k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
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