Custom tags on Microsoft clarity

Question

I want to add a custom tag on ms clarity for a particular click event for eg-: (i want to track the users clicking cancel button), so that it should only fire when a user click on the cancel button,i am on an angular project. How can i do that ?

i tried putting script tags on the html page of the component which contains cancel button and passed the button id using addEventListener, but that button already has a normal click function :/

Answer 1

When we want to do some in a severals elements a Directive (with a selector) go to rescuest

@Directive({
  selector: 'button[type=cancel]'
})
export class BtCancelDirective {
  @HostListener('click', ['$event.target'])click(btn)
  {
    console.log(btn,btn.getAttribute('id'))
  }
}

So you can use

<button id="one" type="cancel">click</button>

Well, you can use another selectors like button:not([type=submit]),button:not([type=button]) or another you can imagine

To know more about selector I like this link in medium or the official docs