Track Dropdown Selections and Clicks in Webflow with Mixpanel | Mixpanel Community

Track Dropdown Selections and Clicks in Webflow with Mixpanel

I have a dropdown button click in Webflow, what do I need to do to add a variable that tracks selections as well as button clicks? Currently the code I have tracking this is:

<script type="text/javascript">
  
    $(document).ready(function() {
$('[filter-click]').click(function(e) {

      var buttonname = $(this).attr('filter-click');
      var page_name = document.title;
      
      mixpanel.track('Filter-Click', { buttonname: buttonname, page_name: page_name });
    });
  });

11 comments

kapa.ai
APP
·
·
Hi James S., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> 👋
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
kapa.ai
APP
·
·
To track dropdown selections along with button clicks in Mixpanel, you'll need to modify your existing code to capture the selected value from the dropdown. Here's how you can adapt your current implementation: ```('[filter-click]').click(function(e) { var buttonname = $(this).attr('filter-click'); var page_name = document.title;
mixpanel.track('Filter-Click', { buttonname: buttonname, page_name: page_name });
});
// Track dropdown selections (this).attr('name') || (this).val(); var page_name = document.title;
mixpanel.track('Dropdown-Selection', { dropdown_name: dropdownName, selected_value: selectedValue, page_name: page_name });
}); });LBKSLBKSThis code adds a new event listener for the `change` event on all `select` elements, which will capture when a user selects an option from a dropdown. The event will track: LBKS1. The dropdown name (using the element's `name` or `id` attribute) 2. The selected value 3. The page name where the selection occurredLBKSIf your dropdown is implemented differently in Webflow (for example, using custom divs instead of a native `select` element), you might need to adjust the selector and event. For instance, if Webflow uses a custom dropdown implementation with clickable list items: LBKSLBKS// For custom Webflow dropdowns (this).closest('.dropdown-wrapper').attr('id') || 'unnamed-dropdown'; var selectedValue = $(this).text(); var page_name = document.title;
mixpanel.track('Dropdown-Selection', { dropdown_name: dropdownName, selected_value: selectedValue, page_name: page_name }); });```For more advanced tracking options, you might want to consider using Mixpanel's Autocapture feature, which can automatically track many user interactions including clicks and form submissions without requiring custom code for each element Mixpanel Autocapture.Remember that when tracking events in Mixpanel, it's best practice to keep events as actions and use properties to provide context, rather than creating different events for similar actions Best Practices for Events.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.

James S.

kapa.ai I made the changes but slightly adjusted for example:

    $('[language-selected]').click(function(e) {

      var language = $(this).attr('language-selected');
      var page_name = document.title;
      
      mixpanel.track('Language-Selected', { language: language, page_name: page_name});
    });

Do you know why these events duplicate in mixpanel?

kapa.ai
APP
·
·
Let me check the knowledge base for you again. One moment! 📚
kapa.ai
APP
·
·
I can help explain why you might be seeing duplicate events in Mixpanel with your implementation.The duplication issue you're experiencing is a common technical hiccup in Mixpanel implementations. Based on the knowledge sources, there are several potential reasons why your Language-Selected events might be duplicating: 1. Multiple event bindings: If your JavaScript code runs multiple times (for example, if it's included in multiple places or if the page reloads partially), the click handler might be attached multiple times to the same elements, causing duplicate events.2. Event bubbling: If your [language-selected] elements are nested inside other elements that also have click handlers, the event might bubble up and trigger multiple handlers.3. Client-side and server-side tracking: As mentioned in Product analytics implementation hiccups that are easy to spot, you might be tracking the same event in two different places - perhaps once in your frontend code and again in backend code.4. Code execution in multiple contexts: The event might be tracked in different parts of your application that execute for the same user action.To diagnose and fix this issue: 1. Enable Debug Mode: Turn on Mixpanel's debug mode to see when events are being sent: LBKS// Add this before your tracking code mixpanel.init('YOUR_PROJECT_TOKEN', {debug: true});LBKS2. Check for duplicate bindings: Make sure your event binding code only runs once by using the browser console to check how many handlers are attached.3. Use event delegation: Consider using event delegation to prevent multiple bindings: ```(this).attr('language-selected'); var page_name = document.title;
mixpanel.track('Language-Selected', { language: language, page_name: page_name}); });```4. Check timestamps: In Mixpanel, look at the timestamps of duplicate events. If they occur within milliseconds of each other, it's likely a code issue rather than actual user behavior, as mentioned in the Product analytics implementation hiccups article.5. Use Mixpanel's Lexicon: If you can't fix the duplication at the code level, you could use Mixpanel's Lexicon to merge duplicate events for analysis purposes.Let me know if you need more specific guidance based on what you find when implementing these suggestions!
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
James S.
·
·
kapa.ai Now I'd like to add in a search function event, recording every time it's used and what has been searched. How do I do this?
kapa.ai
APP
·
·
Let me check the knowledge base for you again. One moment! 📚
kapa.ai
APP
·
·
I can help you implement tracking for a search function in Mixpanel. Based on your previous code examples, here's how you can track search events: ```// Track search function usage ('#your-search-input').val(); var page_name = document.title;
mixpanel.track('Search', { search_query: searchQuery, page_name: page_name }); });LBKSLBKSIf your search doesn't use a traditional form submission but instead uses keyup events or a button click, you could implement it like this: LBKSLBKS// For search with a button ('#your-search-input').val(); var page_name = document.title;
mixpanel.track('Search', { search_query: searchQuery, page_name: page_name }); });// For search that triggers as you type (consider debouncing this) (this).val(); var page_name = document.title;
mixpanel.track('Search', { search_query: searchQuery, page_name: page_name });
} });```Tracking search events is valuable for understanding user behavior. According to Tata Sky's experience with Mixpanel, "Mixpanel helps us understand what exactly people are searching for, where we're breaking off in search, where we're not getting accurate results, etc." Metrics that matter to Tata Sky.Remember to adjust the selectors (#your-search-form, #your-search-input, etc.) to match your actual HTML elements. Also, consider adding additional properties that might be relevant to your search functionality, such as search filters or categories.To avoid the duplication issue you experienced before, make sure this code only runs once when the page loads.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.

James S.

kapa.ai Can you review this code block for me, using your suggested search function. I've tested and no event is happening. What could be causing this?

<!-- Mixpanel Search Function -->

<script type="text/javascript">

// For search that triggers as you type (consider debouncing this)
$('gui-pc-search-input').keyup(function(e) {
  // Only track when Enter key is pressed
  if(e.keyCode === 13) {
    var searchQuery = $(this).val();
    var page_name = document.title;
    
    mixpanel.track('Shows Search', { 
      search_query: searchQuery, 
      page_name: page_name 
    });
  }
});
  </script>

kapa.ai
APP
·
·
Let me check the knowledge base for you again. One moment! 📚
kapa.ai
APP
·
·
I can see the issue in your search function code. There's a selector problem that's preventing the event from being tracked in Mixpanel. Let me help you fix it: ```// For search that triggers as you type (consider debouncing this) (this).val(); var page_name = document.title;
mixpanel.track('Shows Search', { search_query: searchQuery, page_name: page_name });
} });LBKSLBKSThe main issue is that you're missing a period (`.`) or hash (`#`) in your selector. If `gui-pc-search-input` is a class, you need to use `$('.gui-pc-search-input')`. If it's an ID, you need to use `$('#gui-pc-search-input')`.LBKSAdditionally, here are some other things to check if the event still isn't firing: LBKS1. **Enable Debug Mode**: Add debug mode to see if Mixpanel is receiving the events: LBKSmixpanel.init('YOUR_PROJECT_TOKEN', {debug: true});```This will help you see in the browser console if the event is being sent to Mixpanel Debugging with the Browser Console.2. Check if jQuery is loaded: Make sure jQuery is loaded before your script runs.3. Verify the element exists: Use console.log($('.gui-pc-search-input').length) to check if your selector is finding any elements.4. Try a different event: The keyup event might not be firing as expected. You could try using keydown or keypress instead.5. Check for JavaScript errors: Open your browser's developer console to see if there are any JavaScript errors that might be preventing your code from executing.If you're still having issues, you might want to use Mixpanel's Events report to confirm that events are arriving to your Mixpanel project Debugging with Events.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.