- Help Center
- Configuration
- Event-Triggered Changes
-
General
-
Getting Started
-
Configuration
- Targeting
- Split URL
- Product Testing
- Full Stack
- Experiment Management
- CSP Configuration
- Experiment Execution
- Reports
- Exit Popups
- GTM Integration
- Troubleshooting
- Performance Optimization
- Event-Triggered Changes
- Holdout Groups
- Split URL Pages
- URL Parameters
- DataLayer
- Menu Configurations
- Traffic Exclusion
- Experiment Scheduling
- Dynamic Element Changes
- Price Targeting
- Experience Scheduling
- Privacy
- Hash Changes
- Async Tracking
- Selective Installation
- CSS Selectors
- Vue.js Integration
- Page Content
- Multipage Split URL
- Organic Traffic
- Visual Editor
- Server-Side Testing
- Traffic Bucketing
- GDPR Warnings
- Statistical Confidence
- Browser Privacy
- Query Parameters
- Embedded Videos
- Tracking Code Execution
- Simultaneous Experiments
- Tags
- Deployments
- Disable Testing
- Locations
- Programmatic Bucketting
- Query Parameter Handling
- Convert Library
- Variation Previews
- Experiment Editing
- Opt-Out Script
- Data Reset
- Body Hiding
- Visit-Specific Variations
- Variation Styling
- Preview Issues
- Variation Editing
- Full-Site Testing
- Blinking Variations
- Cross-Domain Cookies
- Regex Support
- Conversion Tracking
- SPA Testing
- Project Setup
- Cross-Domain Tracking
- Geo-Targeting
- Analytics Tools
- Campaign Tags
- Previewing
- IDs
- Query String Targeting
- Bounce Rate Goals
- Bot Filtering
- Query String Variables
- Custom Audiences
- Redirects
- Baseline
- Tracking Code Location
- Secure Cookies
- AngularJS
- Cloudflare
- Code Installation
-
Shopify
-
Track Goals
- Form Tracking
- Cookie Management
- iFrame Click Tracking
- Performance Optimization
- Revenue Tracking
- Interaction Goals
- Form Submissions
- Advanced Goals
- Lazy Loading
- Multi-Conversions
- URL Parameters
- Bounce Rate Goals
- DataLayer Integration
- Scroll Depth
- Social Interactions
- Page Views
- Marketo Forms
- Feature Analysis
- AJAX Forms
- Revenue Tracking via GTM
- Order Outliers
- Cumulative Revenue
- Goal Templates
- Adding Revenue Goals
- JS-Based Goals
- Goal Basics
- Google Analytics Goals
- Social Sharing
- Dynamic Goals
- Typeform Integration
-
Target Visitors
- Geolocation
- Interaction Goals
- Goal-Based Targeting
- Weather Targeting
- Cookie-Based Targeting
- Page Visits
- Audience Management
- Audience Segmentation
- Experiment Targeting
- Advanced Audience Creation
- Audience Templates
- Audience Creation
- Data Layer Integration
- Manual Activation
- JavaScript Conditions
- Device Targeting
- Language Targeting
- IP-Based Exclusion
- Visitor Management
- Page Tagging
- Cookies
-
Troubleshooting
- Google Warnings
- Visual Editor
- HTTPS Content
- Logs
- Support Options
- Bootstrap
- Cookie Blocking
- Change History
- Mobile Debugging
- AdWords
- Bot Exclusion
- Domain Issues
- Cloudflare Issues
- Monitoring
- Cloaking Penalties
- Goal Editor Issues
- Variations
- Snippet Performance
- Changes Not Saved
- Blocked Visual Editor
- Goal Testing
- Visual Editor Browsing
- Experiment Issues
- Installation Verification
- Data Leak Prevention
- Usage Limits
- Experiment Previews
- GA4 Revenue
- Chrome Debugger Logs
- SPA Errors
- Checkout JSON Error
-
Analyze Results
-
Integrations
- Google Analytics
- Cookie Consent Platforms
- Microsoft Clarity
- Plausible
- Marketo
- HubSpot
- Tealium
- Smartlook
- Klaviyo
- Salesforce CRM
- FullStory
- Snowplow Analytics
- Webflow
- GA4 Roles
- Amplitude
- Segment
- React
- BigCommerce
- WooCommerce
- Active Campaign
- Google Tag Manager
- Mixpanel
- Inspectlet
- Crazy Egg
- LanderApp
- Unbounce
- Instapage
- Drupal
- PrestaShop
- Magento
- Roistat
- Piano Analytics
- Heap Analytics
- Kissmetrics
- Mouseflow
- Adobe Analytics
- Clicky
-
Account Management
-
Developers
-
What's New
-
Common Questions
Activating an Experiment on Menu Item Interaction
Trigger experiments on user interactions like clicks and hovers to improve accuracy, optimize engagement, and refine A/B testing results.
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.