|
|
|
class Metriki {
|
|
|
|
url = null
|
|
_isConnected = false
|
|
_isRendered = false
|
|
|
|
set isRendered(value) {
|
|
|
|
this._isRendered = value
|
|
this.mount()
|
|
}
|
|
set isConnected(value) {
|
|
this._isConnected = value
|
|
this.mount()
|
|
}
|
|
get isRendered() {
|
|
return this._isRendered
|
|
}
|
|
get isConnected() {
|
|
return this._isConnected
|
|
}
|
|
mount() {
|
|
if(this.isRendered && this.isConnected) {
|
|
this.emitVisit()
|
|
}
|
|
}
|
|
emit(data){
|
|
this.ws.send(JSON.stringify(data))
|
|
}
|
|
emitVisit(){
|
|
this.emit({"href":window.location.href,"html":document.documentElement.outerHTML,"title":document.title,"domain":window.location.host})
|
|
this.addEventListeners()
|
|
}
|
|
addEventListeners(){
|
|
const me = this
|
|
document.addEventListener('mousemove', (e) => {
|
|
me.emit({
|
|
"event":"mousemove",
|
|
"tag":e.target.tagName,
|
|
"scroll_height":document.documentElement.scrollHeight,
|
|
"scroll_left":document.documentElement.scrollLeft,
|
|
"scroll_top":document.documentElement.scrollTop,
|
|
"client_width":document.documentElement.clientWidth,
|
|
"client_height":document.documentElement.clientHeight,
|
|
"target":e.target.id || e.target.className || e.target.tagName,
|
|
"page_x":e.pageX,
|
|
"page_y":e.pageY,
|
|
"screen_x":e.screenX,
|
|
"screen_y":e.screenY,
|
|
"client_x":e.clientX,
|
|
"client_y":e.clientY,
|
|
"target_x":e.target.offsetLeft,
|
|
"target_y":e.target.offsetTop
|
|
})
|
|
})
|
|
document.addEventListener('scroll', (e) => {
|
|
me.emit({
|
|
"event":"scroll",
|
|
"target":e.target.id || e.target.className || e.target.tagName,
|
|
"scroll_height":document.documentElement.scrollHeight,
|
|
"scroll_left":document.documentElement.scrollLeft,
|
|
"scroll_top":document.documentElement.scrollTop,
|
|
"client_width":document.documentElement.clientWidth,
|
|
"client_height":document.documentElement.clientHeight
|
|
})
|
|
})
|
|
document.addEventListener('click', (e) => {
|
|
me.emit({
|
|
"event":"click",
|
|
"target":e.target.id || e.target.className || e.target.tagName
|
|
})
|
|
})
|
|
}
|
|
|
|
constructor() {
|
|
this.url = window.location.href.replace("http://", "ws://").replace("https://", "wss://").replace("www.", "")
|
|
if(this.url.endsWith("/")){
|
|
this.url += "event"
|
|
}else{
|
|
this.url += "/event"
|
|
}
|
|
this.url = "wss://metriki.molodetz.nl/event"
|
|
const me = this
|
|
this.ws = new WebSocket(this.url)
|
|
this.ws.onopen = () => {
|
|
me.isConnected = true
|
|
}
|
|
this.ws.onmessage = (e) => {
|
|
console.log(e.data)
|
|
}
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
me.isRendered = true
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const metriki = new Metriki()
|