Testing under the fold

This document outlines the steps required to implement and run A/B tests for elements positioned "below the fold" using Mida. This process ensures that A/B test data includes only visitors who have scrolled to and seen the target elements, improving the accuracy and relevance of test results.

Why Below the Fold Testing?

Testing elements below the fold comes with a challenge: a significant portion of visitors may not scroll far enough to view the test element. By default, A/B test scripts might execute for all visitors, even those who never interact with the tested section. This approach skews data, leading to inaccurate insights.

The solution: Dynamically trigger the A/B test script when the visitor is about to see the element.

Video Guide

Follow along with this tutorial video:

Key Points Covered in the Video

1. Problem Explanation (0:00 - 1:00):

   • Only a fraction of visitors may see below-the-fold elements.
   • Unseen elements shouldn't contribute to A/B test reporting.

2. Solution Overview (1:00 - 3:00):

   • Dynamically trigger A/B tests right before the visitor sees the test element.

3. Implementation Steps (3:00 - 9:00):

   • Configure the test to execute by JavaScript.
   • Use scroll-based triggers to load the A/B test script dynamically.

Step-by-Step Implementation

1. Configure A/B Test in Mida

1. Create Test Variants:

   • Modify your below-the-fold element (e.g., change button color to blue).

2. Set Trigger to "Execute by JavaScript":

   • Go to your experiment configuration.
   • Under When to Load, select Do not start, execute by JavaScript.
   • Save your test.

3. Publish the Test:

   • After configuring, publish the test on Mida.

2. JavaScript Scroll Trigger

Use a custom script to detect when visitors approach the below-the-fold element and trigger the A/B test dynamically.

Sample Code

// STEP 1: CHANGE THE TARGET ELEMENT FOR TESTING
var targetElementSelector = '#change.this.to.your > testing.element';
var targetElement = document.querySelector(targetElementSelector);

if (targetElement) {
    var scrollElementObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting || entry.boundingClientRect.top < window.innerHeight) {
                console.log('User is nearing the element. Triggering A/B test dynamically...');

                // STEP 2: CHANGE THIS TO YOUR ACTUAL MIDA TEST ID
                mida.execute(88888888888)

                scrollElementObserver.disconnect();
            }
        });
    }, {
        root: null,
        rootMargin: '100px', // Trigger 100px before the element enters the viewport
        threshold: 0 
    });
    scrollElementObserver.observe(targetElement);
}

3. Implement Trigger Script

1. Locate the Target Element:

   • Identify the selector of the below-the-fold element you are testing (e.g., .cta-class).

2. Add Global JavaScript in Mida:

   • Go to Global Custom Code in your Mida dashboard.
   • Paste the JavaScript scroll trigger code above.

3. Alternative:

   • Add the script through Google Tag Manager (GTM) or directly in your website's global JavaScript file.

4. Test Your Setup

1. Visit your website and ensure the Mida experiment does not load immediately.
2. Scroll to the target element and confirm that the test dynamically triggers.
3. Verify that the experiment loads without flickering.

Key Benefits of This Approach

• Ensures accurate reporting by excluding unqualified traffic.
• Eliminates flickering effects often caused by delayed script execution.
• Improves the relevance and reliability of your A/B test data.