TRACK YOUR USER ACTIONS

Learnings from one of Germany's largest eCommerce websites

X C o n f 2 0 1 5

@anastasia_a_b

2

OTTO

- one of the largest

eCommerce websites in

Germany

3

4

OTTO has ~1M ~1M visitors/day and

~2 orders/second~2 orders/second

5

TRACKING

=

VALIDATED LEARNING

=

€€€

6

ORGANIZATION AT OTTO

Frontend Integration

Shop

of

ce

Backend Integration

Shop

pag

es

Sear

ch a

nd n

avi

Prod

uct

P13N

Ord

er

Use

r

Aft

er s

ales

Trac

king

Aut

h

ELCH

7

● My team – personalization. We deliver personalized content in various formats

● Techstack: Java, plain javascript, FreeMarker Templates, SASS and etc.

MY TEAM - P13N

8

PROMOTIONS AND CINEMAS

9

● Promotions = individual products

● Cinemas = elements in which the promotions are served

10

How do we track

● View tracking (what does the user see) vs Click tracking (what the user clicks on) –

11

.

{ "key1":"[info]","key2":"[info]","key3":"[info]","key4":"[info]","key5":"[info]"}

P13n

Team 2

Team 3

Team 4

Team 5

Tracking team

@ OTTO3rd party

vendor

Via AJAX request

REFACTORING OVER LAST 6 MONTHS

Goal: come up with a generic tracking architecture that will unify the concept of tracking for all of the content we deliver

13

Unifed business

concept is essential

14

Building the event grammar

http://snowplowanalytics.com/blog/2013/08/12/towards-universal-event-analytics-building-an-event-grammar/

15

eCommerce

Gaming

Social Mediahttp://snowplowanalytics.com/blog/2013/08/12/towards-universal-event-analytics-building-an-event-grammar/

16

OUR EVENT GRAMMAR

17

promo_Content

promo_Source

promo_Position

promo_FilledSlots

promo_Type

promo_Activity

Promotion Url/

articleId & etc.

Source of the

promotion

Position within the

cinema

#promotions

in the cinema

Type of cinema

(expand/slide)

View/Click

18

● Before: promo_Content could mean product, cinema, or have no meaning at all

● promo_Position could mean position within the cinema or order on the page

● Bloated code with diferent meanings for all the keys

● Promotions inside diferent cinemas could not be analyzed in the same way

promo_Content

promo_Source

promo_Position

promo_FilledSlots

promo_Type

promo_Activity

19

Reduce Front End

complexity

20

SLIMMER JS LAYER

BE Object BE ObjectBE Object BE Object BE Object BE Object

JS Object JS ObjectJS Object

Tracking Adapter

Tracking Adapter

Tracking Adapter

Tracking Adapter

JS Object JS ObjectJS ObjectVS

● Example: each cinema had specifc implementation for each of the keys

● There was a lot of DOM traversal as in the case for # of total promotions

21

● Trackable information available in the BE is stored inside the page's html in a single div element

● Dynamic content based on the device/size of the browser window = certain information can only come from the FE

{"cinemaType":"slidingCinema","promotions":[{"type":"promotion","content":"01","source":"auto"},{"type":"promotion","content":"02","source":"auto"}]}

22

Fewer code paths in the FE layer

= fewer UI tests

= real testing pyramid

23

Smarter onClick

binding

24

BEFORE

$clickablePromotionsInACinema = $CinemaContainer.fnd("promotionClass");

$cclickablePromotionsInACinem.each(function (_, element) { $(element).click(function (event) {

//send the tracking request });});

25

$clickablePromotions = $PageContainer.fnd("["data-tracking-id"][href]");

$clickablePromotions.each(function (_, element) { $(element).click(function (event) {

//send the tracking request });});

● Each trackable product is a link that is distinguished in the html by the "data-tracking-id" attribute

NOW

26

1. Unifed business concept is essential

2. Reduce FE complexity

3. There are smart ways to generalize click

binding

27

Less data = More

information

28

29

● Responsive website → less content shown on smaller

displays

VS

30

Tracking visible promotions

in the context of cinemas

31

● More precise KPIs: products that were viewed as less performant could actually be out of the user's eye

● Less data sent on mobile devices – less trafc on a mobile device

{"promo_Position":"1|2”,

"promo_Activity":"view|view”,

"promo_Content":"123|456",

"promo_Type":"Sliding|Sliding",

"promo_FilledSlots":"7|7",

"promo_Source":"auto|auto”}

{"promo_Position":"1|2|3|4|5|6|7",

"promo_Activity":"view|view|view|view|view|view|view",

"promo_Content":"123|456|789|001|002|003|004",

"promo_Type":"Sliding|Sliding|Sliding|Sliding|Sliding|Sliding|Sliding",

"promo_FilledSlots":"7|7|7|7|7|7|7",

"promo_Source":"auto|auto|auto|auto|auto|auto|auto”}

VS

32

Monitoring –

as important as

Testing

33

34

● Unifed business concept is essential

● Reduce FE complexity

● There are smart ways to generalize click

binding

● Less = More

● Monitoring – as important as Testing

CONCLUSION

35

THANKS

For questions or suggestions:Anastasia Belozertseva

abelozer@thoughtworks.com@anastasia_a_b

Further readings and sources:http://otto.de

http://snowplowanalytics.com/blog/2013/08/12/towards-universal-event-analytics-building-an-event-grammar/