Best development approach to optimize tagging of unique features

  • 13 March 2020
  • 1 reply

Userlevel 3

Our product is built in Angular and has one URL that doesn’t change based on the page you are on. In order to map a feature within the Product Mapper and have it track as unique, our developers have been putting unique ID’s on specific elements. We recently started discussing best practices around how to set a more regimented format for attributing/naming elements in the code so there isn’t any confusion.


Anyone else have advice they can share around the following:

  • What is the best type of selector to use - a unique ID on an element or an attribute?
  • What naming conventions have worked well, do you include anything like “data_gs” in the name?
  • Any other development strategies that have made tagging in the Product Mapper easier?

1 reply

Userlevel 5

Hi @ajrufer , welome back!


While other customers share their experiences, parts of your question should be answered from:

How to ensure element selectors configured in Gainsight are resilient against UI changes?

Example use case for the question: 

  • Main menu - the tool identifies selector as nth-child(2) = this will cause the tracking to fail if we add another menu before this
  • Safer would be using a combination of element name/id attributes. Any way to config the tool to prefer a selector or have to provide it manually?

Our tool prefers a unique selector on the page being used in the following order of preference:

  • Element id
  • Class
  • Element tag name
  • Href for an element from type a
  • Nth-child
  • What it means is, we will prefer to have a selector with id if it is available. 
  • In case you are aware of any other attributes on an element that can be unique, it is possible to add them to our SDK settings (Settings > SDK Settings > DOM Elements) so our selector detector will use them as well.

Let me know what you think.