Solved

Tracking which part of a link was clicked

  • 1 December 2021
  • 9 replies
  • 40 views

I have an <a> element (created with Gatsby’s Link component) which includes a bunch of child elements - <h2>, <img> and <div>.

I would like track_links to track not just the fact that the <a> link was clicked, but also which child element inside it was clicked. This is important to understand what “works” with users.

I was hoping to get this done by passing a function argument to track_links and receiving the target element as the “target” parameter for it. Unfortunately, it turns out that track_links always calls the callback with the <a> element, even if a child element inside it was actually clicked.

A workaround that was attempted but didn’t work: Attach track_links to specific children, while keeping the overall <a> element intact. Unfortunately, while the correct element was now received, the link navigation broke.

It would have been great if the callback would also have received the actual click event, or at least the real element being clicked, in addition to the parent element registered on track_links.

Any ideas how to resolve this?

icon

Best answer by alon 10 December 2021, 09:13

View original

9 replies

Badge +1

Hello

What i would do in this case is send it as a whole string and then you can use our custom properties to regex based on the different targets.

https://help.mixpanel.com/hc/en-us/articles/360030848432-Custom-Properties

Hope this helps

Alon

 

Thanks @alon, but I didn’t quite follow.

Send what as the whole string?

Badge +1

Thanks @alon, but I didn’t quite follow.

Send what as the whole string?

Send the whole HTML as a string. Then you can regex it

How does that solve my problem, of not having a way of being told by `track_links` which element exactly was clicked?

Badge +1

How does that solve my problem, of not having a way of being told by `track_links` which element exactly was clicked?

Now I got it. Then I would contact Gatsby’s to see how you can get back the target from the <a> 

I would try to write a script looking at the target and passing it to the track event

 

Gatsby isn’t the one providing the target element, it’s the MixPanel SDK, and more specifically the track_links function. The issue is that this function doesn’t deliver granular enough information. I was hoping I might be missing something, but it looks like I’m not.

I think it would be useful feedback for the MixPanel dev team, that they should consider changing the SDK to either:

  1. Not break when attaching track_links to children of the A element instead of the A element
  2. Or a simpler solution - pass a second argument to the callback, with the actual element being clicked (in addition to the first argument, which is the containing A element)

 

Badge +1

Did you try passing it as the properties argument, the function will receive the DOMElement that triggered the event as an argument. You are expected to return an object from the function; any properties defined on this object will be sent to mixpanel as event properties.

https://developer.mixpanel.com/docs/javascript-full-api-reference#mixpaneltrack_links

 

Badge +1

Anyway I’ll pass your request along to the product team 

 

Thanks

Yes, this function receives only the A element, not the actual clicked element. This is the function that I’m suggesting to change.

Reply