I figured I would share a solution that allowed me to create a heat map of all clicks in an AxShare prototype. I couldn’t find an existing answer in this forum so hopefully someone else will find this valuable.
Just to give people context of why I needed this… I’m working on a prototype for a kiosk application which I plan to test in a real-world unmoderated physical environment over the span of a week. As such, the prototype is higher fidelity than I would normally build, plus it was built as a single pageview to best replicate a kiosk application without any page reloads.
The first step is to create an account with any of the popular heat mapping services out there. I looked into Hotjar and Sumome, but unfortunately I wasn’t able to initiate the click tracking for my AxShare prototype (or maybe I simply couldn’t figure it out). However, I was able to easily get the click tracking working using Inspectlet which is what the rest of these instructions are based on. Keep in mind most of these services have a fee but they’re pretty inexpensive and reasonable.
The second step is to create a plug-in for the AxShare prototype that contains the special javascript code you received from the heat mapping service. Paste the code into the newly created plug-in, and select all the pages you want this code to live on (and remember to select the Header option for where it will be placed on pages).
If you have a standard multi-page prototype, you can pretty much stop here since everything should be working, and the dashboard on the heat mapping services should start tracking all clicks on all pages. Depending on which heat mapping service you choose, you can also get video recordings of each user session which I’ve found to be extremely helpful in my unmoderated situation.
The third step applies if you are using a single pageview format (like I am) or if your page(s) have different state views such as tabs or carousels. On every OnClick event that triggers the different state, you need to add an Open Link action which points to an external URL. In the field where you enter the external URL, simply use a hashtag # followed by a word or tag that will help identify the page/state you are tracking. This essentially tricks the web mapping service into thinking you are on a new page without actually reloading the page.
The last step applies if you need to manually reset the test session in order for the heat mapping service to start/stop recording sessions. This is something I needed because I was using a single kiosk that needed to support multiple users. Not all of the heat mapping services support manual session resets. Inspectlet does which was the main reason I used them. All I had to do was add a line of code into the plug-in I created, and every time that page loaded, the session automatically resets.
Hopefully this will help some people who also want to add click tracking to their prototypes.