:contains() on child elements
I'm trying to tag something similar to the example from the Advanced Feature Tagging article.
In that article, they gave two examples of rules for tagging this button:
The anchor, Rule A:
[href="/assets/pages/generic.html"]The span, Rule B:
span:contains('Generic Page')
What I'm trying to do is use :contains() on child elements. So continuing with this example, it would be something like
The anchor and the contents of its child, Rule C:
.button:contains('Generic Page')
I know in this specific example that this isn't the best way to tag this button, but this is the only way I can think of in my app to tag a certain button.
When I try out my rule in the Pendo Visual Design Studio, it highlights my button as expected. Also, when I try in Pendo.Sizzle in the Console, it works as expected. However, I don't see any Feature Clicks for this feature. Also, when I use Event Monitoring in the Debugger, I can't see the contents of child elements.
I should add that in the article What CSS Selectors Are Supported For Feature Tagging?, it says
If you are using nested element (e.g. a class inside of another class) you cannot use more than one contains rule in a feature tag and the contains rule must be on the last feature in the tag.
I don't think I'm breaking these rules but I might not fully understand them.
So my question is: Am I doing something wrong or is using :contains() on child elements just not supported for Pendo Feature tagging?
Comments
Hey Shane - when you say you're not seeing clicks on the feature, how long are you giving Pendo to surface that data?
Based on my knowledge of HTML and Pendo tagging, what you're doing is correct and should be sufficient
Thanks for the quick comment, Doug McDaniel! I tried some clicks yesterday that still haven't appeared in Pendo. I also tried debugging using Raw Events, as described in another Community post, but I can't see the child element that contains the actual button label. So I don't think processing time is the problem.
However, I think I may have found my problem: while the button itself is 36px by 36px, its label span is 1px by 1px and isn't actually visible on screen (it's was added for accessibility so screenreader users could understand it).
So clicks on the button don't register as clicks on the span. And Pendo doesn't know the label of the button that was clicked unless that single-pixel span is clicked exactly.
I'll test this theory then post an update.
Please sign in to leave a comment.