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
160
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
620
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
3
1.3k
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
140
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
1
320
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.3k
Node.js 2025: What's new and what's next
ruyadorno
0
950
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
310
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
120
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
120
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
440
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
800
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
7
4.5k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Making Projects Easy
brettharned
120
6.4k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Site-Speed That Sticks
csswizardry
13
920
Building Adaptive Systems
keathley
44
2.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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