Activating an Experiment on Menu Item Interaction

🚀 IN THIS ARTICLE YOU WILL:

• Understand the importance of event-triggered experiments
• Learn how to implement JavaScript to activate experiments on interaction
• Learn Advanced implementation options
• Follow best practices to ensure accurate experiment results
• Troubleshoot common issues with event-triggered experiments

📌 Overview

Sometimes, you need to trigger an experiment based on specific user interactions rather than just page loads. This article explains how to activate experiments when visitors interact with menu items or other elements through clicks or hover actions.

🔥 Why Use Event-Triggered Experiments?

✔ More precise visitor sampling
✔ Better data quality by excluding non-interacting visitors
✔ Ability to test interactive elements like dropdown menus
✔ Reduced noise in your experiment results

🛠 Implementation Guide

1. Add JavaScript to Project Configuration

Navigate to:
Project > Project Configuration > Global JavaScript

Add the following code:

document.addEventListener('DOMContentLoaded', function() {
    console.log('Script started');
    if (location.href.startsWith('YOUR_DOMAIN_HERE')) {
        console.log('URL match found');
        const targetElement = document.querySelector('YOUR_SELECTOR_HERE');
        console.log('Target element:', targetElement);

        if (targetElement) {
            targetElement.addEventListener('click', function(e) {
                console.log('Click detected');
                window.runExperiment = 1;
                window._conv_q = window._conv_q || [];
                window._conv_q.push(["executeExperiment", "YOUR_EXPERIMENT_ID"]);
                console.log('Triggering Experiment from interaction.');
            });
            console.log('Experiment trigger bound to element.');
        }
    }
});

2. Customize the Code

Replace the following placeholders:

• YOUR_DOMAIN_HERE → Your website’s domain (e.g., 'https://www.example.com/')
• YOUR_SELECTOR_HERE → The CSS selector for your target element (e.g., '#menu-cart-icon')
• YOUR_EXPERIMENT_ID → Your Convert experiment ID

3. Choose Interaction Type

Modify the addEventListener function based on your desired interaction type:

• For Click Interactions:

addEventListener('click', function(e) {...}

• For Hover Interactions:

addEventListener('mouseenter', function(e) {...}

4. Add JavaScript Condition

In your experiment settings, add the following JavaScript condition to the Locations section:

window.runExperiment === 1

🔬 Advanced Implementation Options

Using MutationObserver

For dynamically loaded elements, use this enhanced version:

document.addEventListener('DOMContentLoaded', function() {
    if (location.href.startsWith('YOUR_DOMAIN_HERE')) {
        function addInteractionListener(element) {
            element.addEventListener('click', function(e) {
                window.runExperiment = 1;
                window._conv_q = window._conv_q || [];
                window._conv_q.push(["executeExperiment", "YOUR_EXPERIMENT_ID"]);
            });
        }

        const observer = new MutationObserver(function(mutations) {
            const targetElement = document.querySelector('YOUR_SELECTOR_HERE');
            if (targetElement) {
                addInteractionListener(targetElement);
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
});

Event Delegation

For multiple elements or dynamic content, use this approach:

document.body.addEventListener('click', function(e) {
    if (e.target.matches('YOUR_SELECTOR_HERE')) {
        window.runExperiment = 1;
        window._conv_q = window._conv_q || [];
        window._conv_q.push(["executeExperiment", "YOUR_EXPERIMENT_ID"]);
    }
});

Best Practices

✔ Always include error handling and logging for debugging
✔ Test the implementation in multiple browsers
✔ Consider mobile interactions for a seamless experience
✔ Monitor performance impact of added JavaScript
✔ Use specific selectors to avoid conflicts

Troubleshooting

✅ Check the browser console for debug messages
✅ Verify selector uniqueness to avoid multiple bindings
✅ Ensure proper event triggering (click or hover as intended)
✅ Confirm the correct experiment ID is being used
✅ Test on different devices and browsers

This Implementation Supports:

• ✅ ES6+ JavaScript
• ✅ Dynamic content loading
• ✅ Mobile interactions
• ✅ Debugging capabilities
• ✅ Performance optimization

For additional support or custom implementations, contact Convert's support team.