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>
Best answer by Muffaddal Qutbuddin
Hello
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’)
}) ;
