record_status = false; var mouse_x = 0; var mouse_y = 0; var main_timer; var sub_count_timer; var session_id = 0; var session_status = false; var session_init = false; var totalSeconds = 0; var timeouts = []; var parent_link_id = 0; var pointer; var tape; var analytic_playback = false; //$(document).ready(function(){ theParent = document.getElementsByTagName("body")[0]; theKid = document.createElement("div"); // theKid.innerHTML = ''; theParent.insertBefore(theKid, theParent.firstChild); tape = document.getElementById("tape"); record_button = document.getElementById("btn_record"); stop_button = document.getElementById("btn_stop"); pointer = document.getElementById("pointer"); var totalSeconds = 0; function inIframe() { try { return window.self !== window.top; } catch (e) { return true; } } //console.log(inIframe()); if (inIframe()) { window.onmessage = function (e) { if (e.data[0] == 'playTape') { playTape(e.data[1]); } else if (e.data[0] == 'stop') { stopSegments(); } } } else { main_timer = setInterval(setTime, 1000); startRecording(); } /** * * @type @exp;c@call;substring|Check Cookie */ var recordid = getCookie("recordid"); if (recordid == "") { parent_link_id = 0; } else { parent_link_id = recordid; } function cookieBuider(recordid) { if (parent_link_id == 0) { setCookie("recordid", recordid); } } function setTime() { ++totalSeconds; clearInterval(sub_count_timer); sub_count_timer = setInterval(update, 500); // send and clear var _data = tape.value; sendToServer(_data); tape.value = ''; } function pad(val) { var valString = val + ""; if (valString.length < 2) { return "0" + valString; } else { return valString; } } /* * @param {type} Create elements Fomr For loop * @returns {_element_type + "," + _element + "," + _element_val} */ function createNewElement(thisObj) { var _id, _name, _class, _value = ''; _id = thisObj.id; _name = thisObj.name; _class = thisObj.className; _value = thisObj.value; var _element, _element_val, _element_type = ''; if (_id != "") { _element = _id; _element_val = ''; _element_type = '#'; } else if (_name != "") { _element = _name; _element_val = findNameIndex(thisObj, _name); _element_type = '$'; } else if (_class != "") { _element = _class; _element_val = findClassIndex(thisObj, _class); _element_type = '.'; } else { } print_data = _element_type + "," + _element + "," + _element_val + "," + _value; return print_data; } function findNameIndex(this_elements, _name) { var index = 0; name_Objects = document.getElementsByName(_name); for (var x = 0; x < name_Objects.length; x++) { if (name_Objects[x] == this_elements) { break; } if (name_Objects[x].name == _name) { index++; } } return index; } function checkInputFocus(e) { if (e.target && e.target.nodeName == _class) { index = getIndexFromSet(inputs, e.target); console.log(_class); } } function findClassIndex(this_elements, _class) { var index = 0; class_Objects = document.getElementsByClassName(_class); for (var x = 0; x < class_Objects.length; x++) { if (class_Objects[x] == this_elements) { index = x; } } return index; } document.addEventListener("mousemove", function (e) { mouse_x = e.pageX; mouse_y = e.pageY; }) var all_elements = document.getElementsByTagName("*"); for (var i = 0; i < all_elements.length; i++) { all_elements[i].addEventListener("click", function (e) { writeTape("mc:" + createNewElement(this) + "|"); }) } var all_elements = document.getElementsByTagName("input"); for (var i = 0; i < all_elements.length; i++) { all_elements[i].addEventListener("keyup", function (e) { writeTape("ti:" + createNewElement(this) + "|"); }) } var all_elements = document.getElementsByTagName("textarea"); for (var i = 0; i < all_elements.length; i++) { all_elements[i].addEventListener("keyup", function (e) { writeTape("ti:" + createNewElement(this) + "|"); }) } var all_elements = document.getElementsByTagName("select"); for (var i = 0; i < all_elements.length; i++) { all_elements[i].addEventListener("change", function (e) { writeTape("mch:" + createNewElement(this) + "|"); }) } document.addEventListener("scroll", function (e) { writeTape("sc:" + getScrollTop() + "|"); console.log(getScrollTop()); }); //}); document ready // Old IE / Browser Fixes if (!window.Element || !window.Element.prototype || !window.Element.prototype.hasAttribute) { (function () { function hasAttribute(attrName) { return typeof this[attrName] !== 'undefined'; // You may also be able to check getAttribute() against null, though it is possible this could cause problems for any older browsers (if any) which followed the old DOM3 way of returning the empty string for an empty string (yet did not possess hasAttribute as per our checks above). See https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute } var inputs = document.getElementsByTagName('*'); for (var i = 0; i < inputs.length; i++) { inputs[i].hasAttribute = hasAttribute; } }()); } function getScrollTop() { var scrollTop; if (typeof (window.pageYOffset) == 'number') { // DOM compliant, IE9+ scrollTop = window.pageYOffset; } else { // IE6-8 workaround if (document.body && document.body.scrollTop) { // IE quirks mode scrollTop = document.body.scrollTop; } else if (document.documentElement && document.documentElement.scrollTop) { // IE6+ standards compliant mode scrollTop = document.documentElement.scrollTop; } } return scrollTop; } function getWindowHeight() { // viewport, not document var windowHeight = 0; if (typeof (window.innerHeight) == 'number') { // DOM compliant, IE9+ windowHeight = window.innerHeight; } else { // IE6-8 workaround, Note: document can be smaller than window var ieStrict = document.documentElement.clientHeight; // w/out DTD gives 0 var ieQuirks = document.body.clientHeight; // w/DTD gives document height windowHeight = (ieStrict > 0) ? ieStrict : ieQuirks; } return windowHeight; } function getWindowWidth() { // viewport, not document var windowWidth = 0; if (typeof (window.innerWidth) == 'number') { // DOM compliant, IE9+ windowWidth = window.innerWidth; } else { // IE6-8 workaround, Note: document can be smaller than window var ieStrict = document.documentElement.clientWidth; // w/out DTD gives 0 var ieQuirks = document.body.clientWidth; // w/DTD gives document width windowWidth = (ieStrict > 0) ? ieStrict : ieQuirks; } return windowWidth; } function update() { writeTape("mm:" + mouse_x + "," + mouse_y + "" + "|") } function writeTape(data) { if (record_status) { tape.value = tape.value + data; } } function clearTape() { tape.value = ''; } function startRecording() { record_status = true; console.log('$ Recording...'); } function stopRecording() { record_status = false; } // playback function playTape(data) { data = data.split("|"); console.log('$ play Record ' + data + ' & '); var time = 0; for (var i = 0; i < data.length; i++) { var segment = data[i].split(":"); playSegment(segment, time); time += 100; } } function playSegment(segment, time) { timeouts.push( setTimeout(function () { if (segment[0] == "mm") { pointer.style.visibility = "visible"; mouseMove(segment[1]); } if (segment[0] == "mc") { pointer.style.visibility = "visible"; mouseClick(segment[1]); } if (segment[0] == "mch") { pointer.style.visibility = "visible"; mouseChange(segment[1]); } if (segment[0] == "ti") { pointer.style.visibility = "visible"; fillInput(segment[1]); } if (segment[0] == "sc") { pointer.style.visibility = "visible"; doScroll(segment[1]); } }, time) ) } function mouseMove(mouse_pos) { pointer.style.visibility = "visible"; var mouse_pos = mouse_pos.split(","); pointer.style.position = 'absolute'; pointer.style.left = mouse_pos[0] + 'px'; pointer.style.top = mouse_pos[1] + 'px'; } function mouseClick(segment) { var segment = segment.toString().split(","); if (segment[1] != 'undefined') { splitElements(segment).click(); } } function mouseChange(segment) { var segment = segment.toString().split(","); splitElements(segment).value = segment[3]; } function fillInput(segment) { var segment = segment.toString().split(","); splitElements(segment).focus(); splitElements(segment).value = segment[3]; } function doScroll(value) { slideTo(0, value, 100, 10, 1, 0); } function splitElements(new_elementdata) { var new_elementdata = new_elementdata.toString().split(","); var _element_type = new_elementdata[0]; var _element = new_elementdata[1]; var _element_val = new_elementdata[2]; switch (_element_type) { case '#': return document.getElementById(_element); //return ele; break; case '.': return document.getElementsByClassName(_element)[_element_val]; //return ele; break; case '$': return document.getElementsByName(_element)[_element_val]; //return ele; break; } } function stopSegments() { for (var i = 0; i < timeouts.length; i++) { clearTimeout(timeouts[i]); } timeouts = []; } /** Cookie **/ function setCookie(cname, cvalue) { var date = new Date(); var minutes = 10; date.setTime(date.getTime() + (minutes * 60 * 1000)); var expires = "expires=" + date; document.cookie = cname + "=" + cvalue + "; " + expires; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1); if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } /*end function cookie*/ function decteMobile() { return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1); } /* server connection */ function sendToServer(data) { var data = encodeURIComponent(data); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { if (!session_status) { console.log(xmlhttp.responseText); session_id = xmlhttp.responseText; session_status = true; cookieBuider(session_id); } else { console.log(xmlhttp.responseText); } } } //xmlhttp.open("POST", "http://localhost:88/weblook-analytics/api/index.php", true); xmlhttp.open("POST", "http://www.gurulytics.com/api/index.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var _param; if (!session_status) { if (!session_init) { pathname = window.location.pathname; hostname = window.location.protocol + '//' + window.location.hostname; browser = get_browser_info(); window_width = getWindowWidth(); window_height = getWindowHeight(); browser_language = get_browser_language(); decteMobile = decteMobile(); _param = "action=newsession"; _param += "&hostname=" + hostname; _param += "&pathname=" + pathname; _param += "&browser=" + browser.name; _param += "&platform=" + navigator.platform; _param += "&browser_language=" + browser_language; _param += "&window_width=" + window_width; _param += "&window_height=" + window_height; _param += "&mobile_or_pc=" + decteMobile; _param += "&data=" + data; _param += "&parent_link_id=" + parent_link_id; session_init = true; } } else { _param = "action=record"; _param += "&session_id=" + session_id; _param += "&duration=" + totalSeconds; _param += "&data=" + data; } xmlhttp.send(_param); } function get_browser_language() { return navigator.language; } function get_browser_info() { var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; if (/trident/i.test(M[1])) { tem = /\brv[ :]+(\d+)/g.exec(ua) || []; return {name: 'IE', version: (tem[1] || '')}; } if (M[1] === 'Chrome') { tem = ua.match(/\bOPR\/(\d+)/) if (tem != null) { return {name: 'Opera', version: tem[1]}; } } M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?']; if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); } return { name: M[0], version: M[1] }; } function slideTo(x, y, time, decelRate, interval) { if (!decelRate) decelRate = 1; if (!interval) interval = 25; slideTo_h(x, y, time * decelRate, decelRate, interval, (new Date()).getTime()); } function slideTo_h(x, y, time, decelRate, interval, dateTime) { if (time <= 0) { window.scrollTo(x, y); return; } var now = (new Date()).getTime(); setTimeout(function () { slideTo_h(x, y, time - interval * decelRate, decelRate, interval, dateTime + interval); }, interval + dateTime - now); var m = interval / time; var rateX = (x - window.scrollX) * m; var rateY = (y - window.scrollY) * m; window.scrollBy(rateX, rateY); }