Visualization of the page operation path with all (no) buried points in front

1. What is full (no) burial point?

The first is not to write no code at all, but to write as little code as possible. Developers integrate the SDK into their projects, configure and initialize the SDK, and automate the collection of user behavior data.

2. Page operation path

2.1 Click the operation path

Page action path refers to what the user has clicked on the current page; For example, the user clicks button 1 on the current page and then button 2,…. ; Note the difference between user access path and user access path. User access path refers to multiple page paths accessed by users in a session.

2.2 Scrolling operation Path

Scrolling operation path refers to the record of page scrolling position information, in order to facilitate the statistics of users scrolling from the top down in the page, from where the probability of jumping out of the page.

3. xpath

XPath is a language for finding information in XML documents. XPath is used to navigate through elements and attributes in AN XML document. Fully buried points record the xpath path of the clicked target object in the document structure of the page.

4. Obtain the jS library of xpath

function ellocate (el) { var locator = { xpath: '', css: ''}; var eloc = { getClass: function(el) { var formatClass = ''; var elementClass = el.className; if(typeof elementClass ! = 'undefined' && elementClass ! = ''){ formatClass = '.' + elementClass.split(/[\s\n]+/).join('.'); } return formatClass; }, index: function(el) { var elements = el.parentNode.children; for (var i=0; i<elements.length; i++) { if( elements[i] == el){ return i; }}}}; for (; el && el.nodeType == 1; el = el.parentNode) { var idx = eloc.index(el); If (el. TagName. The substring (0, 1)! = "/" && el.tagName.toLowerCase() ! == 'body' && el.tagName.toLowerCase() ! == 'html') { //IE oddity: some tagNames can begin with backslash. if(el.id ! = 'undefined' && el.id ! ='') { var idPath="[@id=" + "'" + el.id + "'" + "]"; locator.xpath = '/' + el.tagName.toLowerCase() + idPath + locator.xpath; locator.css = el.tagName.toLowerCase() + '#' + el.id + ' > ' + locator.css; } else { idx='[' + idx + ']'; locator.xpath = '/' + el.tagName.toLowerCase() + idx + locator.xpath; locator.css = el.tagName.toLowerCase() + eloc.getClass(el) + ' > ' + locator.css; } } } locator.xpath = '//html[1]/body[1]/' + locator.xpath; locator.css = locator.css.substr(0, locator.css.length-3); return locator; };Copy the code

The above method returns CSS selectors and XPath expressions for a given EL element.