Context Navigation

source: trunk/autoquest-htmlmonitor/src/main/js/autoquest-htmlmonitor.js @ 1813

Last change on this file since 1813 was 1807, checked in by pharms, 10 years ago
added recording of scrolls on text areas
File size: 36.4 KB

Line
1	// Copyright 2012 Georg-August-Universität Göttingen, Germany
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14
15	/**
16	* AutoQUEST - HTML Monitor
17	*
18	* Description: This script records the interactions done by an user on an
19	* HTML-Website and sends them to a server. It does not register actions on
20	* Flash, Java, or other special inputs. This script is tested on Firefox
21	* 15.0.1.
22	*
23	* To insert it on your HTML-side, you need to write <script
24	* language="JavaScript" type="text/javascript" src="autoquest-htmlmonitor.js"></script> in the
25	* head and change the src-attribute to the location, you have chosen for this
26	* script.
27	*
28	* To change the recorded events, edit the action config array. If you want to change
29	* the server where the data is send to, rewrite the destination variable. The
30	* records are send to the server, JSON-formatted, if there are 10 inputs or the
31	* user changes/closes the site.
32	*
33	* Authors: Simon Leidenbach, Simon Reuss, Patrick Harms
34	*
35	* Version: 0.1
36	*/
37
38	/**
39	* the server to send the recorded data to
40	*/
41	var autoquestDestination;
42
43	/**
44	* an ID that is more or less unique for the client
45	*/
46	var autoquestClientId;
47
48	/**
49	* the maximum number of recorded events to be put into one package sent to the server
50	*/
51	var autoquestPackageSize = 10;
52
53	/**
54	* this variable defines the tags for which event handling shall be added, as well as the
55	* event handling action to be monitored
56	*/
57	var autoquestActionConfig = [
58	{ "tag": "a", "actions": [ "onclick",
59	"onfocus" ] },
60	//{ "tag": "abbr", "actions": [ ] },
61	//{ "tag": "address", "actions": [ ] },
62	//{ "tag": "applet", "actions": [ ] },
63	{ "tag": "area", "actions": [ "onclick",
64	"onfocus" ] },
65	//{ "tag": "article", "actions": [ ] },
66	//{ "tag": "aside", "actions": [ ] },
67	{ "tag": "audio", "actions": [ "onplaying",
68	"onpause",
69	"ontimeupdate" ] },
70	{ "tag": "b", "actions": [ "onclick" ] },
71	//{ "tag": "bdi", "actions": [ ] },
72	//{ "tag": "bdo", "actions": [ ] },
73	//{ "tag": "blockquote", "actions": [ ] },
74	{ "tag": "body", "actions": [ "onclick",
75	"onkeydown",
76	"onpagehide",
77	"onpageshow",
78	"onscroll",
79	"onundo" ] },
80	{ "tag": "button", "actions": [ "onclick",
81	"onfocus" ] },
82	{ "tag": "canvas", "actions": [ "onclick" ] },
83	//{ "tag": "caption", "actions": [ ] },
84	{ "tag": "cite", "actions": [ "onclick" ] },
85	{ "tag": "code", "actions": [ "onclick" ] },
86	//{ "tag": "col", "actions": [ ] },
87	//{ "tag": "colgroup", "actions": [ ] },
88	{ "tag": "command", "actions": [ "onclick",
89	"onfocus" ] },
90	//{ "tag": "datalist", "actions": [ ] },
91	{ "tag": "dd", "actions": [ "onclick" ] },
92	{ "tag": "del", "actions": [ "onclick" ] },
93	//{ "tag": "details", "actions": [ ] },
94	{ "tag": "dfn", "actions": [ "onclick" ] },
95	{ "tag": "div", "actions": [ "onclick",
96	"onscroll" ] },
97	//{ "tag": "dl", "actions": [ ] },
98	{ "tag": "dt", "actions": [ "onclick" ] },
99	{ "tag": "em", "actions": [ "onclick" ] },
100	{ "tag": "embed", "actions": [ "onclick" ] },
101	//{ "tag": "fieldset", "actions": [ ] },
102	//{ "tag": "figcaption", "actions": [ ] },
103	//{ "tag": "figure", "actions": [ ] },
104	//{ "tag": "footer", "actions": [ ] },
105	{ "tag": "form", "actions": [ "onreset",
106	"onsubmit" ] },
107	//{ "tag": "header", "actions": [ ] },
108	//{ "tag": "hgroup", "actions": [ ] },
109	{ "tag": "h1", "actions": [ "onclick" ] },
110	{ "tag": "h2", "actions": [ "onclick" ] },
111	{ "tag": "h3", "actions": [ "onclick" ] },
112	{ "tag": "h4", "actions": [ "onclick" ] },
113	{ "tag": "h5", "actions": [ "onclick" ] },
114	{ "tag": "h6", "actions": [ "onclick" ] },
115	//{ "tag": "hr", "actions": [ ] },
116	{ "tag": "i", "actions": [ "onclick" ] },
117	//{ "tag": "iframe", "actions": [ ] },
118	{ "tag": "img", "actions": [ "onabort",
119	"onclick" ] },
120	{ "tag": "input_button", "actions": [ "onclick",
121	"onfocus" ] },
122	{ "tag": "input_checkbox", "actions": [ "onchange",
123	"onclick",
124	"onfocus" ] },
125	{ "tag": "input_color", "actions": [ "onchange",
126	"onclick",
127	"onfocus",
128	"onselect" ] },
129	{ "tag": "input_date", "actions": [ "onchange",
130	"onclick",
131	"onfocus",
132	"onselect" ] },
133	{ "tag": "input_datetime", "actions": [ "onchange",
134	"onclick",
135	"onfocus",
136	"onselect" ] },
137	{ "tag": "input_datetime-local", "actions": [ "onchange",
138	"onclick",
139	"onfocus",
140	"onselect" ] },
141	{ "tag": "input_email", "actions": [ "onchange",
142	"onclick",
143	"onfocus",
144	"onselect" ] },
145	{ "tag": "input_file", "actions": [ "onchange",
146	"onclick",
147	"onfocus",
148	"onselect" ] },
149	{ "tag": "input_image", "actions": [ "onclick",
150	"onfocus" ] },
151	{ "tag": "input_month", "actions": [ "onchange",
152	"onclick",
153	"onfocus",
154	"onselect" ] },
155	{ "tag": "input_number", "actions": [ "onchange",
156	"onclick",
157	"onfocus",
158	"onselect" ] },
159	{ "tag": "input_password", "actions": [ "onchange",
160	"onclick",
161	"onfocus" ] },
162	{ "tag": "input_radio", "actions": [ "onchange",
163	"onclick",
164	"onfocus" ] },
165	{ "tag": "input_range", "actions": [ "onchange",
166	"onclick",
167	"onfocus",
168	"onselect" ] },
169	{ "tag": "input_reset", "actions": [ "onclick",
170	"onfocus" ] },
171	{ "tag": "input_search", "actions": [ "onchange",
172	"onclick",
173	"onfocus",
174	"onselect" ] },
175	{ "tag": "input_submit", "actions": [ "onclick",
176	"onfocus" ] },
177	{ "tag": "input_tel", "actions": [ "onchange",
178	"onclick",
179	"onfocus",
180	"onselect" ] },
181	{ "tag": "input_text", "actions": [ "onchange",
182	"onclick",
183	"onfocus",
184	"onselect" ] },
185	{ "tag": "input_time", "actions": [ "onchange",
186	"onclick",
187	"onfocus",
188	"onselect" ] },
189	{ "tag": "input_url", "actions": [ "onchange",
190	"onclick",
191	"onfocus",
192	"onselect" ] },
193	{ "tag": "input_week", "actions": [ "onchange",
194	"onclick",
195	"onfocus",
196	"onselect" ] },
197	{ "tag": "input", "actions": [ "onchange",
198	"onclick",
199	"onfocus" ] },
200	{ "tag": "ins", "actions": [ "onclick" ] },
201	{ "tag": "kbd", "actions": [ "onclick" ] },
202	{ "tag": "keygen", "actions": [ "onchange",
203	"onfocus" ] },
204	//{ "tag": "label", "actions": [ ] },
205	//{ "tag": "legend", "actions": [ ] },
206	{ "tag": "li", "actions": [ "onclick" ] },
207	//{ "tag": "map", "actions": [ ] },
208	{ "tag": "mark", "actions": [ "onclick" ] },
209	{ "tag": "menu", "actions": [ "onclick" ] },
210	{ "tag": "meter", "actions": [ "onclick" ] },
211	//{ "tag": "nav", "actions": [ ] },
212	//{ "tag": "noscript", "actions": [ ] },
213	{ "tag": "object", "actions": [ "onclick" ] },
214	//{ "tag": "ol", "actions": [ ] },
215	//{ "tag": "optgroup", "actions": [ ] },
216	//{ "tag": "option", "actions": [ ] },
217	{ "tag": "output", "actions": [ "onclick" ] },
218	{ "tag": "p", "actions": [ "onclick" ] },
219	//{ "tag": "param", "actions": [ ] },
220	//{ "tag": "pre", "actions": [ ] },
221	{ "tag": "progress", "actions": [ "onclick" ] },
222	{ "tag": "q", "actions": [ "onclick" ] },
223	//{ "tag": "rp", "actions": [ ] },
224	//{ "tag": "rt", "actions": [ ] },
225	//{ "tag": "ruby", "actions": [ ] },
226	{ "tag": "s", "actions": [ "onclick" ] },
227	{ "tag": "samp", "actions": [ "onclick" ] },
228	//{ "tag": "section", "actions": [ ] },
229	{ "tag": "select", "actions": [ "onchange",
230	"onfocus" ] },
231	{ "tag": "small", "actions": [ "onclick" ] },
232	//{ "tag": "source", "actions": [ ] },
233	{ "tag": "span", "actions": [ "onclick" ] },
234	{ "tag": "strong", "actions": [ "onclick" ] },
235	//{ "tag": "sub", "actions": [ ] },
236	//{ "tag": "summary", "actions": [ ] },
237	//{ "tag": "sup", "actions": [ ] },
238	//{ "tag": "table", "actions": [ ] },
239	//{ "tag": "tbody", "actions": [ ] },
240	{ "tag": "td", "actions": [ "onclick" ] },
241	{ "tag": "textarea", "actions": [ "onchange",
242	"onfocus",
243	"onselect",
244	"onscroll" ] },
245	//{ "tag": "tfoot", "actions": [ ] },
246	{ "tag": "th", "actions": [ "onclick" ] },
247	//{ "tag": "thead", "actions": [ ] },
248	{ "tag": "time", "actions": [ "onclick" ] },
249	//{ "tag": "tr", "actions": [ ] },
250	//{ "tag": "track", "actions": [ ] },
251	{ "tag": "u", "actions": [ "onclick" ] },
252	//{ "tag": "ul", "actions": [ ] },
253	{ "tag": "var", "actions": [ "onclick" ] },
254	{ "tag": "video", "actions": [ "onplaying",
255	"onpause",
256	"ontimeupdate" ] }
257	//{ "tag": "wbr", "actions": [ ] },
258	];
259
260	/**
261	* a possibility to trace, what is going on
262	*/
263	var autoquestDoLog = false;
264
265	/**
266	* stores the structure of the GUI of the current page
267	*/
268	var autoquestGUIModel;
269
270	/**
271	* stores events, which were recorded but not sent to the server yet
272	*/
273	var autoquestRecordedEvents = [];
274
275	/**
276	* stores the interval for sending data of inactive browser windows
277	*/
278	var autoquestSendInterval;
279
280	/**
281	* automatically executed to initialize the event handling
282	*/
283	(function() {
284	initEventHandling();
285	}());
286
287
288	/**
289	* initializes the event handling after the document is loaded completely
290	*/
291	function initEventHandling() {
292	if (document.body) {
293	if (document.readyState !== "complete") {
294	// if the document is not loaded yet, try to add further event handling later
295	setTimeout(initEventHandling, 200);
296	}
297	else if (!autoquestSendInterval) {
298	log("adding event handling attributes");
299	determineDestination();
300	autoquestGUIModel =
301	addEventHandlingAndGetJSONRepresentation(document.documentElement, "");
302
303	addDefaultEventHandling();
304
305	// recall sending data each 100 seconds to ensure, that for browser windows staying
306	// open the data will be send, as well.
307	autoquestSendInterval = setTimeout(sendRequest, 100000);
308	}
309	}
310	else {
311	setTimeout(initEventHandling, 200);
312	}
313	}
314
315	/**
316	* traverses the DOM-structure of the HTML-site and determines the URL of this script. Based on
317	* this URL, it calculates the destination to which the traced interactions must be sent
318	*/
319	function determineDestination() {
320	var scriptElements = document.getElementsByTagName("script");
321	var i;
322	var index;
323
324	for (i = 0; i < scriptElements.length; i++) {
325	if ((scriptElements[i].type === "text/javascript") && (scriptElements[i].src)) {
326	index = scriptElements[i].src.lastIndexOf("script/autoquest-htmlmonitor.js");
327	if (index > -1) {
328	autoquestDestination = scriptElements[i].src.substring(0, index - 1);
329	log("using destination " + autoquestDestination);
330	}
331	}
332	}
333	}
334
335	/**
336	* traverses the DOM-structure of the HTML-site and adds event handling attributes to each
337	* relevant node. Furthermore returns a JSON representation of the node including the children
338	*
339	* @param node the node of the DOM structure that shall be adapted and whose children shall
340	* be traversed
341	* @param parentPath the path to the parent node of the provided node within the DOM-structure of
342	* the HTML-site
343	*/
344	function addEventHandlingAndGetJSONRepresentation(node, parentPath) {
345	var nodePath;
346	var i;
347	var jsonRepresentation = null;
348	var childRepresentation;
349	var childRepresentations = null;
350
351	if (node.nodeType === Node.ELEMENT_NODE) {
352	jsonRepresentation = "{\"tagName\":\"" + getTagName(node) + "\",";
353
354	if ((node.id) && (node.id !== "")) {
355	jsonRepresentation += "\"htmlId\":\"" + node.id + "\"";
356	}
357	else {
358	jsonRepresentation += "\"index\":\"" + getNodeIndex(node) + "\"";
359	}
360
361	addEventHandling(node, parentPath);
362
363	if (node.childNodes.length > 0) {
364	nodePath = getNodePath(node, parentPath);
365
366	for (i = 0; i < node.childNodes.length; i++) {
367	childRepresentation =
368	addEventHandlingAndGetJSONRepresentation(node.childNodes[i], nodePath);
369
370	if (childRepresentation) {
371	if (!childRepresentations) {
372	childRepresentations = childRepresentation;
373	}
374	else {
375	childRepresentations += "," + childRepresentation;
376	}
377	}
378	}
379
380	if (childRepresentations) {
381	jsonRepresentation += ",\"children\":[" + childRepresentations + "]";
382	}
383	}
384
385	jsonRepresentation += "}";
386	}
387
388	return jsonRepresentation;
389	}
390
391	/**
392	* adds event handling functionality to the provided node. Calls
393	* {@link #addEventHandlingWithJQuery(node,parentPath)} or
394	* {@link #addEventHandlingWithoutJQuery(node,parentPath)} depending on the fact if jQuery is
395	* available and must therefore be used, or not.
396	*
397	* @param node the node of the DOM structure that shall be equipped with event handling
398	* @param parentPath the path to the parent node of the provided node within the DOM-structure of
399	* the HTML-site
400	*/
401	function addEventHandling(node, parentPath) {
402	if (typeof jQuery === 'undefined') {
403	addEventHandlingWithoutJQuery(node, parentPath);
404	}
405	else {
406	addEventHandlingWithJQuery(node, parentPath);
407	}
408	}
409
410	/**
411	* adds event handling functionality to the provided node using onxxx attributes
412	*
413	* @param node the node of the DOM structure that shall be equipped with event handling
414	* @param parentPath the path to the parent node of the provided node within the DOM-structure of
415	* the HTML-site
416	*/
417	function addEventHandlingWithoutJQuery(node, parentPath) {
418	var nodePath = getNodePath(node, parentPath);
419	var tagName = getTagName(node);
420	var i;
421	var k;
422
423	for (i = 0; i < autoquestActionConfig.length; i++) {
424	if (tagName === autoquestActionConfig[i].tag.toLowerCase()) {
425	for (k = 0; k < autoquestActionConfig[i].actions.length; k++) {
426	adaptEventHandlingAttribute(node, nodePath, autoquestActionConfig[i].actions[k]);
427	}
428	}
429	}
430	}
431
432	/**
433	* adds event handling functionality to the provided node using jQuery attributes. If the node
434	* already used onxxx attributes, these are extended instead of using jQuery.
435	*
436	* @param node the node of the DOM structure that shall be equipped with event handling
437	* @param parentPath the path to the parent node of the provided node within the DOM-structure of
438	* the HTML-site
439	*/
440	function addEventHandlingWithJQuery(node, parentPath) {
441	var nodePath = getNodePath(node, parentPath);
442	var tagName = getTagName(node);
443	var action;
444	var i;
445	var k;
446
447	for (i = 0; i < autoquestActionConfig.length; i++) {
448	if (tagName === autoquestActionConfig[i].tag.toLowerCase()) {
449	for (k = 0; k < autoquestActionConfig[i].actions.length; k++) {
450	action = autoquestActionConfig[i].actions[k];
451	if (jQuery(node).attr(action)) {
452	// if there is an event handling attribute although jquery is present
453	// edit this attribute accordingly
454	adaptEventHandlingAttribute(node, nodePath, action);
455	}
456	else {
457	registerEventHandler(node, nodePath, action);
458	}
459	}
460	}
461	}
462	}
463
464	/**
465	* adapts the event handling attributed provided by the action parameter so that it calls
466	* the {@link #handleEvent(node, action, path, event)} function in the case the event occurs.
467	* Either the method creates an appropriate onxxx attribute on the node if there is none, or it
468	* adds a call to the function as first thing called by the onxxx attribute.
469	*
470	* @param node the node of the DOM structure that shall be equipped with event handling
471	* @param nodePath the path to the node within the DOM-structure of the HTML-site
472	* @param action the event for which event handling shall be enabled
473	*/
474	function adaptEventHandlingAttribute(node, nodePath, action) {
475	var value = "handleEvent(this, '" + action + "', '" + nodePath + "', event);";
476	var oldValue;
477
478	if (!node.getAttribute(action)) {
479	node.setAttribute(action, value);
480	}
481	else {
482	oldValue = node.getAttribute(action);
483	if (oldValue.indexOf(value) < 0) {
484	node.setAttribute(action, value + ' ' + oldValue);
485	}
486	}
487	}
488
489	/**
490	* registers an event handler using jQuery for the provided action on the given object so that it
491	* calls the {@link #handleJQueryEvent(event)} function in the case the event occurs.
492	*
493	* @param node the node of the DOM structure that shall be equipped with event handling
494	* @param nodePath the path to the node within the DOM-structure of the HTML-site
495	* @param action the event for which event handling shall be enabled
496	*/
497	function registerEventHandler(node, nodePath, action) {
498	var parameters = { action : action, path : nodePath};
499
500	if ((action === "onscroll") && (node === document.body)) {
501	node = window;
502	}
503
504	if (jQuery(node).on) {
505	jQuery(node).on(action.substring(2), parameters, handleJQueryEvent);
506	}
507	else {
508	jQuery(node).bind(action.substring(2), parameters, handleJQueryEvent);
509	}
510	}
511
512	/**
513	* adds default event handling functionality for receiving load, unload, and other document
514	* relevant events. The registration for events is done depending on the availability of jQuery.
515	* If jQuery is available and must therefore be used, then the registration is done on the window
516	* object. Otherwise, the appropriate attributes of the document's body tag are changed
517	*/
518	function addDefaultEventHandling() {
519	var body;
520
521	if (typeof jQuery === 'undefined') {
522	body = document.getElementsByTagName("body").item(0);
523	adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onbeforeunload");
524	adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onload");
525	adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onunload");
526	//adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onerror");
527	}
528	else {
529	registerEventHandler(window, "/html[0]/body[0]", "onbeforeunload");
530	registerEventHandler(window, "/html[0]/body[0]", "onload");
531	registerEventHandler(window, "/html[0]/body[0]", "onunload");
532	//registerEventHandler(body, "/html[0]/body[0]", "onerror");
533	}
534	}
535
536	/**
537	* generates a path through the DOM-structure of the HTML-site depending on a node and the path
538	* to its parent node. The result is the parent path plus a path element for the provided node.
539	* The first part of the path element generated for the node is the tag name returned by
540	* {@link #getTagName(node)}. If the node has an id, it becomes the second part of the path
541	* element. If the node does not have an id, the method calculates the index of the node within
542	* all children of the same type within the parent node. This index becomes then the second part
543	* of the path element generated for the node.
544	*
545	* @param node the node of the DOM structure for which the path shall be created
546	* @param parentPath the path to the parent node of the provided node
547	*
548	* @returns a path in the DOM-structure of the HTML-site including the parent path an a path
549	* element for the provided node
550	*/
551	function getNodePath(node, parentPath) {
552	var nodePath = parentPath + "/" + getTagName(node);
553
554	if ((node.id) && (node.id !== "")) {
555	nodePath += "(htmlId=" + node.id + ")";
556	}
557	else {
558	nodePath += "[" + getNodeIndex(node) + "]";
559	}
560
561	return nodePath;
562	}
563
564	/**
565	* called to handle events caused by the jQuery event handling mechanism. Forwards the event to
566	* {@link #handleEvent(node, eventName, nodePath, event)}
567	*
568	* @param the event to be handled
569	*/
570	function handleJQueryEvent(event) {
571	handleEvent(this, event.data.action, event.data.path, event);
572	}
573
574	/**
575	* handles an event that happened on a node. This method is called by the event handling attributes
576	* of the nodes. These attributes are generated by the
577	* {@link #addEventHandlingAttributes(node,parentPath)} function. It creates a new Event object and
578	* adds it to the list of <code>autoquestRecordedEvents</code>. If this list achieves the maximum
579	* <code>autoquestPackageSize</code> the events in the list are sent to the server asynchronously
580	* through calling {@link #sendRequest()}.
581	*
582	* @param node the node that fired the event
583	* @param eventName the name of the event, e.g. onscroll
584	* @param nodePath the path to the node in the HTML DOM on which the event occurred
585	* @param event the HTML event that occured
586	*/
587	function handleEvent(node, eventName, nodePath, event) {
588	var eventType;
589	var eventObj = null;
590	var tagName;
591	var unmonitored;
592
593	if (!autoquestDestination) {
594	// do nothing if we have no destination to send data to
595	return;
596	}
597
598	log("handling event " + eventName + " on " + node);
599
600	eventType = eventName.toLowerCase();
601
602	// filter onkeydown events, which are not of interest
603	if ((eventType === "onkeydown") && (node === document.body)) {
604	// do not handle key downs on the body which are other than tabs (keycode 9)
605	if (event.keyCode !== 9) {
606	return;
607	}
608	}
609
610	// check, if the preceeding event is more concrete, i.e. the new event to be handled is only
611	// a propagation through the DOM and needs, therefore, not be handled
612	if (autoquestRecordedEvents.length > 0) {
613	eventObj = autoquestRecordedEvents[autoquestRecordedEvents.length - 1];
614
615	if ((eventObj.type === eventName) && (eventObj.nodePath.indexOf(nodePath) === 0)) {
616	// the event is of the same type.
617	if (eventObj.nodePath.length > nodePath.length) {
618	// the new event is the same event as the previous one, but fired for the parent
619	// GUI element of the previous event. This must not be handled. So ignore it
620	log("discarding event " + eventName + " on " + node +
621	" as it is already handled by a child");
622	return;
623	}
624	else if (eventType !== "onscroll") {
625	// we have the same event on the same element. If it is an onscroll, we should
626	// reuse it. But it is not an onscroll. So we ignore the existing event.
627	eventObj = null;
628	}
629	}
630	else {
631	// the event is not of an equal type as the previous one. So we will not reuse it
632	eventObj = null;
633	}
634	}
635
636	if (!eventObj) {
637	// we can not reuse the previous event. So create a new event and add it to the list
638	eventObj = new Event(eventType, nodePath);
639	log("storing event " + eventName);
640	autoquestRecordedEvents.push(eventObj);
641	}
642
643	// now add further event parameters
644	if ((eventType === "onclick") \|\| (eventType === "ondblclick")) {
645	eventObj.setClickCoordinates(getEventCoordinates(event));
646	}
647
648	tagName = getTagName(node);
649
650	// ensure to not monitor details for GUI elements marked as unmonitored
651	if (node.getAttribute && node.getAttribute("class")) {
652	unmonitored = node.getAttribute("class").indexOf("autoquest-unmonitored") >= 0;
653	}
654	else {
655	unmonitored = false;
656	}
657
658	if (!unmonitored && ("input_password" !== tagName)) {
659	// add further parameters for GUI elements which are monitored and which are no password
660	// fields
661	if ((eventType === "onkeypress") \|\|
662	(eventType === "onkeydown") \|\|
663	(eventType === "onkeyup"))
664	{
665	eventObj.setKey(event.keyCode);
666	}
667	else if (eventType === "onchange") {
668	if ((tagName.indexOf("input") === 0) \|\|
669	(tagName === "textarea") \|\|
670	(tagName === "keygen"))
671	{
672	eventObj.setSelectedValue(node.value);
673	}
674	else if (tagName === "select") {
675	eventObj.setSelectedValue(node.options.item(node.options.selectedIndex));
676	}
677	}
678	}
679
680	if (eventType === "onscroll") {
681	eventObj.setScrollPosition(getScrollCoordinates(node));
682	}
683
684	// finally send the recorded data
685	if (autoquestRecordedEvents.length >= autoquestPackageSize) {
686	log("initiating sending events");
687	setTimeout(sendRequest, 100);
688	}
689	else if ((eventType === "onunload") \|\| (eventType === "onbeforeunload")) {
690	log("initiating sending events");
691	sendRequest();
692	}
693
694	}
695
696	/**
697	* determines a tag name of a node. If the node is an input element, the tag name includes the
698	* type of element. Otherwise the method simply returns the tag name.
699	*
700	* @param node the node for which the name must be determined
701	*
702	* @return the name as described
703	*/
704	function getTagName(node) {
705	var tagName = null;
706
707	if (node.tagName) {
708	tagName = node.tagName.toLowerCase();
709	if ("input" === tagName) {
710	if (node.type && (node.type !== "")) {
711	tagName += "_" + node.type;
712	}
713	else {
714	tagName += "_text";
715	}
716	}
717	}
718
719	return tagName;
720	}
721
722	/**
723	* determines the index of a node considering all nodes of the parent having the same name. If the
724	* node has no parent, the method returns index 0.
725	*
726	* @param node the node for which the index must be determined
727	*
728	* @return the index as described
729	*/
730	function getNodeIndex(node) {
731	var i;
732	var index = 0;
733
734	if (node.parentNode) {
735	for (i = 0; i < node.parentNode.childNodes.length; i++) {
736	if (node.parentNode.childNodes[i].tagName === node.tagName) {
737	// if === also returns true if the nodes are not identical but only equal,
738	// this may fail.
739	if (node.parentNode.childNodes[i] === node) {
740	break;
741	}
742	index++;
743	}
744	}
745
746	}
747
748	return index;
749	}
750
751	/**
752	* sends the collected data to the server, named in the destination-variable. For this it generates
753	* a JSON formatted message and uses Ajax and the <code>autoquestDestination</code> to send it to
754	* the server
755	*/
756	function sendRequest() {
757	var eventList = autoquestRecordedEvents;
758	var message;
759	var clientId;
760	var i = 0;
761	var request;
762
763	if (eventList.length > 1) {
764	log("creating message");
765
766	// put the last event into the new list to allow for checks for reoccurence of the same
767	// event
768	autoquestRecordedEvents = [ eventList.pop() ];
769
770	message = "{\"message\":{\"clientInfos\":{";
771
772	log("reading client id");
773	clientId = getClientId();
774	if ((clientId) && (clientId !== "")) {
775	message += "\"clientId\":\"" + clientId + "\",";
776	}
777
778	log("adding other infos");
779	message += "\"userAgent\":\"" + navigator.userAgent + "\",";
780	message += "\"title\":\"" + document.title + "\",";
781	message += "\"url\":\"" + document.URL + "\"},";
782
783	message += "\"guiModel\":" + autoquestGUIModel + ",";
784
785	message += "\"events\":[";
786
787	for (i = 0; i < eventList.length; i++) {
788	if (i > 0) {
789	message += ",";
790	}
791	message += eventList[i].toJSON();
792	}
793
794	message += "]}}";
795
796	request = null;
797
798	// Mozilla
799	if (window.XMLHttpRequest) {
800	request = new XMLHttpRequest();
801	}
802	// IE
803	else if (window.ActiveXObject) {
804	request = new ActiveXObject("Microsoft.XMLHTTP");
805	}
806
807	request.open("POST", autoquestDestination, false);
808	request.setRequestHeader("Content-Type", "application/json");
809
810	log("sending " + message);
811	request.send(message);
812	}
813	}
814
815	/**
816	* determines the scroll coordinates of the scrolled element
817	*
818	* @param node the element that was scrolled
819	*
820	* @returns the coordinates of the scrolling as an array with x and y coordinate
821	*/
822	function getScrollCoordinates(node) {
823	if (node.scrollLeft \|\| node.scrollTop) {
824	return [node.scrollLeft, node.scrollTop];
825	}
826	else if ((node === window) && window.pageYOffset) {
827	return [window.pageXOffset, window.pageYOffset];
828	}
829	else if ((node == document) \|\| (node == document.body) \|\| (node == document.documentElement)) {
830	if (document.body && (document.body.scrollLeft \|\| document.body.scrollTop)) {
831	return [document.body.scrollLeft, document.body.scrollTop];
832	}
833	else if (document.documentElement &&
834	(document.documentElement.scrollLeft \|\| document.documentElement.scrollTop))
835	{
836	return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
837	}
838	}
839
840	return [-1, -1];
841	}
842
843	/**
844	* determines the coordinates of an onclick or ondblclick event. If the coordinates to not come
845	* with the provided event, they are determined based on the surrounding object
846	*
847	* @param event the event to extract the coordinates of
848	*
849	* @returns the coordinates of the event as an array with x and y coordinate
850	*/
851	function getEventCoordinates(event) {
852	if (event.layerX) {
853	return [event.layerX, event.layerY];
854	}
855	else if (event.offsetX) {
856	return [event.offsetX, event.offsetY];
857	}
858
859	var obj = event.target \|\| event.srcElement;
860	var objOffset = getPageOffset(obj);
861
862	return [(event.clientX - objOffset[0]), (event.clientY - objOffset[1])];
863	}
864
865	/**
866	* determines the page offset of an object using the parent objects offset
867	*/
868	function getPageOffset(object) {
869	var top = 0;
870	var left = 0;
871	var obj = object;
872
873	while (obj.offsetParent) {
874	left += obj.offsetLeft;
875	top += obj.offsetTop;
876	obj = obj.offsetParent;
877	}
878
879	return [left, top];
880	}
881
882	/**
883	* generates a client id based on several information retrieved from the environment. The client
884	* id is not always unique
885	*
886	* @returns the client id
887	*/
888	function getClientId() {
889	var clientIdStr;
890	var clientId;
891	var i = 0;
892
893	if (!autoquestClientId) {
894	// create something like a more or less unique checksum.
895	clientIdStr =
896	navigator.appCodeName + navigator.appName + navigator.appVersion +
897	navigator.cookieEnabled + navigator.language + navigator.platform +
898	navigator.userAgent + navigator.javaEnabled() + window.location.protocol +
899	window.location.host + new Date().getTimezoneOffset();
900
901	clientId = clientIdStr.length;
902
903	for (i = 0; i < clientIdStr.length; i++) {
904	clientId += clientIdStr.charCodeAt(i);
905	}
906
907	autoquestClientId = clientId;
908	}
909
910	return autoquestClientId;
911	}
912
913	/**
914	* performs a simple logging by adding a specific div to the HTML
915	*
916	* @param text the text to be logged
917	*/
918	function log(text) {
919	if (autoquestDoLog) {
920	var loggingInfo = document.getElementById("loggingInfoParagraph");
921
922	if (!loggingInfo) {
923	var div = document.createElement("div");
924	div.setAttribute("style", "z-index:1000000; background-color:#afa; " +
925	"border:1px black solid; position:absolute; top:10px; right:10px; " +
926	"width:350px; height:auto; font-size:8pt; font-family:Helvetica");
927
928	loggingInfo = document.createElement("div");
929	loggingInfo.id = "loggingInfoParagraph";
930	div.appendChild(loggingInfo);
931
932	var body = document.getElementsByTagName("body")[0];
933	if (!body) {
934	alert("could not enable logging");
935	}
936	else {
937	body.appendChild(div);
938	}
939	}
940
941	loggingInfo.appendChild(document.createTextNode(text));
942	loggingInfo.appendChild(document.createElement("br"));
943	}
944	}
945
946	/**
947	* this class represents a single event
948	*
949	* @param type the type of the event
950	* @param nodePath the path through the HTML DOM to the event target
951	*/
952	function Event(type, nodePath) {
953	this.type = type;
954	this.nodePath = nodePath;
955	this.time = new Date().getTime();
956
957	this.setClickCoordinates = function(coordinates) {
958	this.clickCoordinates = coordinates;
959	};
960
961	this.setKey = function(key) {
962	this.key = key;
963	};
964
965	this.setSelectedValue = function(value) {
966	this.selectedValue = encodeText(value);
967	};
968
969	this.setScrollPosition = function(scrollPosition) {
970	this.scrollPosition = scrollPosition;
971	};
972
973	this.toJSON = function() {
974	var eventInJSON =
975	"{\"path\":\"" + this.nodePath + "\",\"time\":" + this.time + ",\"eventType\":\"" +
976	this.type + "\"";
977
978	if ((this.clickCoordinates) && (!isNaN(this.clickCoordinates[0]))) {
979	eventInJSON += ",\"coordinates\":[" + this.clickCoordinates + "]";
980	}
981
982	if (this.key) {
983	eventInJSON += ",\"key\":" + this.key;
984	}
985
986	if (this.selectedValue) {
987	eventInJSON += ",\"selectedValue\":\"" + this.selectedValue + "\"";
988	}
989
990	if ("onscroll" === this.type) {
991	eventInJSON += ",\"scrollPosition\":[" + this.scrollPosition + "]";
992	}
993
994	eventInJSON += "}";
995
996	return eventInJSON;
997	};
998
999	function encodeText(text) {
1000	return text.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"");
1001	};
1002	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats: