Splunk Completes Acquisition of Plumbr Learn more

How labels for interactions are found

When browser agent detects that an interaction started from the user interacting with some element (for example clicking a button), we try to label the element with the first found non-empty:

  1. A data-plumbr-service attribute on element or parent:
    <a href="/profile/23" data-plumbr-service="User Profile">John Doe</a>
    <p data-plumbr-service="Editable Features">
    	<span>Features to configure</span>
    	<label><input type="checkbox" /> Price</label>
    	<label><input type="checkbox" /> SKUs</label>
  2. A <label> element that has for attribute that matches the element id:
    <input type="checkbox" id="newsletter">
    <label for="newsletter">Send me marketing e-mails</label>
  3. Within the DOM tree (starting from interaction target) the first found:
    1. A parent <label> element
          <input type="checkbox" id="newsletter">
          Send me marketing e-mails
    2. An element with aria-label attribute
      <input type="text" name="location" aria-label="Location">
    3. An element with aria-labelledby attribute
      <input type="text" name="location" aria-labelledby="location-help">
      <p id="location-help">Enter Location</p>
  4. <img> alt attribute
    <a href="/sale">
        <img src="/img/sale.png" alt="Hot Sales">


  5. <img> filename
    <a href="/sale"><img src="/img/sale.png"></a>


  6. <input> value if type is button, radio or submit
    <input type="submit" value="Purchase">


  7. The text of first <option> element in <select>
    <select name="delivery">
        <option value="0">Select Delivery Method</option>
        <option value="1">Courier</option>


  8. title attribute of <i>
    <i class="fa fa-times" title="Remove">


  9. The text in closest parent <a>, <button>, <label>, <span>, <td> or <th>
    <a href="#">Continue to checkout</a>


Should none of these be found, a css selector is constructed from the target element and it’s parents.

<ul id="todo-list">
    <li class="item">
        <input type="text" name="item[]" value="Test labels">

Results in: ul#todo-list > li.item > input[type="text"][name="item[]"]