Not sure if this will help or not, I have a similar issue where our "buttons" are made up of three to five different components that are layered, have holes in the SVG, and a user can potentially click on. So I needed a way to find the part I needed that actually has the name of the button in it.
this.aa_objectName = el.closest("button").textContent.replace(/(\r\n|\n|\r)/gm," ").trim();
_satellite.setVar('adobe_CurrentObjectName', this.aa_objectName);
So it skips the getElementsByClassName, and looks directly at what the user clicked on, finds the "closest" part named "button" and from there pulls the .textContent property from that location. Saves it for the blip of a second to the object that was clicked on, then passes that to the satellite object, so I can grab it after a few more steps.
When done I set the rule to set the variable evar or prop to pull %adobe_CurrentObjectName% back out and when the beacon sends I get the value from the correct part of the button I started with. Of course you don't need to use these naming conventions I just use aa_ for things surrounding the immediate object and adobe_ for items that are stored in the satellite object.