User interface engagement heatmaps

Abstract

Methods, systems, and apparatus, including computer programs encoded on a computer storage medium, for generating and presenting engagement heatmaps. In one aspect, a method includes generating and providing, to a client device, an interactive interface that includes a session replay area that presents playback of user interfaces presented during a user session. A detection is made, based on interaction data received from the client device, of user interaction with an interface control for viewing engagement heatmaps. In response to detecting the user interaction with the interface control, playback is paused. The interactive interface is updated to present, for each of two or more user interface elements presented by the given user interface, an engagement heatmap visualization that visually represents a relative quantity of user interactions with the user interface element when the user interface element was presented by the given interface.

1 . (canceled) 
     
     
         2 . A method, comprising:
 generating and providing, to a client device, an interactive interface that includes a session replay area that presents playback of user interfaces presented during a user session;   detecting, based on interaction data received from the client device, user interaction with an interface control for viewing engagement heatmaps;   in response to detecting the user interaction with the interface control,
 determining a structural state of a given user interface presented in the session replay area when the user interaction with the interface control is detected; 
 determining, for each user interface element of a plurality of user interface elements presented by the given user interface, a quantity of user interactions with the user interface element when the user interface element was presented in user interfaces having the same structural state as the given user interface; and 
 updating the interactive interface to present, for each of the plurality of user interface elements presented by the given user interface, an engagement heatmap visualization that visually represents a relationship between the quantities of user interactions with the user interface elements when the user interface elements were presented in user interfaces having the same structural state as the given user interface. 
   
     
     
         3 . The method of  claim 2 , wherein:
 determining the structural state of the given user interface presented in the session replay area when the user interaction with the interface control is detected comprises identifying a Document Object Model (DOM) state of the given user interface; and   determining, for each user interface element of the plurality of user interface elements presented by the given user interface, the quantity of user interactions with the user interface element when the user interface element was presented in user interfaces having the same structural state as the give user interface comprises determining the quantity of user interactions with the user interface element when the user interface element is presented in user interfaces having the DOM state of the given user interface element.   
     
     
         4 . The method of  claim 3 , wherein the given user interface is presented using different DOM states when presented on different types of devices. 
     
     
         5 . The method of  claim 2 , wherein:
 the given user interface element is presented in different locations within the given user interface when presented using different structure states; and   the quantity of user interactions with each user interface element when the user interface element was presented in user interfaces having the same structural state comprises an aggregation of the user interactions with the user interface element when the user interface element was presented in the user interfaces having the same structure state independent of a presentation location of the user interface element.   
     
     
         6 . The method of  claim 2 , wherein the engagement heatmap visualization for each user interface element is presented in a different color than the engagement heatmap visualization for each other user interface element. 
     
     
         7 . The method of  claim 2 , further comprising, in response to detecting the user interaction with the interface control, pausing the playback such that the given user interface that is being presented in the session replay area when the user interaction with the interface control is detected remains visible in the interactive interface while the playback is paused. 
     
     
         8 . The method of  claim 2 , further comprising presenting a color scale comprising, for at least a portion of the plurality of user interface elements, a geometric shape that has a same color as the engagement heatmap visualization for the user interface element, wherein the geometric shapes in the color scale are ordered based on a ranking of the two or more user interface elements, and wherein the user interface elements are ranked based on the quantity of user interactions for each user interface element during a set of sessions under consideration. 
     
     
         9 . The method of  claim 2 , further comprising:
 receiving data identifying a type of user interaction for which to display the relationship between the quantities of user interactions using the user engagement heatmap visualization for each user interface element; and   updating the heatmap visualization for each user interface element based on a quantity of the type of user interaction with the user interface element when the user interface element was presented in user interfaces having the same structural state as the given user interface.   
     
     
         10 . The method of  claim 9 , wherein the type user interaction comprises one or more rage click user interactions. 
     
     
         11 . The method of  claim 9 , wherein the type of user interaction comprises one of an error click that resulted in a user interface error occurring after the user interaction. 
     
     
         12 . A system comprising:
 a data store; and   one or more computers that interact with the data store and execute instructions that cause the one or more computers to perform operations comprising:
 session replay area that presents playback of user interfaces presented during a user session; 
 detecting, based on interaction data received from the client device, user interaction with an interface control for viewing engagement heatmaps; 
 in response to detecting the user interaction with the interface control,
 determining a structural state of a given user interface presented in the session replay area when the user interaction with the interface control is detected; 
 determining, for each user interface element of a plurality of user interface elements presented by the given user interface, a quantity of user interactions with the user interface element when the user interface element was presented in user interfaces having the same structural state as the given user interface; and 
 updating the interactive interface to present, for each of the plurality of user interface elements presented by the given user interface, an engagement heatmap visualization that visually represents a relationship between the quantities of user interactions with the user interface elements when the user interface elements were presented in user interfaces having the same structural state as the given user interface. 
 
   
     
     
         13 . The system of  claim 12 , wherein:
 determining the structural state of the given user interface presented in the session replay area when the user interaction with the interface control is detected comprises identifying a Document Object Model (DOM) state of the given user interface; and   determining, for each user interface element of the plurality of user interface elements presented by the given user interface, the quantity of user interactions with the user interface element when the user interface element was presented in user interfaces having the same structural state as the give user interface comprises determining the quantity of user interactions with the user interface element when the user interface element is presented in user interfaces having the DOM state of the given user interface element.   
     
     
         14 . The system of  claim 13 , wherein the given user interface is presented using different DOM states when presented on different types of devices. 
     
     
         15 . The system of  claim 12 , wherein:
 the given user interface element is presented in different locations within the given user interface when presented using different structure states; and   the quantity of user interactions with each user interface element when the user interface element was presented in user interfaces having the same structural state comprises an aggregation of the user interactions with the user interface element when the user interface element was presented in the user interfaces having the same structure state independent of a presentation location of the user interface element.   
     
     
         16 . The system of  claim 12 , wherein the engagement heatmap visualization for each user interface element is presented in a different color than the engagement heatmap visualization for each other user interface element. 
     
     
         17 . The system of  claim 12 , wherein the operations comprise, in response to detecting the user interaction with the interface control, pausing the playback such that the given user interface that is being presented in the session replay area when the user interaction with the interface control is detected remains visible in the interactive interface while the playback is paused. 
     
     
         18 . The system of  claim 12 , wherein the operations comprise:
 receiving data identifying a type of user interaction for which to display the relationship between the quantities of user interactions using the user engagement heatmap visualization for each user interface element; and   updating the heatmap visualization for each user interface element based on a quantity of the type of user interaction with the user interface element when the user interface element was presented in user interfaces having the same structural state as the given user interface.   
     
     
         19 . The system of  claim 18 , wherein the type user interaction comprises one or more rage click user interactions. 
     
     
         20 . The system of  claim 18 , wherein the type of user interaction comprises one of an error click that resulted in a user interface error occurring after the user interaction. 
     
     
         21 . A non-transitory computer readable medium storing instructions that upon execution by one or more computers cause the one or more computers to perform operations comprising:
 generating and providing, to a client device, an interactive interface that includes a session replay area that presents playback of user interfaces presented during a user session;   detecting, based on interaction data received from the client device, user interaction with an interface control for viewing engagement heatmaps;   in response to detecting the user interaction with the interface control,
 determining a structural state of a given user interface presented in the session replay area when the user interaction with the interface control is detected; 
 determining, for each user interface element of a plurality of user interface elements presented by the given user interface, a quantity of user interactions with the user interface element when the user interface element was presented in user interfaces having the same structural state as the given user interface; and 
 updating the interactive interface to present, for each of the plurality of user interface elements presented by the given user interface, an engagement heatmap visualization that visually represents a relationship between the quantities of user interactions with the user interface elements when the user interface elements were presented in user interfaces having the same structural state as the given user interface.