How to track frustrated visitors

One of the things that tools like Google Analytics and Clicky won't do is give you an indication if someone found the answer easily on the page.

Whilst this remains to be an incredibly difficult metric to track, we can though monitor the other side of the coin.

How to track when a user searches with MouseTrap

<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.

How to track when a user refreshes their monitor

Similar to the code above we're going to do the same but add a few more hotkeys into the mix. Just add this code between the
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.

How to track if someone is rapidly scrolling the page

A weird behavioural tick from users is that they will often rapidly scroll your website when they don't find the answer they're looking for. The below code, easily added as a standalone, will monitor this.

<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>

How to track when a user backtracks after reading

The following script can be simply added as a standalone and will track when a visitor comes to the site and leaves within 3 seconds. Good indication that the content is not up to par or it didn't load.

<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>

How to track frustrated visitors

Jesse H. Mod