Skip to main content
Gainsight Inc.

Advanced Instrumentation

This article explains various configuration options in Gainsight PX for advanced instrumentation of your product.

Overview

Advanced Instrumentation is about using a combination of Gainsight PX features for the most effective instrumentation of your product.

Use CSS Selectors

What is CSS-Selector

A CSS selector is a syntax that is used to identify an HTML(DOM) element in order to set the element styling. The CSS selector is also used by Gainsight PX to track the element that was clicked on.

IMPORTANT:

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

You can specify a customized selector 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 that you like Gainsight PX to track and associate with features, then you need to specify these DOM elements by navigating to the Administration > SDK Settings page.

SDK Settings.jpg

Specify Elements

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

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

1. Add the exact element name or use a wildcard in case there is a pattern:

image-1.png
2. When you configure Tag UI Element from the menu options of a feature, choose the attribute in the selector that is populated automatically:

Mapper Selector.jpg

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.

Follow the best practices listed below:

  1. In Product Mapper, create a feature or add a custom event rule to an existing feature by selecting the relevant location on the tree:
    Product Tree new feature.jpg
  2. Add a custom event rule selecting Custom event from the menu options of a feature:
    Product Mapper Custom Events.jpg
  3. Set the rule values by selecting the custom event name. You can also use event properties as part of the rule.
    Event Rule Properties.jpg

Note:

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

 

  • Was this article helpful?