How to track frustrated visitors
Jesse H. Mod
Whilst this remains to be an incredibly difficult metric to track, we can though monitor the other side of the coin.
<script> bento$.getScript("https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.js", function(data, textStatus, jqxhr) { // If someone searches the page, we log it. // h/t to @viperchill for recommending and @chillidoor for naming Mousetrap.bind(['ctrl+f','command+f'], () => { bento.track("$frustrated", { action: "rage_searching" }); }); }); </script>
The code above will simply initiate MouseTrap via a CDN (Cloudflare) and then begin actively monitoring when a user hits the hotkey to search the page. Generally, this is a good indication that they are unsatisfied (couldn't find the answer).
With this data you can either use it to work out which pages are difficult to scan/read OR create an automation that detects that the reader is frustrated and send them an email if it's stored.
bento$.getScript function.
Mousetrap.bind(['command+r', 'ctrl+r', 'f5'], () => { bento.track("$frustrated", { action: "refreshed_page" }); });
Now, whenever someone manually forces a page refresh it'll quickly log this in Bento.
This is a good signal to send to your team via Slack to alert that there may be something wrong with the page. It's rare that people do a hard refresh like that.
<script> function trackScrollSpeed() { // If someone scrolls quickly to the bottom, we track it. var checkScrollSpeed = (function(settings) { settings = settings || {}; var lastPos, newPos, timer, delta, delay = settings.delay || 50; // in "ms" (higher means lower fidelity ) function clear() { lastPos = null; delta = 0; } clear(); return function() { newPos = window.scrollY; if (lastPos != null) { // && newPos < maxScroll delta = newPos - lastPos; } lastPos = newPos; clearTimeout(timer); timer = setTimeout(clear, delay); return delta; }; })(); // listen to "scroll" event window.onscroll = function() { if (checkScrollSpeed() > 200) { if (TRACKED_SCRANDOM == false) { bento.track("$frustrated", { action: "rapid_scrolling" }); TRACKED_SCRANDOM = true; } } }; }; trackScrollSpeed(); </script>
<script> function trackBackTrack() { let last = bento_time_now(); bento$(window).on('popstate', function(event) { const current = bento_time_now(); if ((current - last) < 3000) { bento.track("$frustrated", { action: "backtracked" }); } }); }; trackBackTrack(); </script>