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
150
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
180
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
590
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
260
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう!
o11yfes2023
0
190
4/17/25 - CIJUG - Java Meets AI: Build LLM-Powered Apps with LangChain4j (part 2)
edeandrea
PRO
0
120
Spring Bootで実装とインフラをこれでもかと分離するための試み
shintanimoto
7
880
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
2
390
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
740
ドキュメント管理の理想と現実
kazuhe
1
220
AIと共に乗り越える、 入社後2ヶ月の苦労と学習の軌跡
sai_kaneko
0
110
OpenLane-V2ベンチマークと代表的な手法
kzykmyzw
0
110
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
330
Winning at PHP in Production in 2025
beberlei
1
130
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
130
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
Faster Mobile Websites
deanohume
306
31k
Code Review Best Practice
trishagee
67
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
530
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Site-Speed That Sticks
csswizardry
5
500
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