Contextual Event Properties
For our use case, we'd like to dynamically add metadata to some of our click events.
For example, we have a table that is dynamically populated based on inputs in a form. The row HTML Elements in this table each have a different data-id property and several children elements (buttons / links). We would like to tag each one of those buttons/links with a Feature Click and set an Event Property to the parent element data-id property. Is this possible with Event Properties?
0
Comments
Hey Christian - This should be possible with Click Event Properties. This is a feature that is disabled by default, but can be enabled by a Subscription Admin within the Subscription Settings.
Once enabled, Click Event Properties can only be configured by a Subscription Admin. Depending on the size of your team, this usually involves some request process put in place.
You can learn more about this in this help article.
Hi Greg,
We have Click Event Properties enabled and working for some Feature Clicks. What I've not been able to do is dynamically assign the data-id of the parent element when a child is clicked. We have thousands of rows in this table, so tagging them individually with the parent element data-id as an Event Property is not feasible.
I guess what I'm asking is if there is a way to use the targeted element as a base and then navigate the DOM from that element to get a separate element's property. I see when I use the Pendo debugger that the entire DOM tree to the target node is recorded during the click event, but I cannot figure out a good way to target one of those parents to add it's properties to the Feature Click's metadata.
Say we have a trivial example element:
I'd like to be able set up targets to the buttons by using `[data-pendo-id="button1"]` and `[data-pendo-id="button2"]`, and then populate the Event Property with the parent data-id. So if "button1" was clicked in row 1, it would be populated with a data-id of "id1" and if it was clicked in row 2 the data-id of "id2" would be added.
From what I've seen in the guide, and from what I've been able to set up in some testing environments, is that when we try to set a target for our Event Property using either CSS or JS, the base of "search" is from the window, not from the element being tracked, so we cannot dynamically get the parent element.
A solution we've been playing around with is just using Track Events to create these dynamically, but it would be ideal for our use case to keep using Feature Clicks if that is possible.
Thank you for this added context, the sample code is especially helpful to illustrate the ask and pain you're facing. Unfortunately, I do not know that we have an ability with our current Click Event Properties to capture data dependent on which element you click upon.
As you mention, you are looking to use Track Events - this might be the best course of action as you'll have more visibility into the state of the click than we might.
Got it. We'll keep going down the Track Events path.
And we'd love if this was considered for a feature sometime in the future.
Thanks for your help, Greg!
I’m actually running into a similar use case where I need to traverse up the tree from the target element and grab the innerText of a parents immediate sibling. I tested my one line JS out in browser console window and it successfully returned what was needed but the snippet doesn’t appear to work when used as a JS line of code within the event property? I’m puzzled!
Please sign in to leave a comment.