How to run A/B test using Elementor to reduce flickering FAQ - A/B Testing

Some WordPress sites uses the Elementor plugin to manage views and install Matomo A/B test code. In some cases, Elementor will load the code in <body> tag, which will lead to some flickering.

To reduce flickering with Elementor, you can try the below approach:

1. Prepare a custom JS code for the original/control page and update following variables experimentName, originalPath and alternativeUrl as per your requirement. You should also adjust the random logic to your desired values. The example below uses 3 equal distribution of 33% each.

<script>
(function () {
    var experimentName = 'HomepageCloudCTA';
    var originalPath = '/pricing/'; // the originan and control URL. for homepage use '/'
    var alternativeUrl = '/alternative-pricing/';// redirect user to this alternative URL
    var cookiename = 'MatomoAbTesting';

    if (location.host !== 'matomo.org') {
        return; // don't run on fr.matomo.org
    }
    if (location.pathname !== originalPath) {
        return; // don't run test on this page
    }

    function isGroup(v) {
        if (navigator.cookieEnabled && navigator.userAgent.indexOf('bot') === -1) {
            return document.cookie.indexOf(cookiename + '=' + experimentName + v) !== -1;
        }
    }
    function setGroup(val) {
        document.cookie = cookiename + '=' + encodeURIComponent(experimentName + val) + '; expires=' + expiryDate + '; path=/;SameSite=Lax';
    }
    function track(variation) {   
        function trackAbTest() {
          window._paq = window._paq || [];
          window._paq.push(["AbTesting::enter", {experiment: experimentName, variation: variation}]);
        }
        
        if ('object' === typeof window && 'object' === typeof window.Matomo && window.Matomo.initialized) {
          // tracker is already loaded.
          trackAbTest();
        } else {
          // tracker is not loaded as this point and we need to wait until Matomo is loaded, then we can track it
          // if we were to call _paq.push too early we would create an extra tracker which would then cause an extra
          // tracker to be created which be unconfigured and would cause extra requests to the wrong endpoints that won't work
          if ('object' !== typeof window.matomoPluginAsyncInit) {
            window.matomoPluginAsyncInit = [];
          }
          window.matomoPluginAsyncInit.push(function () {
            Matomo.on('MatomoInitialized', trackAbTest);
          });
        }

    }
    var expiryDate = new Date();
    expiryDate.setTime(expiryDate.getTime() + (20*24*60*60*1000));
    expiryDate = expiryDate.toGMTString();
    if (isGroup('2')) {
        window.location.replace(alternativeUrl);
    } else if (isGroup('0')) {
        track('original');
    } else if (isGroup('1')) {
        track('control');
    } else if (navigator.cookieEnabled && navigator.userAgent.indexOf('bot') === -1) {
        var rand = Math.random();
        if (rand >= 0.666) { //Adjust the random logic as per your need
            setGroup(2);
            window.location.replace(alternativeUrl);
            return;
        } else if (rand >= 0.333) {
            setGroup(1);
            track('control');
        } else {
            setGroup(0);
            track('original');
        }
    }
})();
</script>

2. Add the above custom code as an Elementor snippet

Enter the name of the title AB Test $nameOfAbTest, eg AB Test HomepageCloudCTA.
Location should be head.
Click on “Publish” to Create the custom code.
Depending on the test this should be executed on the entire site, or when we only a test a specific page then we select Singular and then the page the test should run. Eg Front Page for the homepage. Technically, because the above script will only run on a specific page, Entire Site could be selected as well.
Click on “Save & close”.

3. Double check if it works, go to the desired page and inspect the HTML to check if custom JS code is loaded in the header.

4. Also open the browser developer tools and check there is no JS error in the console of the browser developer tools.

5. Update the alternative page to track the A/B testing correctly

Visit the “alternative” page.
Click on “Edit with elementor”.
Search for the HTML widget.
Drag it onto the page, eg right to the top.
Paste below script into the HTML code section of the elementor widget. The mtmExperimentName and mtmVariationName variables need to be adjusted depending how you have configured the A/B test. See below example.

<script>
function trackAbTest() {
  var mtmExperimentName = "HomepageCloudCTA";
  var mtmVariationName = "Try21DayFreeCloudTrial";
  
  window._paq = window._paq || [];
  window._paq.push(["AbTesting::enter", {experiment: mtmExperimentName, variation: mtmVariationName}]);
}

if ('object' === typeof window && 'object' === typeof window.Matomo && window.Matomo.initialized) {
  // tracker is already loaded.
  trackAbTest();
} else {
  // tracker is not loaded as this point and we need to wait until Matomo is loaded, then we can track it
  // if we were to call _paq.push too early we would create an extra tracker which would then cause an extra
  // tracker to be created which be unconfigured and would cause extra requests to the wrong endpoints that won't work
  if ('object' !== typeof window.matomoPluginAsyncInit) {
    window.matomoPluginAsyncInit = [];
  }
  window.matomoPluginAsyncInit.push(function () {
    Matomo.on('MatomoInitialized', trackAbTest);
  });
}
</script>

Click on “Update” button.
Open the URL of the alternative page you just saved and check there is no JavaScript error in the browser developer console.

6. Clear cache if any configured.

Previous FAQ: How do I exclude employees or partners views and clicks from affecting my A/B tests results?

Feedback on this page