[BUG] ClickAnalyticsPlugin: Result of callback.contentName is ignored when element contains id or data-id attribute

[krystofmatejka]

Description/Screenshot

If element contains id or data-id attribute, result of contentName callback is ignored

Example:

const clickPluginConfig = {
  autoCapture: true,
  callback: {
      contentName: (element: HTMLElement) => {
        return 'this-is-test'
      },
  },
  dataTags: {
    useDefaultContentNameOrId: false,
  }
};

<button data-id="test6id">Test6</button>

will send name: "test6id"

Steps to Reproduce

• Replace connectionString on line 25
• https://codepen.io/krystof-matejka/pen/LYoYBQw

Environment

• OS/Browser: Edge
• SDK Version [e.g. 22]: @microsoft/applicationinsights-clickanalytics-js: 3.2.0
• How you initialized the SDK: npm

Expected behavior

I expect that the result of contentName callback will be used.

Additional context

This issue can be overcome by changing the data-id or id attribute inside the contentName callback, but it is not always feasible

[Karlie-777]

by default, the event name is set by elementContent.id || elementContent.contentName, so if there is id set, the id will be the name. So currently, this is by design.

[krystofmatejka]

would it make sense to switch the logic to elementContent.contentName || elementContent.id?

what happened to me is that i wanted to transform the value of data-id in contentName callback and i had to do it like this

  callback: {
      contentName: (element: HTMLElement) => {
        const id = transform(element.dataset.id)
        element.dataset.id = id;
        return element.dataset.id;
      },
  },

which is not ideal when something else depends on the data-id attribute