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
250
Desenvolvedor mobile precisa aprender Web
jcemer
1
110
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
20250807_Kiroと私の反省会
riz3f7
0
140
Kiroから考える AIコーディングツールの潮流
s4yuba
4
660
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.7k
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
300
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
250
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
3
210
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
400
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
340
Claude Codeは仕様駆動の夢を見ない
gotalab555
11
1.9k
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
8
2k
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
890
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
Embracing the Ebb and Flow
colly
86
4.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Pragmatic Product Professional
lauravandoore
36
6.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Writing Fast Ruby
sferik
628
62k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Git: the NoSQL Database
bkeepers
PRO
431
65k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Rails Girls Zürich Keynote
gr2m
95
14k
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