I don’t write about analytics much. I should probably write more since it is my profession and it would showcase my skills but I guess after doing it all day the last thing I want to do is come home and do it some more. That being said I had a break through today which I felt was too good to not share. I have been hunting for a way to hook into someone else’s JavaScript validation.
Often on a website you use alerts to inform users of an error or a mistake they have made. From a user experience perspective it is important to understand what users are doing and what they are doing wrong, or what they are having issues with. A classic example might be something like a phone number. If you have shitty developers they will have written validation to only accept a phone number in a particular format. I say shitty developers because user input should be flexible. If you have good developers they will have code that cleans everything up and formats it in a particular fashion but let’s say my devs are lazy and just put in validation.
For example I could enter a phone number like this or like this, or perhaps like this
Now you typically have validation that checks if a user has entered 10 numbers, and only numbers. You may also check if there are spaces or dashes in place. A typical alert message for the bottom two phone numbers would look like this
As an analyst I want to count how many times people enter something other than numbers, so either spaces or dashes, but I don’t want to have to go back to the developers. So I can add this code to any page where an alert might show up.
(function() {
‘use strict’;
var _alert = window.alert;window.alert = function trackingAlert() {
var args = Array.prototype.slice.call(arguments);
console.log(args[0]); //check we got the alert message
s.linkTrackvars = “prop11,evar44,events”; //sent that to Adobe Analytics
s.linkTrackEvents = “event32”
s.prop11 = args[0];
s.eVar44 = args[0];
s.events = “event32”;
s.tl();
_alert.apply(window, args);//don’t forget to send the alert!};
})();
Now there are a few important things to note in the way I have set this up. 1st you can apply pathing to s.prop11 and see if users are hitting multiple errors in a row. Second by having an event as and an eVar I can track errors against other eVars. So does the phone number alert show up more frequently with a particular application form? And does it have a negative effect on conversions.
This code is also flexible enough to account for new alert messages so it might say “please don’t enter dashes” and “please don’t enter spaces” or “Please include your area code” for people who enter less than 10 numbers
I have searched for awhile to get this (thanks to Marcelo who provided it to me), and I felt someone else might be looking for it too. You can use this for other native window events as well so you could create one for console.log or window.resize or whatever. Basically if you can access it in the console, you can track it.
Hope this helps someone else searching for the same thing.