ProdPerfect / prodperfect-keen-tracking.js

Keen IO Streams SDK - record events from anywhere in your stack
https://keen.io/products/streams/
MIT License
3 stars 4 forks source link

Collect nth-parent element information. #36

Open funkhouserw opened 5 years ago

funkhouserw commented 5 years ago

Note: this is something that should be tested out in the recording-snippet first. Putting it here for reasons of sanity.

Summary:

The exact element being clicked often lacks adequate identifiers and is better described by one of its parents.

Example:

if someone clicks on the 'svg' within a link of a product, the selector may just show up as:

div > div > div > a > bold > svg

The attributes on the 'svg' item are negligible. The information about the a tag or any of the divs is likely more valuable. In this hypothetical, let's actually assume that we could also describe that selector by looking at the divs' classes:

div.product-container > div.product > div.title > a > bold > svg

Clearly, this provides substantially more information to us.

V0 Scope:

For a given clicked element, provide the element attribute information up to the clicked-element's 4th parents. (e.g. the href, class, id, etc, of the first, second, third, and fourth parent of the clicked element)

This may cause issues with speed,etc. We can resolve

V1 Scope:

Traversing though these parents can stop if any of the following criteria is met:

V2 Scope:

Traversing up the parents can stop if, for a given parent, it appears that this element is a "container" of similar children.

For example, if we have the following selector of a clicked 'a' element... div > div.product_container > div.product > div.title > a

Step 1: "div.title" "Does this contain multiple children of structure a"? No. Step 2: "div.product" . "Does this contain multiple children of structure div.title . > a"? No. Step 3: "div.product_container". "Does this contain multiple children of structure div.product > div.title . > a"? Yes? Stop here!

Provide the element attributes for div.product_container and also provide information stating that "div.product_container" contains repeated elements.

V3 Scope:

Provide how many times a given element class occurs on the page for the clicked element and its nth-parents.

Reasoning: oftentimes classes are unique on various containers. If this proves reliably unique (as it does for many customers), we can better use it.

In the v2 scope example, if . div.product_container occurred only once on this page, report this information. Similarly, if . div.product occurs 20 times, report this information.