/**
* AutoQUEST - HTML Monitor
*
* Description: This script records the interactions done by an user on an
* HTML-Website and sends them to a server. It does not register actions on
* Flash, Java, or other special inputs. This script is tested on Firefox
* 15.0.1.
*
* To insert it on your HTML-side, you need to write in the
* head and change the src-attribute to the location, you have chosen for this
* script.
*
* To change the recorded events, edit the action config array. If you want to change
* the server where the data is send to, rewrite the destination variable. The
* records are send to the server, JSON-formatted, if there are 10 inputs or the
* user changes/closes the site.
*
* Authors: Simon Leidenbach, Simon Reuss, Patrick Harms
*
* Version: 0.1
*/
/**
* the server to send the recorded data to
*/
var destination = "http://patrick-prog-VM:8090"; // change to the location of your server
/**
* the maximum number of recorded events to be put into one package sent to the server
*/
var packageSize = 10;
/**
* this variable defines the tags for which event handling shall be added, as well as the
* event handling action to be monitored
*/
var actionConfig = [
{ "tag": "body", "actions": [ "onunload", "onscroll" ] },
{ "tag": "a", "actions": [ "onclick", "ondblclick", "onfocus" ] },
{ "tag": "input", "actions": [ "onclick", "ondblclick", "onfocus" ] }
];
/**
* a possibility to trace, what is going on
*/
var doLog = false;
/*var matchedTags = ["A", "ABBR", "ACRONYM", "ADDRESS", "AREA", "B", "BIG", "BLOCKQUOTE", "BODY",
"BUTTON", "CAPTION", "CENTER", "CITE", "CODE", "COL", "COLGROUP", "DD", "DEL",
"DFN", "DIR", "DIV", "DL", "DT", "EM", "FIELDSET", "FORM", "H1", "H2", "H3",
"H4", "H5", "H6", "HR", "I", "IMG", "INPUT", "INS", "KBD", "LABEL", "LEGEND",
"LI", "LINK", "MAP", "MENU", "NOFRAMES", "NOSCRIPT", "OBJECT", "OL",
"OPTGROUP", "OPTION", "P", "PRE", "Q", "S", "SAMP", "SELECT", "SMALL", "SPAN",
"STRIKE", "STRONG", "SUB", "SUP", "TABLE", "TBODY", "TD", "TEXTAREA", "TFOOT",
"TH", "THEAD", "TR", "TT", "U", "UL", "VAR"];*/
/*var actions = ['onclick', 'ondblclick', 'onkeypress', 'onkeydown', 'onkeyup',
'onmouseout' , 'onmousemove' ,'onfocus','onscroll']; // edit*/
var recordedEvents = [];
/**
* is automatically executed to initialize the event handling
*/
(function() {
initEventHandling();
}());
/**
* initializes the event handling after the document is loaded completely
*/
function initEventHandling() {
if (document.body) {
log("adding event handling attributes");
addEventHandlingAttributes(document.documentElement, "");
if (document.readyState !== "complete") {
// if the document is not loaded yet, try to add further event handling later
setTimeout(initEventHandling, 200);
}
}
else {
setTimeout(initEventHandling, 200);
}
}
/**
* traverses the DOM-structure of the HTML-side, and adds event handling attributes to each
* relevant node
*
* @param node the node of the DOM structure that shall be adapted and whose children shall be
* traversed
*/
function addEventHandlingAttributes(node, parentPath) {
var nodePath = getNodePath(node, parentPath);
var i;
var k;
var value;
if (node.nodeType === Node.ELEMENT_NODE) {
for (i = 0; i < actionConfig.length; i++) {
if (node.tagName.toLowerCase() === actionConfig[i].tag.toLowerCase()) {
for (k = 0; k < actionConfig[i].actions.length; k++) {
value = "handleEvent('" + actionConfig[i].actions[k] + "', '" + nodePath +
"', event);";
if (!node.getAttribute(actionConfig[i].actions[k])) {
node.setAttribute(actionConfig[i].actions[k], value);
}
else {
var oldValue = node.getAttribute(actionConfig[i].actions[k]);
if (oldValue.indexOf(value) < 0) {
node.setAttribute(actionConfig[i].actions[k], value + ' ' + oldValue);
}
}
}
}
}
}
for (i = 0; i < node.childNodes.length; i++) {
addEventHandlingAttributes(node.childNodes[i], nodePath);
}
}
/**
*
*/
function getNodePath(node, parentPath) {
var nodePath = parentPath + "/";
var index = -1;
var i = 0;
if (node.nodeType === Node.ELEMENT_NODE) {
nodePath += node.tagName.toLowerCase();
}
else {
nodePath += "undefined";
}
if ((node.id) && (node.id !== "")) {
nodePath += "(id=" + node.id + ")";
}
else {
if (node.parentNode) {
for (i = 0; i < node.parentNode.childNodes.length; i++) {
if (node.parentNode.childNodes[i].tagName === node.tagName) {
index++;
// if === also returns true if the nodes are not identical but only equal,
// this may fail.
if (node.parentNode.childNodes[i] === node) {
break;
}
}
}
}
else {
index = 0;
}
nodePath += "[" + index + "]";
}
return nodePath;
}
/**
* handles an event that happened on a node
*
* @param node
* @returns {Boolean}
*/
function handleEvent(eventName, nodePath, event) {
var eventType = eventName.toLowerCase();
var eventObj = recordedEvents.pop();
// reuse previous on scroll events to prevent too many events
if ((eventName !== "onscroll") || (!eventObj) || (eventObj.type !== "onscroll")) {
if (eventObj) {
recordedEvents.push(eventObj);
}
eventObj = new Event(eventType, nodePath);
}
if ((eventType === "onclick") || (eventType === "ondblclick")) {
eventObj.setClickCoordinates(getEventCoordinates(event));
}
if ((eventType === "onkeypress") || (eventType === "onkeydown") || (eventType === "onkeyup")) {
eventObj.setKey(event.keyCode);
}
if (eventType === "onscroll") {
if (window.pageYOffset) {
eventObj.setScrollPosition(window.pageYOffset);
}
}
recordedEvents.push(eventObj);
if ((recordedEvents.length >= packageSize) || (eventType === "onunload")) {
setTimeout(sendRequest(), 100);
}
}
/**
* sends the collected data to the server, named in the destination-variable
*/
function sendRequest() {
var eventList;
var message;
var clientId;
var i = 0;
var request;
if (recordedEvents.length > 0) {
eventList = recordedEvents;
recordedEvents = [];
message = "{\"message\":{\"clientInfos\":{";
log("reading client id");
clientId = readClientId();
if ((clientId) && (clientId !== "")) {
message += "\"clientId\":\"" + clientId + "\",";
}
log("adding other infos");
message += "\"userAgent\":\"" + navigator.userAgent + "\",";
message += "\"title\":\"" + document.title + "\",";
message += "\"url\":\"" + document.URL + "\"},";
message += "\"events\":[";
for (i = 0; i < eventList.length; i++) {
if (i > 0) {
message += ",";
}
message += eventList[i].toJSON();
}
message += "]}}";
request = null;
// Mozilla
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("POST", destination, true);
log("sending " + message);
request.send(message);
}
}
/**
* determines the coordinates of an onclick or ondblclick event
*/
function getEventCoordinates(event) {
if (event.layerX) {
return [event.layerX, event.layerY];
}
else if (event.offsetX) {
return [event.offsetX, event.offsetY];
}
var obj = event.target || event.srcElement;
var objOffset = getPageOffset(obj);
return [(event.clientX - objOffset[0]), (event.clientY - objOffset[1])];
}
/**
* determines the page offset of an object using the parent objects offset
*/
function getPageOffset(object) {
var top = 0;
var left = 0;
var obj = object;
while (obj.offsetParent) {
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
return [left, top];
}
/**
*
*/
function readClientId() {
var cookie = document.cookie;
var expectedCookieName = getClientIdCookieName();
var cookiename = null;
var startIndex = 0;
var clientId = null;
do {
cookie = cookie.substring(startIndex, cookie.length);
cookiename = cookie.substr(0, cookie.search('='));
startIndex = cookie.search(';') + 1;
while (cookie.charAt(startIndex) === ' ') {
startIndex++;
}
}
while ((startIndex > 0) && (cookiename !== expectedCookieName));
if (cookiename === expectedCookieName) {
clientId = cookie.substr(cookie.search('=') + 1, cookie.search(';'));
if (clientId === "") {
clientId = cookie.substr(cookie.search('=') + 1, cookie.length);
}
}
if ((!clientId) || (clientId === "") || (clientId.search(getClientIdPrefix()) !== 0)) {
clientId = generateClientId();
storeClientId(clientId);
}
return clientId;
}
/**
*
*/
function storeClientId(clientId) {
if ((clientId) && (clientId !== "")) {
var expiry = new Date();
// 10 years should be sufficient :-)
expiry = new Date(expiry.getTime() + 1000*60*60*24*365*10);
document.cookie = getClientIdCookieName() + '=' + clientId +
'; expires=' + expiry.toGMTString()+';';
}
}
/**
*
*/
function getClientIdCookieName() {
return document.URL + "/quest-htmlmonitor/quest-client-id";
}
/**
*
*/
function generateClientId() {
return getClientIdPrefix() + new Date().getTime();
}
/**
*
*/
function getClientIdPrefix() {
// create something like a more or less unique checksum. It is sufficient, if it differs
// only often, but not always, because it is concatenated with a time stamp, which differs
// much more often.
var prefixStr = navigator.userAgent + "_" + navigator.platform;
var prefixId = prefixStr.length;
var i = 0;
for (i = 0; i < prefixStr.length; i++) {
prefixId += prefixStr.charCodeAt(i);
}
// ensure, that a string is created and not a long. Otherwise, it can not be checked, if an
// existing client id starts with the client id prefix and can therefore be reused.
return prefixId.toString();
}
/**
* performs a simple logging
*/
function log(text) {
if (doLog) {
var loggingInfo = document.getElementById("loggingInfoParagraph");
if (!loggingInfo) {
var div = document.createElement("div");
div.setAttribute("style", "z-index:1000000; background-color:#afa; " +
"border:1px black solid; position:absolute; " +
"top:10px; right:10px; width:350px; height:auto");
loggingInfo = document.createElement("div");
loggingInfo.id = "loggingInfoParagraph";
div.appendChild(loggingInfo);
var body = document.getElementsByTagName("body")[0];
if (!body) {
alert("could not enable logging");
}
else {
body.appendChild(div);
}
}
loggingInfo.appendChild(document.createTextNode(text));
loggingInfo.appendChild(document.createElement("br"));
}
}
function Event(type, nodePath) {
this.type = type;
this.nodePath = nodePath;
this.time = new Date().getTime();
this.setClickCoordinates = function(coordinates) {
this.clickCoordinates = coordinates;
};
this.setKey = function(key) {
this.key = key;
};
this.setScrollPosition = function(scrollPosition) {
this.scrollPosition = scrollPosition;
};
this.toJSON = function() {
var eventInJSON =
"{\"path\":\"" + this.nodePath + "\",\"time\":" + this.time + ",\"eventType\":\"" +
this.type + "\"";
if ((this.clickCoordinates) && (!isNaN(this.clickCoordinates[0]))) {
eventInJSON += ",\"coordinates\":[" + this.clickCoordinates + "]";
}
if (this.key) {
eventInJSON += ",\"key\":" + this.key;
}
if (this.scrollPosition) {
eventInJSON += ",\"scrollPosition\":" + this.scrollPosition;
}
eventInJSON += "}";
return eventInJSON;
};
}