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

Понравилась презентация – покажи это...

Слайд 0

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

Слайд 1

OTTO - one of the largest eCommerce websites in Germany 2

Слайд 2


Слайд 3

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

Слайд 4


Слайд 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

Слайд 6

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

Слайд 7


Слайд 8

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

Слайд 9

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

Слайд 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

Слайд 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

Слайд 12

Unifed business concept is essential 13

Слайд 13

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

Слайд 14

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

Слайд 15


Слайд 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

Слайд 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

Слайд 18

Reduce Front End complexity 19

Слайд 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

Слайд 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

Слайд 21

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

Слайд 22

Smarter onClick binding 23

Слайд 23

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

Слайд 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

Слайд 25

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

Слайд 26

Less data = More information 27

Слайд 27


Слайд 28

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

Слайд 29

Tracking visible promotions in the context of cinemas 30

Слайд 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

Слайд 31

Monitoring – as important as Testing 32

Слайд 32


Слайд 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

Слайд 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

Слайд 35