Skip to main content
Gainsight Inc.

Instrument Your Product using In-App Mapper

This article explains how to use the Product Mapper modeling and instrumentation tool.

Overview

The Product Mapper feature allows you to model your product using a simple and powerful hierarchical tree structure that is designed to help you quickly and effectively map your product’s features and associate the tracked user events into the corresponding features and modules with zero coding.

Modeling can be modified anytime time using a simple drag-and-drop.

Prerequisite

To use Product Mapper, ensure that the Gainsight PX tracking code is configured in your application. Anatomy of Product Mapper. For more information, refer to the Install Gainsight PX on Your Web App article.

Manual Instrumentation in Product Mapper

This section explains the process of creating Modules and Features in Product Mapper to instrument features in your application. In this tutorial, the Gainsight NXT application is used to demonstrate the process of identifying Modules and Features. Gainsight PX recommends to apply the same process to your application.

Tag and Create Feature 

Use the Tag & Create Feature button to tag UI elements and create features in Product Mapper. This brings a unified rule creation capability for CSS selectors and texts.

  1. Click Start Mapping.
  2. Enter the URL of the page on which the UI element is located. 
  3. Click Launch. You are navigated to the URL. You can see that Product Mapper is now embedded on top of the target web page.
  4. Click Tag & Create Feature.
  5. Click on the desired UI element to be mapped. A New Feature window displays.
  6. Configure the Scope and Selector details of the feature, if you want to modify the default settings.
  7. Click Save. The element is mapped as a feature in Product Mapper.

SB Admin Angular 4 BS4 - Google Chrome 2021-09-02 at 4.43.28 PM.jpeg

Create Features with Only Text Matches

You can use the Match Text option that can create features with text match only. This helps in preventing applications with dynamic UI elements from experiencing CSS selector match issues and provides flexibility to map the unique elements faster.

Note: Features created using this option cannot be backfilled.

Mapper Text Match.png

Create Tag UI Element Rule

This subsection describes how to create Tag UI Element rules. UI Element rules track the number of times a UI element (button) is clicked.

To create URL rule:

  1. Right-click the required module and select Add Feature.
  2. Enter a name for the feature in the text box and press the enter key. This event will count the number of times the Export button (on the Home page) is clicked. You can analyze the number of times the specific page has been exported by users.
  3. Follow steps 1 and 2 to identify multiple features under the Audience Explorer Module or any other Modules.
  4. Click the Home Page Export count feature.
  5. Click Start Mapping.
  6. Enter the URL of the page on which the required button is located. (Here URL of Gainsight NXT application’s Home page).
  7. Click Launch.

Homepage Export Count.jpg

You are navigated to the URL. Here the target URL is Gainsight NXT’s Home feature. Hence, you are navigated to the Home page. You can see that Product Mapper is now embedded on top of the Home page. You can configure UI Element rules from the application.

Prod Mapper URL redirect.png

  1. From the Select feature drop-down menu, select the Home Page Export count feature. You must select the feature which you created in Step 2.
  2. Click Tag UI Element as feature.
  3. Select the EXPORT button. The Event window is displayed. The Scope page displays the URL of the page on which the button is located. It is very important to add the wildcard (*) on the Scope tab. The Selector tab displays the path used to reach the selected element.
  4. Click Save.

Mapping Menus

If you have sub-menus and drop-down lists in your application, you can map them with the “Tag UI Element” rule. When mapping a sub-element, you must temporarily turn off the mapping to reach the required element. Once you select the “Tag UI Element” button, press ctrl+alt+m to disable mapping. Once you reach the desired location on UI, you can again press ctrl+alt+m to enable mapping.

Advanced DOM Tracking

You can configure the tracking code to use DOM elements present in your application. For more information, refer to the Advanced Instrumentation article.

Create UI Text Element Rule

This subsection describes how to create UI Element Text Match rules. Text match rules against the element's label (such as button label or text label), to identify an element when there are multiple UI elements with similar CSS.

To create the UI Text Element rule:

  1. Click the Product Mapper icon from the left pane.
  2. On the Product Feature Tree ® page, click on the feature.
  3. Click Start Mapping.
    Note: Alternatively, you can also click on the UI Text Element button on the top right corner to define the URL and element text rule from the PX application.  
  4. Enter the URL of the page on which the required UI element exists.
  5. Click Launch. You are navigated to the target page and the in-app Product Mapper options are displayed on top of the page.
  6. From the Select feature drop-down menu, select the feature.
  7. Click on the UI Text Element rule icon.
  8. Click on the UI element that must be tracked when clicked. The Event window is displayed. 
    Notes:
  • The Scope tab displays the URL of the page. Add the wildcard (*) to the URL.
  • The Text Element tab displays the path to the selected element.
  1. Click Save.
  2. Click Exit to navigate to the PX application.

Note: Features Mapped using the UI Text Element rule are not eligible for Backfill.

Create Custom Event Rule

A custom event is used to track those parts of your application that are not present on the UI. The steps to create a custom event rule are the same (up to step 8) as in the Create Tag UI Element Rule section of this document.

To create a Custom Event Rule:

  1. Refer to the Create Tag UI Element Rule (initial 8 steps) section above.
  2. From the Select feature drop-down menu, select the required feature (here Home Custom Event). You must select the feature which you created.
  3. Click the Custom Event Rule as Feature.
  4. From the drop-down menu, select the required custom event. The options displayed in the drop-down menu, are created by your developers.
  5. Click Save.

To learn about all frequently asked questions, refer Product Mapper FAQs article from the Additional Resources section.

View Mapped Features and Product Tree Path

Product Mapper has a Show mapped features option that helps you view the features mapped already in the selected URL of your application. This helps in identifying the features that are yet to be mapped thus avoiding duplicate mapping.

Show Mapped features.png

You can view the full path of feature/module names in the search results dropdown list in Product Mapper. This helps to select the right feature or modules, especially in scenarios where there are similar feature names within different modules.

Product Mapper search.png