Felhasználói aktivitás követés

Weboldalon történő, felhasználói aktivitást követő API könyvtár.

Használatához rendelkezésre áll az UAT API

API elérhetőség

https://mcc-web.pointer.hu/assets/js/uat.api.js

Működési feltételek

Fontos! A HC Pointer Kft által fejlesztett illesztő még fejlesztés alatt áll, ezért most és a jövőben is célszerű a hostolt címről meghívni, vagy esetlegesen lementeni!

Az API csak JavaScript utasításokat használ, nem szükséges egyéb kiegészítő könyvtár használata.

Fontos! A működéshez szükséges egy API kulcs, melyet minden esetben a HC Pointer Kft. állít ki!

Paraméterezés

A függvény könyvtár, paraméterezéshez JavaScript object modellt használ, ami az előre definiált options obejktumon keresztül érhető el és módosítható.

	{
	'queue'			: 't_queue_user',
	'userid'		: '',
	'timeout' 		: 30000,
	'timer'			: 40,
	'cookie' 		: {
		'name'		: '_UAT',
		'expire'	: 24,
	},
	'events' 		: [{'name':'change.UAT.user','selector':'input#item','query':{'target':['className','id','innerText']}}],
	'system'		: {
		'log'		: false,
		'debug'		: false,
		'track'		: false,
		'profiler'	: false,
	},
	'xhr'			: {
		'method'	: 'PUT',
		'headers'	: {},
		'url'		: '127.0.0.1/uat',
	}

A megadott default paraméterezés szabadon bővíthető, módosítható.

Options

Paraméter Típus Leírás Default
queue String Küldési-sor szonosító ""
userid String Felhasználói azonosító ""
timeout Integer Várakozási idő kommunikációk között (ms) 3000
timer Integer Mintavételezések közti idő (mouse) (ms) 40
cookie Object Cookie paraméterek {}
events Array Események []
system Object Rendszer beállítások {}
xhr Object Kommunikációs beállítások {}

Cookie

Paraméter Típus Leírás Default
name String Elnevezés _UAT
expire Integer Lejárat 24

Events

Paraméter Típus Leírás Default
name String Elnevezés event.UAT.name
selector String Selector Selector
query Object Szűrő query
snapshot HTML Snapshot NULL

Snapshot event használata, csak paraméterezéssel érhető el; system.profiler

A query szűrő paraméter tartalmaz egy target nevű tömböt, amiben fellehet sorolni a begyűjteni kívánt ELEMENT specifikus tulajdonságokat.

System

Paraméter Típus Leírás Default
log Boolean Naplózás false
debug Boolean Debug naplózás false
track Boolean Document változás naplózás false
profiler Boolean Document snapshot false

Xhr

Paraméter Típus Leírás Default
method String HTTP kommunikáció típus PUT
headers Object HTTP fejlécek {}
url String Kommunikációs végpont ""

Minta kódok

			UAT().trackEventClick();
			UAT().trackEventInput();
			UAT().trackEventAjax();
			UAT().trackEventSubmit();
			UAT().trackDocumentReady();
			
			//Events
			let events = [
			  { 'name': 'click.UAT.user', 'selector': 'mat-row, div[role=tab]', 'query': { 'target': ['className', 'id', 'innerText', 'href', 'localName', 'value'] } },
			  { 'name': 'mouseenter.UAT.user', 'selector': 'div.cdk-overlay-pane', 'query': { 'target': ['className', 'id', 'innerText', 'href', 'localName', 'value'] } }
			]

			//Params
			let param = {
			  'xhr': {
				'url': 'http://127.0.0.1:8010/'
			  },
			  'queue': 'u_queue_user',
			  'events': events,
			  'system': {
				'log': false,
				'debug': false,
				'track': true,
			  },
			}

			//Declaration
			let uat = new UAT(param);

			//Standard events
			uat.trackEventClick();
			uat.trackEventInput();

Xhr

Xhr kommunikáció monitorozása

	UAT().trackEventAjax();

Beépített függvény, xhr.UAT.tracker néven, a document element-t xhr event-et monitorozza és a readyState, responseURL, responseType, response tulajdonságát gyűjti.

	'name' 			: 'xhr.UAT.tracker',
	'selector'		: 'document',
	'query' 		: {
		'target' 	: [
			'readyState',
			'responseURL',
			'responseType',
			'response'
		]
	}

Xhr

Paraméter Típus Leírás Default
readyState Integer XHR eredmény readyState
responseURL String Válasz URL responseURL
responseType String Válasz típus responseType
response responseType Válasz response

Minta kódok

			UAT().trackEventAjax();
			
			//Events
			let events = [
			  {'name':'xhr.UAT.user','selector':'document','query':{'target':['readyState','responseURL','responseType','response']}}
			]

			//Params
			let param = {
			  'xhr': {
				'url': 'http://127.0.0.1:8010/'
			  },
			  'queue': 'u_queue_user',
			  'events': events,
			  'system': {
				'log': false,
				'debug': false,
				'track': true,
			  },
			}

			//Declaration
			let uat = new UAT(param);

Kommunikáció

Gyűjtött adatok küldése

Nem definiált, vagy üres távoli kiszolgáló esetén; options.xhr.url = '', az adatgyűjtés eredménye, console naplózára van irányítva.

A kommunikáció megadott időközönként történik; options.xhr.timeout = '30000' (ms).

A kommunikáció HTTP methodja; options.xhr.method = 'PUT'

Kommunikáció paraméterezése

	let param = {
	  'queue': 'u_queue_user',
	  'timeout': 30000,
	  'xhr': {
		  'method':'PUT',
		  'headers':{'x-api-key':'TOKEN'},
		  'url':'127.0.0.1/uat'
	  }
	}
Options
Paraméter Leírás Érték
method HTTP method PUT
headers Opcionális HTTP fejlécek {}
url Távoli kiszolgáló URL ''

Minta kódok

			let param = {
			  'queue': 'u_queue_user',
			  'timer': 30000,
			  'xhr': {
				  'method':'PUT',
				  'headers':{'x-api-key':'TOKEN'},
				  'url':'127.0.0.1/uat'
			  }
			}

Mouse events

Felhasználói egérműveletek monitorozása

	UAT().trackMouseMove();

A funkcióhoz tartozó beállítás; options.timer. A paraméterrel állítható a mintavételezések közötti idő (ms).

Beépített függvény, mousemove.UAT.tracker néven, az egér move eseményeit monitorozza. Az esemény bekövetkeztekor; clientX, clientY, screenX, screenY tulajdonságát gyűjti.

	'name' 		: 'mousemove.UAT.tracker',
	'selector'	: 'body',
	'query'		: {
		'event': [
			'clientX',
			'clientY',
			'screenX',
			'screenY'
		]
	}

Event

Paraméter Típus Leírás Default
clientX Float Kliens X koordináta clientX
clientY Float Kliens Y koordináta clientY
screenX Float Screen X koordináta screenX
screenY Float Screen Y koordináta screenY

Minta kódok

			UAT().trackMouseMove();

Form

Űrlap műveletek monitorozása

	UAT().trackEventSubmit();

Beépített függvény, submit.UAT.tracker néven, a form element-t, submit eseményeit monitorozza. Az esemény bekövetkeztekor; className, id, innerText, href localName, value tulajdonságát gyűjti.

	'name' 		: 'submit.UAT.tracker',
	'selector'	: 'form',
	'query'		: {
		'target': [
			'className',
			'id',
			'innerText',
			'href',
			'localName',
			'value'
		]
	}
	
	UAT().trackEventInput();

Beépített függvény, focus.UAT.tracker néven, az input element-t, focus eseményeit monitorozza. Az esemény bekövetkeztekor; className, id, innerText, href localName, value tulajdonságát gyűjti.

	'name' 		: 'focus.UAT.tracker',
	'selector'	: 'input',
	'query'		: {
		'target': [
			'className',
			'id',
			'innerText',
			'href',
			'localName',
			'value'
		]
	}

Form

Paraméter Típus Leírás Default
className String Class név className
id String Azonosító id
innerText String Tartalmazott érték innerText
href String Anchor href érték href
localName String Név localName
value String Value érték value

Minta kódok

			UAT().trackEventInput();
			UAT().trackEventSubmit();
			
			//Events
			let events = [
			  {'name':'click.UAT.submit','selector':'#submit'},
			  {'name':'change.UAT.user','selector':'input#username','query':{'target':['className','id','innerText','href','localName','value']}}
			]

			//Params
			let param = {
			  'xhr': {
				'url': 'http://127.0.0.1:8010/'
			  },
			  'queue': 'u_queue_user',
			  'events': events,
			  'system': {
				'log': false,
				'debug': false,
				'track': true,
			  },
			}

			//Declaration
			let uat = new UAT(param);

Document

HTML document változások monitorozása

	UAT().trackDocumentReady();

A funkció, a DOMContentLoaded eseményt használja. Amennyiben az API könyvtár a dokumentum végén van hivatkozva, a betöltés nem követhető.

Beépített függvény, DOMContentLoaded.UAT.tracker néven, az document element-t, DOMContentLoaded eseményeit monitorozza. Az esemény bekövetkeztekor; baseURI, documentURI, domain, URL referrer, characterSet, lastModified, readyState, title tulajdonságát gyűjti.

	'name' 			: 'DOMContentLoaded.UAT.tracker',
	'selector'		: 'document',
	'query' 		: {
		'document'	: [
			'baseURI',
			'documentURI',
			'domain',
			'URL',
			'referrer',
			'characterSet',
			'lastModified',
			'readyState',
			'title'
		],
	}

Document

Paraméter Típus Leírás Default
baseURI String Base URI baseURI
documentURI String Document URI documentURI
domain String Domain domain
URL String URL URL
referrer String Referrer referrer
characterSet String Karakter szett characterSet
lastModified String Utolsó módosítás lastModified
readyState String Állapot readyState
title String Cím title

Minta kódok

			UAT().trackDocumentReady();

Egyedi események

Egyedi események monitorozása

	{'name':'change.UAT.user','selector':'input#item','query':{'target':['className','id','innerText','href','localName','value']}}

Events

Paraméter Típus Leírás Default
name String Elnevezés event.UAT.name
selector String Selector Selector
query Object Szűrő query

A query szűrő paraméter tartalmaz egy target nevű tömböt, amiben fellehet sorolni a begyűjteni kívánt ELEMENT specifikus tulajdonságokat.

Minta kódok

			//Events
			let events = [
				{'name':'click.UAT.menu','selector':'.navbar [href]'},
				{'name':'click.UAT.search','selector':'#search-item-submit,#search-user-submit,#search-submit'},
				{'name':'change.UAT.auto','selector':'#auto input','query':{'target':['id']}},
				{'name':'change.UAT.manual','selector':'#manual input','query':{'target':['id']}},
				{'name':'xhr.UAT.user','selector':'document','query':{'target':['readyState','responseURL','responseType','response']}},
				{'name':'click.UAT.user','selector':'a, button','query':{'target':['className','id','innerText','href','localName','value']}},
				{'name':'change.UAT.user','selector':'input#item','query':{'target':['className','id','innerText','href','localName','value']}}
			]

			//Params
			let param = {
			  'xhr': {
				'url': 'http://127.0.0.1:8010/'
			  },
			  'queue': 'u_queue_user',
			  'events': events,
			  'system': {
				'log': false,
				'debug': false,
				'track': true,
			  },
			}

			//Declaration
			let uat = new UAT(param);

Használat

Az UAT használata

A példában, a távoli kiszolgálóra való küldés nem aktív options.xhr.url = ''.

Monitorozva
Beépített módon:click.UAT.tracker a click esemény; uat.trackEventClick
Felhasználó által definiálva: change.UAT.user a change esemény; input[role=search]

A naplózás debug módra van állítva options.system.debug=true.

A várakozás options.timeout; 300 ms.

A console log megjelenik a loggolásra kialakított DIV-ben.

Az search input mező change esemény, valamint a search button click esemény monitorozott paraméterei jelennek meg a log DIV-ben.

API

		<script type="text/javascript" src="https://mcc-web.pointer.hu/assets/js/uat.api.js"></script>

Egyedi eventek definiálása

	//Events
	let events = [
		/* CHANGE
		* INPUT CHANGE
		* input[role=search]
		*/
		{ 'name': 'change.UAT.user', 'selector': 'input[role=search]', 'query': { 'target': ['id', 'value'] } }
	]

Paraméterezés

	//Params
	let param = {
	  'queue': 'u_queue_test',
	  'timeout': 300,
	  'events': events,
	  'system': {
		'log': false,
		'debug': true,
		'track': false,
	  },
	}

UAT deklaráció

	//Declaration
	let uat = new UAT(param);

	//Standard events
	uat.trackEventClick();

Magyarázat

		UAT DEBUG event add a[href], button | click | https://mcc-web.pointer.hu/docs/uat/index?#
Event add
Paraméter Leírás Érték
Element Regisztrált element lista a[href], button
Events Regisztrált event lista click
URL Anchor element HREF https://mcc-web.pointer.hu/docs/uat/index?# 
		UAT DEBUG send data {"UATLIST":[{"queue":"u_queue_test","userid":GUID,"type":"click","namespace":"click.UAT.tracker","domain":"mcc.hcpointer.hu","url":"https://mcc-web.pointer.hu/docs/uat/index?#use","referrer":"https://mcc-web.pointer.hu/docs/uat/index","timestamp":"2021-02-25 10:35:15","pageX":1228,"pageY":14641,"scrollX":0,"scrollY":13773,,"height":15929,"width":1903,"data":[{"className":"btn btn-primary mb-2","id":null,"innerText":"Search","href":null,"localName":"button","value":null,"label":null,"aria-label":null}]}]}
Event trigger
Paraméter Leírás Érték
UATLIST Esemény eredmény lista a[href], button
Queue Regisztrált event lista u_queue_test
userid User azonosító GUID
type Event típus click/td>
namespace Event namespace click.UAT.tracker
domain Domain mcc.hcpointer.hu
url Url https://mcc-web.pointer.hu/docs/uat/index?#use
referrer Referrer https://mcc-web.pointer.hu/docs/uat/index
timestamp Event timestamp 2021-02-25 10:35:15
pageX/Y Document X, Y koordináta 1228, 14641
scrollX/Y Scrollbar X, Y koordináta 0, 13773
height/width Méretek 15929, 1903
data Regisztrált tulajdonságok []

Log

Teszt