CSS guidance for developers

• 

  gregg

  May 07, 2021 00:43

  Eric Miller The approach we have used is to just add a custom HTML attribute to all user interface (UI) elements that we want tracked in Pendo.

  And then we listed that custom HTML attribute in our Pendo account on the Custom HTML Attributes section of the Agent Settings page.

  To keep the values unique, the standard we use for the value is: 

  <path>#<feature>

  Where the path is just the URL path of the page and the feature is typically just the word(s) on the button or link.

  So for example, if on the Orders page we have a button with the text "Buy Label" the custom attribute would be:
  
  data-pendo-id="/orders#buy-label"

  When I use Pendo's feature tagging UI, it typically locks in on these values and will immediately calculate the correct CSS selector. For the example above:

  [data-pendo-id="/orders#buy-label"]

  The downside here, of course, is that this requires developer intervention, which some would say defeats the purpose of an "implicit tracking" system like Pendo. 

  But the cost seems small to us, especially compared to using an API (like the explicit tracking systems require).

  One of our lead developers has toyed with the idea of building the creation of the attribute into the framework that they use, so that it would just "always be there." The idea being that with a bit of logic, the value could be computed automatically, based on the path of the page and the text on the UI element. I have not yet been able to convince a product manager to prioritize that work, however. :/
  
  

  1
• 

  Da-Me Kim

  December 17, 2021 18:45

  Hi Eric, 

  That is an excellent solution and direction detailed by Greg. One thing to note, when utilizing custom HTML attributes, as Greg noted, they will need to be set up in the Settings > Subscription Settings > App Details > Agent Settings. if you are self-hosting the agent, then you'll need to re-download the agent with the custom HTML attributes added and custom HTML attributes are not retroactive. We only capture analytics from the point a custom attribute was added forward. 

  0
• 

  Isidore Gotto

  June 24, 2022 14:25 (Edited June 24, 2022 14:27)

  Our approach is very similar to what Gregg mentioned above our apps have a new front-end which makes it difficult to grab contextual identifiers and some apps are single page apps. 

  Feature tagging - when you need deeper insights, you need unique id's we have 2 steps process to helping our product teams: 

  1. Try using .class:contains("text value") this works well in many scenarios, but can be a nuisance when our application supports many languages or when we are working with a single page application.
  2. All other scenarios we recommend using our predefined Custom HTML Attributes example  data-pendo="value" our front-end developers are able to automatically populate contextual values to the element on screen.

  Feature Click Event Properties - our Pendo Admins are now using this to help collect additional elements from the UI screen to provide additional details ex. 

  • Dashboard screen may have multiple tiles of information, but each tile is using global CSS class and using child position will not work as each user will have a customized dashboard layout. Now with Feature Click Event Properties we can tag the card with a global class so all tiles are highlighted and then add properties (max 5 allowed) to capture - Tile Feature Name or other details within the tile users are interacting with. This has been very helpful and can be accomplished without involving development. 
  • Benefit - is that we have 1 Feature Tag and property values to split up engagement 

  Single Page Application Page Tagging - we have started using the Pendo location API / Annotated URLs to help in scenarios when:

  1. Working with a single page applications and the team needs to understand application usage by page, time on page, etc. 
  2. If application is using modal windows, lightbox overlays, slide-ins or any other screen overlay to help the team treat that application feature task as a page tag.  this helps us tell Pendo to treat specific UI Screens as pages. 
  3. Pro Tip - overall benefits of doing this is that you will have Page tags and can then assign your Feature Tags to the Page which helps Pendo narrow down the event interaction to the UI Screen. 

   

  0

Please sign in to leave a comment.