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
180
Cache em aplicações web
jcemer
0
280
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
600
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
260
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
Welcome to the LLM Club
koic
0
130
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
400
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
13
4.2k
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
2
1.2k
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
140
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
550
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
2
220
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
110
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
100
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Side Projects
sachag
455
42k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Facilitating Awesome Meetings
lara
54
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Docker and Python
trallard
44
3.4k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
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