Solved

The basics of tracking - 2 cases

  • 15 April 2021
  • 6 replies
  • 381 views
A

Hi,

I just want to make sure about set up tracking in 2 events:

1. First element is <input>

<input 
className="form-control" 
type="email" 
placeholder="Email" 
value={email} 
data-cy="unique_number1" 
/>

What is the best way to make an event on input change? Call the script on the "OnChange" attribute? Or I can set up such an event on CSS Selector [data-cy]? (I would prefer second option with CSS)

 

2. The second case is:

<button
class="[dynamic_class_name]" 
tabindex="0" 
type="button" 
data-cy="unique_number2"
>Add user</button>

Can I do here such Mixpanel code?:

<script type="text/javascript">  
mixpanel.track_links(
'button[data-cy="unique_number2"]', 'Add user', {"property1": "something"}
);
</script>  

 

icon

Best answer by Muffaddal Qutbuddin 15 April 2021, 21:47

View original

6 replies

Muffaddal Qutbuddin
Rank
Userlevel 4
Badge +2

Hello @Arek ,

1 - Let me explain you when to use which type of selector to trigger event. Classes are useful when you want to set tracking on multiple element on a page. Example event for all CTA on a page. Conversely, classes are not a way to go when need to target an specific element. Example trigger event on login CTA. 
Or we can say to target an specific element we should use unique attributes such as id or in your case css selector. 

 

2 - Not sure but the attribute should be ‘[data-cy=”unique_number2”]’ instead of ‘button[data-cy=”unique_number2”]’ for link_click()

here is another way to do it with jQuery.
jQuery(‘[data-cy=”unique_number2”]’).on(‘click’,function(){
mixpanel.track(‘your event’)
}) ;

A

Thank you once again @Muffaddal Qutbuddin

 

1. Ok, I will probably add [data-cy] attribute to main elements and set up it on unique css selector. But what Mixpanel function would be fit for input change? Is it just mixpanel.track? I'm not sure if mixpanel.track could be based on CSS Selector? I don't see Argument "Query" in developer's docs on page.

 

2. I understand that in jQuery I can use any available CSS selector? [id], [class], [data-cy] etc. ? and call a function on click on this element?

Muffaddal Qutbuddin
Rank
Userlevel 4
Badge +2

1 - Basically You send events to Mixpanel using .track call. so if you intend to track all the inputs user add to the field you can simply do mixpanel.track(‘event name’, {property1:’input value’}}.

However, doing so triggers a lot of events to Mixpanel and if you don’t have strong rationale to track every input on the field, I would advise against it. I will suggest to send the final value that user enters in the field and track only that for initial phase and  only track onChange when needs be. 

 

2 - Yes correct, with jquery you can target any attribute of an element such as id, class, or custom css. Same goes with javascript as jquery is a wrapper on javascript. 

 

 

A

Thank You @Muffaddal Qutbuddin ​​​​​​

1 - We have a quite long one form, with a lot of inputs and we want to track on what input is the biggest bounce rate of users, for example - they are stuck on 5th input and leave the form (without submit it). 

 

2 - all is clear :)

Muffaddal Qutbuddin
Rank
Userlevel 4
Badge +2

makes sense. You can use onblur() or onfocusout(). It will call  once the user click out of that text field. this will reduce the number of unnecessary events sent to Mixpanel due to onchange. 

S

Hello guys, 

I want to capture inputs filed’s from the inputs on a single button click what is the method available from mixpanel for the same?

on clicking on calculate ROI i want to capture data from inputs.

FYI: page is not reloading when user clicks on calculate ROI button. 
 

 

Reply


Community Terms of UseCookie settings