2011.7月在d2的session keynote, 用户行为在前端来说是第一次讲, 这次是联合演讲的方式, taobao的两位同学先讲,随后,我主要讲了一下做marmot的原理,设计框架,和部分实现细节.

1. user
behavior
system
marmot you
http://www.matmotu.com
work @ youa WED team
http://t.sina.com/rank

6. !

8. marmot

16. 100

18. flash
V.S
php
clickheat canvas

19. DOM
cpu dom
flash
dom
php clickheat
dom
canvas html5
DOM

21. referer+url
client js marmot server
marmotID
Sid+Mid url match
sessionID
client log
seq=0
server log
seq=n
processor API

22. mousemove mousedown target
mouseup click event type
dblclick focus timestamp
scroll keydown custom data

23. •
•
•
• API
•

25. O=(0,0)
1024*768 1280*800
O=(document.documentElement.scrollWidth/2|0,0)
align = middle
relative coordinate

26. DOM path
MDP
Marmot DOM Path

27. body
div#container(HTMLElement)
div(HTMLElement) div(HTMLElement)
Marmot.getPath
path=[div.container, ~1div]
path.replace(/~(d+)([^~]+)/gi,
'~$2:nth-of-type($1)')
.replace(/~/gi, '>')
.replace(/./gi, '#');
selector=’div#container>div:nth-of-type(1)’

29. • marmot.log.js click
• hover MDP •
• selector MDP •
•
• HDFS/
•

30. target
event type
timestamp
custom data

31. move
start
mouse mouse delta
move - move = hover
mouse mouse
down + up = click
mouse mouse mouse delta
down + move + up = select

35. body
x=300
div#container(HTMLElement)
y=100
div(HTMLElement) div(HTMLElement)
mdp selector = ‘div#container>div:nth-of-type(1)’
relative coordinate x = event.x; //300
relative coordinate y = event.y; //100
var el = document.querySelector(mdp selector); //
var xy = Dom.getXY(el);
var corrective x = xy[0] + relative coordinate x;
var corrective y = xy[1] + relative coordinate y;

37. 1024px
1px*1px
768px
Math.floor(document.documentElement.scrollWidth/n)
9px*9px

38. ...

39. ...

40. AB test

42. •A a->b->c->d->...
•B c->b->d->a->...
•C a->b->c->a->...
•D a->c->b->a->...
a->b->c->a

43. key path
['', 'input.rd_fv_30', 'input.phone_number', 'button.btn-charge']
similar path
['', 'input.phone_number', 'button.btn-charge', 'input.PassInputPassword0']
['', 'input.rd_fv_30', 'input.phone_number', 'button.btn-charge', 'input.PassInputUsername0',
'input.PassInputPassword0']
['', 'input.phone_number', 'button.btn-charge', 'input.PassInputPassword0']
['', 'input.rd_ct_slow', 'input.phone_number', 'button.btn-charge', 'div.pdc-
wrap~2div~1div~1div~1a', '']
['', 'input.phone_number']
['', 'input.phone_number', 'button.btn-charge', 'div.user_register_ctn~1h4',
'button.user_register_btn']
['', 'input.rd_fv_50', 'input.phone_number', 'input.phone_number', 'input.phone_number',
'button.btn-charge']
['', 'input.phone_number', 'button.btn-charge', 'input.PassInputPassword0',
'form.PassFormlogin~1fieldset~1p~1button', 'form.PassFormlogin~1fieldset~1p~1button']

44. PV

45. Q: ,

47. •
•
•
• 80

48. marmot v2 design UDC

52. ABtest
hadoop
framework
(HDFS)
beta
publish
marmot
WPO

53. thanks