Logging user interactions on a webpage is an integral part of user research. This is a barebones tutorial to log events such as mouse clicks, mouse hovers, and visibility changes on a webpage being tested.
For the purposes of this tutorial, we will record user interactions only on pre-defined HTML elements on our webpage, e.g., some specific images, buttons, paragraphs, etc. We call these HTML elements as AOIs, or Areas of Interest. The final log produced will contain two items:
aoi_dtl is an object of objects, containing the details of each AOIs, and aggregated interaction events (total…