Skip to main content
Gainsight Inc.

Advanced Instrumentation

ATTENTION: Documentation Updates are in Process
We are in the process of updating the screenshots, GIFs, and content to match the latest UX based on the Horizon Experience’s new look and feel. To learn more about the Horizon Experience in Gainsight PX, click here.

Use CSS Selectors

What is css-Selector

A syntax that is used to identify an HTML(DOM) element in order to set it’s styling. Also used by PX to track the element that was clicked on.

Uniqueness

When pointing to a UI element the selector needs to be unique in a given page or across the product

Examples of common css selector logic

HTML element

Selector example

Description

<h2 class="navbar-header">

.navbar-header

Any element with class navbar-header

<div class="navbar-header">

div.navbar-header

Div element with class named navbar-header

<div class="navbar-header">

[class^="navbar"]

Class begins-with navbar

<div class="navbar-header">

[class$="header"]

Class ends-with header

<div class="navbar-header">

[class*="bar"]

Class contains bar

<div class="navbar-header">

.navbar-header

Element with class navbar

Relative path (position based)

p:nth-child(2)

Selects every <p> element that is the second child of its parent

Use Custom CSS Selector

Specifying a customized selector can be done by checking the custom option when creating a feature event rule and setting the selector manually.

You can also use a Custom Selector for sibling selector:

Selector:

#dashboard__kpis--new-accounts + .kpi

DOM Element with sibling

<div class="kpi" id="dashboard__kpis--new-accounts" />
<div class="kpi" id=""/>

Use Additional Page Elements for Instrumentation

In case your app uses customized HTML attributes you'd like Gainsight PX to track and associate with features, all you need to do is specify these DOM elements in the SDK settings page under account settings:

sdk-settings.png

Specify Elements:

For example - using data-example-id which is a custom element that can be tracked:

<div data-example-id="foo">
</div>

1. You'll need to add the exact element name or use wildcard in case there is a pattern:

image-1.png
2. Choose the attribute in the selector which will be populated automatically

clipboard_e724c8ad35ed984e54f90b510ccf8730e.png

Use Custom Events For Instrumentation

In case there are pre-existing custom events (see here) instrumented via code you can leverage the custom event mapping to associate these events with features.

  1. Create a feature or add a custom event rule to an existing feature by selecting the relevant location on the tree and using right click:
    image-2.png
  2. Add a custom event rule by right clicking on a feature:
    custom-event.jpg
  3. Setting the rule values can be done by selecting the custom event name. You can also use it's properties as part of the rule
    image-3.png

If you do not see the custom event in the list, it means the code that fires these events does not exist or is failing

 

  • Was this article helpful?