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
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
94
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
590
Tudo o que a web (podia ser) ainda será
jcemer
8
570
Embarque App
jcemer
0
460
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
2.5Dモデルのすべて
yu4u
2
940
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
120
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
240
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
2
850
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
15
4.1k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
150
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
280
わたしのOSS活動
kazupon
2
300
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
140
分解して理解する Aspire
nenonaninu
2
500
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
260
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
790
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
How STYLIGHT went responsive
nonsquared
98
5.4k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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