How do you track Caps Lock users with Google Analytics?

Question

I enjoy working with Google Analytics and the ways that I am able to slice information about our visitors. We use Customer Variables to track information about who and how are users interact with our site. Staying true to the goal of Analytics, we are always looking for ways to improve and optimize our website.

Currently we are in a phase of development where we can make choices about how we want to store and present product information. One of the questions that came up was whether or not to show product information in all caps or not. Working with our users for the last few years, it seems that much of our traffic comes from visitors who do have caps lock on. So it got us thinking, could we track our caps lock users with a customer variable to that we can make a more informed determination about how to present the information?

Check out this sample I slapped together: http://jsfiddle.net/shanabus/Za4kL/

Our site basically represents a standard e-commerce site. There are a few different text boxes and that allow you to search for part numbers and throughout the order process there are a few places where users can type text. Would you bind the caps lock test to all text boxes or just the common ones? Is there a performance hit if I bind the keypress listener to all text boxes on the site or is it negligible? Is there a better way to implement this?

I imagine instead of showing/hiding a div I would instead set the custom var:

_gaq.push('_setCustomVar', 5, 'capslock', 'true', 3);

Thanks for any thoughts and consideration on this seemingly trivial topic.

Answer 1

I'd bind the event globally, and use the following code:

var CAPS_ON = null;
$(window).keypress(function(ev) {
    var charCode = ev.which; //jQuery normalizes ev.charCode to ev.which
    // Lowercase chars
    if (charCode >= 97 && charCode <= 122) {
        CAPS_ON = ev.shiftKey; // Caps are off if SHIFT is not pressed
    } else if (charCode >= 65 && charCode <= 90) {
        CAPS_ON = !ev.shiftKey;
    }
});

This creates a variable CAPS_ON, which can be used throughout the page.

Further explanation on the code:

• The event has to be bound to the keypress event, because it's the only key event which discerns lowercase/uppercase characters.
• The shiftKey property has to be checked, because it inverts the CAPS LOCK feature.