Improve user-interaction to include more attributes from the elements

[hmdhk]

Currently the user-interaction transaction names include the tag and (if exists) the name attribute of the element. However, in some use-cases these might not be enough to identify the element that initiated the user interaction. To improve this, I propose to included more attributes from the element in the transaction context/labels. We can start with the following attributes:

• id
• class
• Inner text

Note: We should limit the size of this attributes (possibly with the default limit for labels). Note: These labels will be available when transaction:end is fired and therefore users have the ability to change the transaction name based on these labels.

[clyfish]

Some frontend frameworks like React use event delegation, so the transaction name is always Click - html. We should use event.target instead of event.currentTarget.

And we can learn from sentry-javascript to include more attributes from the target. https://github.com/getsentry/sentry-javascript/blob/master/packages/utils/src/browser.ts

[David-Development]

The merge request for issue https://github.com/elastic/apm-agent-rum-js/issues/1091 will add support for custom transaction names using the data attribute data-transaction-name. That should also help identify elements correctly.