Track your user actions - learnings from a massive E-commerce site
•
46 likes•2,806 views
If done correctly, tracking user activity can be a powerful software quality tool. It can give us invaluable insights on what promotions and products are more popular in relation to others, what the preferences of the user are, and what features turn out to be more or less successful and performant. I am currently a part of building one of the biggest e-commerce websites in Germany. Each team is responsible for collecting all the tracking data for the features they develop. My team’s approach to tracking has gone through multiple iterations and learnings that I would like to share, including answers we found to challenges like how to tackle code complexity in the frontend layer, where to store the tracking data, how to integration test the data collection, or how to find a common language between business analysts and software designers.
Recommended
More Related Content
Viewers also liked
Viewers also liked (19)
Similar to Track your user actions - learnings from a massive E-commerce site
Similar to Track your user actions - learnings from a massive E-commerce site (20)
More from Thoughtworks
More from Thoughtworks (20)
Recently uploaded
Recently uploaded (20)
Track your user actions - learnings from a massive E-commerce site
- 1. 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. 2 OTTO - one of the largest eCommerce websites in Germany
- 3. 3
- 4. 4 OTTO has ~1M~1M visitors/day and ~2 orders/second~2 orders/second
- 6. 6 ORGANIZATION AT OTTO Frontend Integration Shopofce Backend Integration Shoppages Searchandnavi Product P13N Order User Aftersales Tracking Auth ELCH
- 7. 7 ● My team – personalization. We deliver personalized content in various formats ● Techstack: Java, plain javascript, FreeMarker Templates, SASS and etc. MY TEAM - P13N
- 9. 9 ● Promotions = individual products ● Cinemas = elements in which the promotions are served
- 10. 10 How do we track ● View tracking (what does the user see) vs Click tracking (what the user clicks on) –
- 11. 11 . { "key1":"[info]", "key2":"[info]", "key3":"[info]", "key4":"[info]", "key5":"[info]"} P13n Team 2 Team 3 Team 4 Team 5 Tracking team @ OTTO3 rd party vendor Via AJAX request
- 12. 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. 13 Unifed business concept is essential
- 14. 14 Building the event grammar http://snowplowanalytics.com/blog/2013/08/12/towards-universal-event-analytics-building-an-event-grammar/
- 17. 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. 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
- 20. 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. 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. 22 Fewer code paths in the FE layer = fewer UI tests = real testing pyramid
- 24. 24 BEFORE $clickablePromotionsInACinema = $CinemaContainer.fnd("promotionClass"); $cclickablePromotionsInACinem.each(function (_, element) { $(element).click(function (event) { //send the tracking request });});
- 25. 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. 26 1. Unifed business concept is essential 2. Reduce FE complexity 3. There are smart ways to generalize click binding
- 27. 27 Less data = More information
- 28. 28
- 29. 29 ● Responsive website → less content shown on smaller displays VS
- 30. 30 Tracking visible promotions in the context of cinemas
- 31. 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. 32 Monitoring – as important as Testing
- 33. 33
- 34. 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. 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/