Replaying user interactions from Keen IO data

At Zoetrope we create engaging product photography allowing viewers to rotate and interact with products on ecommerce sites. One area we have been working on is analytics for the image viewer embedded in our client’s sites. We wanted to see how users actually behave while viewing a product; whether they rotate the image, if they zoom in, which frame they spend the most time on and so on. This information will allow us to improve the viewer and let’s our clients see what parts of products their users are interacting with most. You can see an example of our work below:

Replaying user interactions

We use Keen IO to collect events from the Zoetrope image viewer, which offers us a very flexible system to retreive data and see how people interact with the viewer. The Zoetrope Engage™ viewer contains some analytics code which sends off events for all interactions the user makes with the viewer, such as rotating the product or zooming in and moving around. The data we collect is sufficient that we can recreate a users interactions with the viewer from the data stored in Keen IO. We pulled together a few lines of python to download a particular session and store it in a JSON file. Some timestamp manipulations are done to create time deltas which is useful when we are replaying the events: From this, you will end up with up to around 100 events for a long session, in a long array. This completely describes what the user did when looking at the viewer, without using mouse data at all, so the data is identical between touch interfaces or regular mouse interfaces. In order to actually replay the data, we decided that the easiest method was to map the event data in the JSON file (such as a zoom event), to mouse actions which can be triggered on the zoetrope viewer using jquery.simulate.js (http://wingkaiwan.com/2012/09/23/triggering-mouse-events-with-jquery-simulate-when-testing-in-javascript/). After this, it’s just a case of looping over the array and triggering appropriate mouse events from the array of events for the session in question. Here’s a demo of a user session being replayed:

Conclusion

Replaying user’s sessions really brings our data to life for the benefit of our clients and will allow them to make better decisions about what aspects of a product need to be explained more, what views should be the primary view and many other business decisions which we’ve probably not even thought of yet! At present this is still in the prototyping phase, but it is something that will be made available to our clients in the near future. The next steps will be to look at how we can interpret what parts of a photo people are most interested in and create aggregate views and heatmaps showing which views customers are most interested in.