CSS guidance for developers
We have some challenges with tagging features due to the way our front end has been coded. I've seen the article on Advanced Feature Tagging, but wondering if there is any documentation of recommendations for front end developers around best practices for CSS that will support easy and accurate tagging of features in Pendo?
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:
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:
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:
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. :/
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.
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:
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.
Single Page Application Page Tagging - we have started using the Pendo location API / Annotated URLs to help in scenarios when:
Please sign in to leave a comment.