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
110
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
240
Aplicações Web - um estudo sobre React
jcemer
1
150
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
570
Tudo o que a web (podia ser) ainda será
jcemer
8
540
Embarque App
jcemer
0
460
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
130
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
Building Dashboards as a Hobby
egmc
0
180
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
Databricks における 『MLOps』
databricksjapan
2
170
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
14k
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
520
Cracking the KubeCon CfP
inductor
2
240
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
380
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Atom: Resistance is Futile
akmur
259
25k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Building an army of robots
kneath
300
41k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
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