Exit link containing <button> not tracked - how to override

[hy_mitchellt]

Hello - we discovered that an exit link which has an <a> tag wrapped around a <button> is not tracked by the default AppMeasurement exit link tracking functionality.  Removing the <button> tag seems to allow tracking to happen.  Is there an alternative way to code the <button> tag or somehow override the auto link tracking behavior so the tracking can happen?    

Thanks for any ideas.

[Jennifer_Dungan]

The first question I am going to ask is "do you really need it to be a button?"

Buttons are semantically used for interactivity (i.e. submit a form where there is actually a submission logic involved), using them for a link (any link, internal or external) isn't really the best practice. You can make your link look any way you want it to look, it can look like a button, without it actually being a button. On top of this, HTML standards prohibit wrapping a button inside an anchor... this isn't valid HTML. It should be a button OR an anchor... 

Now, by default, anchors are recognized by Activity Map, but not buttons.. you can make buttons be recognized by modifying the s.ActivityMap.link code:

https://experienceleague.adobe.com/en/docs/analytics/analyze/activity-map/link-tracking/activitymap-...

Example from the above documentation

// only ever use "title" attributes from A tags
function(clickedElement) {
  var linkId;
  if (clickedElement && clickedElement.tagName.toUpperCase() === 'A') {
    linkId = clickedElement.getAttribute('title');
  }
  return linkId;
}

 Notice that this is modifying the Activity Map link to read from the Title attribute.. I am not suggesting that change per se... but notice the line:

if (clickedElement && clickedElement.tagName.toUpperCase() === 'A') {

Basically, this is what Activity Map looks for.. that the clicked element is an anchor tag. You can use this as a base to modify your clickedElement to also include buttons.

I have done this, and I have a trickle down logic to grab first my potential custom attribute link override, if that's not found use the inner text... if that is not found then it's likely an image inside the link, so then I will check for the image alt, if that isn't found I then look for a title, if that isn't found I look for an id, and if that isn't found I look for the classname... 

This way I can get normal anchors, image anchors and buttons to be recognized...

But in your case, I would definitely recommend dumping the button, and just styling the anchor the way you want it to look... this is also better for the use since they can open, or choose to open in a new link... they can see where the link is going by hovering, and search engines can follow the links better too....

[Jennifer_Dungan]

Oops I also realized you said Exit Link.. but the behaviour is similar...

The button is the lower level click in the nested scenario. The Button is the element being detected by the click, the URL where the button is pointing is not available to understand what is happening. Just like the user has no idea where they are going (it's not disclosed) neither does Adobe.

If you do insist on keeping the element as a button, you will need to apply custom click tracking onto the button (which you can format as an exit link (e) instead of a custom link (o) in your tracking).. but you really won't know where it's going (the url) unless your developers add something to allow you to gather that....

So, it's still highly recommended to just make this a styled anchor, instead of a button....