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.

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

5. 5
TRACKING
=
VALIDATED LEARNING
=
€€€

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

8. 8
PROMOTIONS AND CINEMAS

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/

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

16. 16
OUR 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

19. 19
Reduce Front End
complexity

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

23. 23
Smarter onClick
binding

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/