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
130
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
160
Cache em aplicações web
jcemer
0
270
Aplicações Web - um estudo sobre React
jcemer
1
170
Lapidando o Globo Play
jcemer
1
230
Desenvolvedor mobile precisa aprender Web
jcemer
1
94
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
590
Tudo o que a web (podia ser) ainda será
jcemer
8
570
Embarque App
jcemer
0
460
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
140
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5.2k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.3k
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
130
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.3k
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
240
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
720
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
610
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.7k
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
170
自動テストの世界に、この5年間で起きたこと
autifyhq
10
8.5k
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
100
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
What's in a price? How to price your products and services
michaelherold
244
12k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Unsuck your backbone
ammeep
669
57k
Facilitating Awesome Meetings
lara
52
6.2k
Statistics for Hackers
jakevdp
797
220k
Designing for Performance
lara
604
68k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Agile that works and the tools we love
rasmusluckow
328
21k
Faster Mobile Websites
deanohume
306
31k
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