'

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


Слайд 3

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


Слайд 4

TRACKING = VALIDATED LEARNING = €€€ 5


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

PROMOTIONS AND CINEMAS 8


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

OUR EVENT GRAMMAR 16


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


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


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


×

HTML:





Ссылка: