A/B Testing on Menu item

When running A/B tests on your website, it's important to ensure that the experiment is triggered based on meaningful user interactions. For example, if you're testing changes to a hamburger menu, you want to make sure that only users who engage with the menu are included in the test. Otherwise, you risk polluting your test results with data from visitors who never interacted with the menu.

In this guide, we'll show you how to trigger an A/B test using Mida.so only when users click or tap on a hamburger menu. This ensures that your test data reflects actual user behavior, giving you more accurate and actionable insights. 

By using JavaScript to listen for click and touchend events, the test will run only for users who engage with the menu, leaving out passive visitors who do not interact.

// 1. Change .hamburger-menu to your actual menu button
waitForElement('.hamburger-menu', (menu) => {
    // Add click event listener for desktop
    menu.addEventListener('click', function() {
        mida.execute(1234);  // 2. Replace '1234' with your actual test ID
    });

    // Add touch event listener for mobile
    menu.addEventListener('touchend', function() {
        mida.execute(1234);  // 2. Replace '1234' with your actual test ID
    });
});

// Do not change anything below
function waitForElement(selector, callback, maxRetries = 50, interval = 100) {
    let retries = 0;
    
    const checkExist = setInterval(() => {
        const element = document.querySelector(selector);
        
        if (element) {
            clearInterval(checkExist);
            callback(element);
        } else if (retries >= maxRetries) {
            clearInterval(checkExist);
            console.warn(`Element ${selector} not found after ${maxRetries * interval / 1000} seconds.`);
        }
        
        retries++;
    }, interval);
}