Skip to main content
Gainsight Inc.

Advanced Instrumentation

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 elements in the SDK settings page under account settings:

sdk-settings.png

Specify Elements (Wildcards can be Used as well):

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

<div class="viewWrapper" viewname="P287" data-example-555="P287">
</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

image.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

CSS Match based on Text (Text Match)

Although best practice is to use a css selector that is consistent and does not change across deployments (i.e. a classId or data-tag), there are cases where this is not available.

In the cases where a stronger css selector is not available, PX offers the ability to match a css element against its text (i.e button, label).

Contact support if you are interested in having this turned on in your PX Subscription.  Once enabled, you will see an additional option in the CSS Selector dialog that allows you to enter in the Title to match against.

For example, the below web application has a button with an id that changes values per deployment.  The only consistent element is the title "Click Me"

clipboard_e2e6e4257e744e8d7e5523b9ec411b6b8.png

The below screenshot shows how to configure the PX Selector Editor to match the button.  Simply select the Match Text option and enter in the Element value, in this case "Click Me"

clipboard_e519a9649fab7724ffcff74ccdcb2d180.png

  • Was this article helpful?