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
580
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
690
こんなデータマートは嫌だ。どんな? / waiwai-data-meetup-202504
shuntak
6
1.9k
“パスワードレス認証への道" ユーザー認証の変遷とパスキーの関係
ritou
1
560
CBになったのでEKSのこともっと知ってもらいたい!
daitak
1
160
Devinで模索する AIファースト開発〜ゼロベースから始めるDevOpsの進化〜
potix2
PRO
7
3.2k
DuckDB MCPサーバーを使ってAWSコストを分析させてみた / AWS cost analysis with DuckDB MCP server
masahirokawahara
0
1.2k
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
1
330
フロントエンドも盛り上げたい!フロントエンドCBとAmplifyの軌跡
mkdev10
2
270
LangChainとLangGiraphによるRAG・AIエージェント実践入門「10章 要件定義書生成Alエージェントの開発」輪読会スライド
takaakiinada
0
140
20250408 AI Agent workshop
sakana_ai
PRO
15
3.9k
開発視点でAWS Signerを考えてみよう!! ~コード署名のその先へ~
masakiokuda
3
160
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう!
o11yfes2023
0
150
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A designer walks into a library…
pauljervisheath
205
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Faster Mobile Websites
deanohume
306
31k
Six Lessons from altMBA
skipperchong
27
3.7k
Scaling GitHub
holman
459
140k
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