Track Your User Actions: Learnings From a Aassive E-commerce Site

If you like this presentation – show it...

Slide 0

XConf 2015 TRACK YOUR USER ACTIONS Learnings from one of Germany's largest eCommerce websites @anastasia_a_b

Slide 1

OTTO - one of the largest eCommerce websites in Germany 2

Slide 2


Slide 3

OTTO has ~1M visitors/day and ~2 orders/second 4

Slide 4


Slide 5

Tracking ELCH Auth After sales User Order P13N Product Search and navi Shop pages Shop ofce ORGANIZATION AT OTTO Frontend Integration Backend Integration 6

Slide 6

MY TEAM - P13N ● My team – personalization. We deliver personalized content in various formats ● Techstack: Java, plain javascript, FreeMarker Templates, SASS and etc. 7

Slide 7


Slide 8

● Promotions = individual products ● Cinemas = elements in which the promotions are served 9

Slide 9

How do we track ● View tracking (what does the user see) vs Click tracking (what the user clicks on) – 10

Slide 10

am te rty rd pa 3 or nd ve ng ki TO ac OT Tr @ P13n Via AJAX request { "key1":"[info]", . "key2":"[info]", Team 2 Team 3 Team 4 Team 5 "key3":"[info]", "key4":"[info]", "key5":"[info]"} 11

Slide 11

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

Slide 12

Unifed business concept is essential 13

Slide 13

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

Slide 14

eCommerce Gaming Social Media http://snowplowanalytics.com/blog/2013/08/12/towards-universal-event-analytics-building-an-event-grammar/ 15

Slide 15


Slide 16

promo_ promo_ promo_ promo_ promo_ Type Content Source Position FilledSlots promo_ Activity Type of Promotion # Source of Position cinema Url/ promotions the within the View/Click in the articleId & (expand/ promotion cinema cinema etc. slide) 17

Slide 17

promo_ promo_ promo_ promo_ promo_ Type Content Source Position FilledSlots promo_ Activity ● 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 b e analyzed in the same way 18

Slide 18

Reduce Front End complexity 19

Slide 19

SLIMMER JS LAYER Tracking Adapter Tracking Adapter Tracking Adapter JS Object JS Object JS Object BE Object BE Object BE Object Tracking Adapter VS JS Object BE Object JS Object BE Object JS Object BE Object ● 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 20

Slide 20

● Trackable information available in the BE is stored inside the page's html in a single div element {"cinemaType":"slidingCinema","promotions": [{"type":"promotion","content":"01","source":"auto"}, {"type":"promotion","content":"02","source":"auto"}]} ● Dynamic content based on the device/size of the browser window = certain information can only come from the FE 21

Slide 21

Fewer code paths in the FE layer = fewer UI tests = real testing pyramid 22

Slide 22

Smarter onClick binding 23

Slide 23

BEFORE $clickablePromotionsInACinema = $CinemaContainer.fnd("promotionClass"); $cclickablePromotionsInACinem.each(function (_, element) { $(element).click(function (event) { //send the tracking request });}); 24

Slide 24

NOW ● Each trackable product is a link that is distinguished in the html by the "data-tracking-id" attribute $clickablePromotions = $PageContainer.fnd("["data-tracking-id"][href]"); $clickablePromotions.each(function (_, element) { $(element).click(function (event) { //send the tracking request });}); 25

Slide 25

1. Unifed business concept is essential 2. Reduce FE complexity 3. There are smart ways to generalize click binding 26

Slide 26

Less data = More information 27

Slide 27


Slide 28

● Responsive website → less content shown on smaller displays VS 29

Slide 29

Tracking visible promotions in the context of cinemas 30

Slide 30

{"promo_Position":"1|2”, {"promo_Position":"1|2|3|4|5|6|7", "promo_Activity":"view|view”, "promo_Activity":"view|view|view|view|view|view|view", "promo_Content":"123|456", "promo_Type":"Sliding|Sliding", "promo_FilledSlots":"7|7", "promo_Source":"auto|auto”} VS "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”} ● 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 31

Slide 31

Monitoring – as important as Testing 32

Slide 32


Slide 33

CONCLUSION ● Unifed business concept is essential ● Reduce FE complexity ● There are smart ways to generalize click binding ● Less = More ● Monitoring – as important as Testing 34

Slide 34

THANKS Further readings and sources: http://otto.de http://snowplowanalytics.com/blog/2013/08/12/towardsuniversal-event-analytics-building-an-event-grammar/ For questions or suggestions: Anastasia Belozertseva abelozer@thoughtworks.com @anastasia_a_b 35

Slide 35