Event Browser

Problem Statement

Collecting a huge amount of behavioral data: customers view and buy products, add them to their carts and wishlists, search for various terms, browse category pages. They also look at and click on recommendations and ads served by our servers. Hundreds of these events happen every single second.

The data

The template in this repository loads the event stream into the global variable events. It is an array containing event objects.

Some notes on non-trivial fields:

• added_products contains the items currently being added to the cart
• cart contains the current cart contents.
• viewed_products, added_products, purchased_products and cart are list of item info objects. Item infos have the following fields:
  • id: the product ID
  • f: the feature ID. Indicates that the event originated from a recommender box (eg. the user clicked on a recommender box, and then added the item to the cart).
  • p: total price
  • q: quantity
• impressions
  • a list of recommender boxes (features) that was shown to the visitor (eg. RELATED, PERSONAL)
  • each entry contains a list of product IDs (item_impressions)

One event may contain several of the above fields. For example the following event object says that visitor 4F6B6D2E72F75AA7 viewed product 149923 and was presented with a recommendation box containing 6 products.

impressions: Array[1]
  0: Object
    feature_id: "RELATED_CZ"
    item_impressions: Array[6]
      0: "148036"
      1: "143883"
      2: "150371"
      3: "58590"
      4: "79807"
      5: "128128"
timestamp: "20130820T100002Z"
viewed_products: Array[1]
  0: Object
    id: "149923"
visitor_id: "4F6B6D2E72F75AA7"

Use the getImage global function to get an image thumbnail representing the product. This will be helpful to actually show the data, not just some meaningless IDs. Again, let's pretend you get the actual product metadata from a live service.

> getImage(events[0].viewed_products[0].id)
"http://89130063.r.cdn77.net/data/tovar/_m/149/m149923.jpg"

Task 1 - Show the event stream

Build a page that shows the event stream line-by-line, just as if it were a Twitter feed. Show the most recent event first. The actual display is up to you, but you should show us everything you can about a particular event (timestamp, visitor ID, event type(s), products that the visitor interacted with, at least the first few products that we recommended to the user, price & quantity in case of a purchase/add-to-cart). On the other hand, the representation of an event should be concise, we want to see as many events as possible on a single screen.

Events that are generated directly from recommendation boxes (iteminfo.f != null) should really stand out visually.

Pagination facility.

Task 2 - Filter individual visitors

Eyeballing the event stream. Clicking on a visitor ID in the event stream should show events from that particular visitor, and everything else should be filtered out.

Task 3 - Filter individual products

Use product IDs. When lick on a product ID, should see all the events that have anything to do with that particular product (and nothing else).

Task 4 - Top visitors

Having the ability to filter individual visitors, find the really interesting visitors.

Little statistics page (if possible within the application, without a page load) that summarizes some interesting metrics of the top 20 visitors:

• total number of events generated by the visitor
• number of views
• total value of purchased products
• number of impressions shown to the user
• number of clicks (views where iteminfo.f != null)
• click-through-rate (number of clicks divided by the number of impressions)

Additional notes/hints

• Avoided time with visuals. The tool should look OK, but above all else, it should be functional. A minimalist approach that doesn't hurt our eyes should be fine.