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
140
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
170
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
580
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
130
非エンジニアにも伝えるメールセキュリティ / Email security for non-engineers
ykanoh
13
3.8k
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
6
700
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
1
180
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
560
スケールアップ企業のQA組織のバリューを最大限に引き出すための取り組み
tarappo
4
890
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
19
18k
ドメインイベントを活用したPHPコードのリファクタリング
kajitack
2
1.1k
コード品質向上で得られる効果と実践的取り組み
ham0215
2
200
17年のQA経験が導いたスクラムマスターへの道 / 17 Years in QA to Scrum Master
toma_sm
0
370
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
130
一人QA時代が終わり、 QAチームが立ち上がった話
ma_cho29
0
280
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
36
1.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Done Done
chrislema
183
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
YesSQL, Process and Tooling at Scale
rocio
172
14k
Music & Morning Musume
bryan
46
6.4k
Building Your Own Lightsaber
phodgson
104
6.3k
Docker and Python
trallard
44
3.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Typedesign – Prime Four
hannesfritz
41
2.6k
How to Ace a Technical Interview
jacobian
276
23k
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