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
120
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
150
Cache em aplicações web
jcemer
0
250
Aplicações Web - um estudo sobre React
jcemer
1
160
Lapidando o Globo Play
jcemer
1
230
Desenvolvedor mobile precisa aprender Web
jcemer
1
87
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
580
Tudo o que a web (podia ser) ainda será
jcemer
8
550
Embarque App
jcemer
0
460
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
740
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
MySQLのロックの種類とその競合
yoku0825
6
1.6k
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
AWSでRAGを作る法方
sonoda_mj
1
140
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
It's Worth the Effort
3n
181
27k
Code Reviewing Like a Champion
maltzj
517
39k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Designing with Data
zakiwarfel
96
5k
Thoughts on Productivity
jonyablonski
64
4.1k
Debugging Ruby Performance
tmm1
71
11k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Embracing the Ebb and Flow
colly
81
4.3k
Design by the Numbers
sachag
277
18k
Statistics for Hackers
jakevdp
792
220k
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