Welcome to the Wingify Knowledge Base! This site is growing. If you can't find what you're looking for, visit help.vwo.com for more resources.

Start Free trial

Articles in this section

See more →

How to Implement Event-based Redirection for Split URL Tests

Shweta Ajwani
  • Updated
Share:
Follow
close this to read article

While you are running a Split URL test on your website, there could be scenarios where you may want VWO to execute a specific portion of the code based on whether the user is redirected to a variation or not. For example, you may want to execute a code snippet only when there is no redirection or want to avoid GA Code execution on the control if it redirects to another variation.

In this article, we will talk about the following use cases:

  1. Executing a code snippet only when redirection is not happening
  2. Avoiding GA Code execution if the page is going to be redirected to variation
  3. Using VWO with Exit Pop-up Code

Executing Code Only When Redirection Is Not Happening

If you only need to execute code when the redirection does not occur, then you can attach an event to listen for redirection. You can do this by adding the following code snippet before VWO SmartCode (let’s call it Code-1).

(function() {
  window._vwo_evq = window._vwo_evq || [];
  var _vwoOldPush = window._vwo_evq.push;
  window._vwo_evq.push = function() {
    var eventData = arguments[0],
      willRedirectionOccur;
    if (eventData[0] === 'rD') {
      willRedirectionOccur = eventData[1]; // It will be set to true if a redirection is going to be done by VWO.

      window.willRedirectionOccurByVWO = willRedirectionOccur;
    }
    _vwoOldPush.apply(window._vwo_evq, [].slice.call(arguments));
  };
})();

Note: You can use the variable willRedirectionOccurByVWO in later scripts to decide if you want to execute any code on the page or not.

(function() {
  window.Wingify = window.Wingify || [];
  window.willRedirectionOccurByWingify = true;
  window.Wingify.push(['onEventReceive', 'nR', function() {
    // nR fires only when no redirection is going to be done.
    // If a redirection will occur, this callback is suppressed.
    window.willRedirectionOccurByWingify = false;
  }]);
})();

Avoiding GA Code Execution if the Page Is Going to Be Redirected to Variation

If a split campaign is running and GA is installed, GA will log a visitor for the control page and the variation page (for both Synchronous and Asynchronous code). To avoid this, install code-1 above VWO Sync Code and then execute the GA tracking code conditionally.

Note: If the GA code on your website is installed via GTM, copy-paste the GTM code in the code block instead of GA.

// If VWO is not going to redirect the page
if (!window.willRedirectionOccurByVWO) {
//EXECUTE GA CODE HERE
} else {
// VWO is redirecting this page. So, don't execute UA/GA code here.
}
// If Split test is not going to redirect the page
if (!window.willRedirectionOccurBySplitTest) {
//EXECUTE GA CODE HERE
} else {
// Split test is redirecting this page. So, don't execute UA/GA code here.
}

For asynchronous SmartCode, this implementation will not work because the VWO library doesn't need to be loaded by the time the script executes. For asynchronous code implementation, add the following code:

<script async src="https://www.googletagmanager.com/gtag/js?id=<GA4-Measurement-ID>"></script> // In the case of GA4, this script should be loaded, replacing G-ABCD1EFG2H with your GA4 measurement ID.

<script>
(function(nonVWOScriptsToExecute, VWO_HARD_TIMEOUT) {
  window._vwo_evq = window._vwo_evq || [];
  var queue = window._vwo_evq;
  for (var i = 0; i < queue.length; i++) {
    if (queue[i][0] === 'rD') {
      window.willRedirectionOccur = true;
      break;
    }
  }
  var _vwoOldPush = window._vwo_evq.push;
  window._vwo_evq.push = function() {
    var eventData = arguments[0],
      willRedirectionOccur;
    if (eventData[0] === 'rD') {
      willRedirectionOccur = eventData[1];
      // It will be set to true if a redirection is going to be done by VWO.
      window.willRedirectionOccurByVWO = willRedirectionOccur;
    }
    _vwoOldPush.apply(window._vwo_evq, [].slice.call(arguments));
  };
  var hardLimitTimedout = false;

  function tryNonVWOTracking(nonVWOScriptsToExecute) {
    if ((window._vwo_code && (window._vwo_code.finished() || window._vwo_code.libExecuted)) || hardLimitTimedout) {
      if (!window.willRedirectionOccurByVWO) {
        clearTimeout(hardLimitTimer);
        for (var i = 0; i < nonVWOScriptsToExecute.length; i++) {
          try {
            nonVWOScriptsToExecute[i]();
          } catch (e) {}
        }
        return;
      }
    }
    setTimeout(function() {
      tryNonVWOTracking(nonVWOScriptsToExecute)
    }, 500)
  }

  var hardLimitTimer = setTimeout(function() {
    hardLimitTimedout = true;
  }, VWO_HARD_TIMEOUT);
  tryNonVWOTracking(nonVWOScriptsToExecute);
})([function() {
  // GA4 code started
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<GA4-Measurement-ID>'); //Replace given measurement ID with your GA4 Measurement ID 
  // GA4 code End/Closed 
}], 5000 /*MAXIMUM TIME IN SECONDS IN WHICH GA CODE WILL EXECUTE ANYWAY*/ );
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=<GA4-Measurement-ID>"></script> // In the case of GA4, this script should be loaded, replacing G-ABCD1EFG2H with your GA4 measurement ID.
<script>
(function(nonWingifyScriptsToExecute, WINGIFY_HARD_TIMEOUT) {
  window.Wingify = window.Wingify || [];
  window.willRedirectionOccurByWingify = true;
  window.Wingify.push(['onEventReceive', 'nR', function() {
    // nR fires only when no redirection is going to be done.
    // If a redirection will occur, this callback is suppressed.
    window.willRedirectionOccurByWingify = false;
  }]);
  var hardLimitTimedout = false;
  function tryNonWingifyTracking(nonWingifyScriptsToExecute) {
    if ((window._wingify_code && (window._wingify_code.finished() || window._wingify_code.libExecuted)) || hardLimitTimedout) {
      if (!window.willRedirectionOccurByWingify) {
        clearTimeout(hardLimitTimer);
        for (var i = 0; i < nonWingifyScriptsToExecute.length; i++) {
          try {
            nonWingifyScriptsToExecute[i]();
          } catch (e) {}
        }
        return;
      }
    }
    setTimeout(function() {
      tryNonWingifyTracking(nonWingifyScriptsToExecute)
    }, 500)
  }
  var hardLimitTimer = setTimeout(function() {
    hardLimitTimedout = true;
  }, WINGIFY_HARD_TIMEOUT);
  tryNonWingifyTracking(nonWingifyScriptsToExecute);
})([function() {
  // GA4 code started
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<GA4-Measurement-ID>'); //Replace given measurement ID with your GA4 Measurement ID 
  // GA4 code End/Closed 
}], 5000 /*MAXIMUM TIME IN SECONDS IN WHICH GA CODE WILL EXECUTE ANYWAY*/ );
</script>

To implement the above code using Google Tag Manager, use the following code and replace the placeholder with your GTM Tag ID.

<script>
(function(nonVWOScriptsToExecute, VWO_HARD_TIMEOUT) {
 window._vwo_evq = window._vwo_evq || [];
 var queue = window._vwo_evq;
 for (var i = 0; i < queue.length; i++) {
   if (queue[i][0] === 'rD') {
     window.willRedirectionOccur = true;
     break;
   }
 }
 var _vwoOldPush = window._vwo_evq.push;
 window._vwo_evq.push = function() {
   var eventData = arguments[0],
     willRedirectionOccur;
   if (eventData[0] === 'rD') {
     willRedirectionOccur = eventData[1];
     // It will be set to true if a redirection is going to be done by VWO.
     window.willRedirectionOccurByVWO = willRedirectionOccur;
   }
   _vwoOldPush.apply(window._vwo_evq, [].slice.call(arguments));
 };
 var hardLimitTimedout = false;
 function tryNonVWOTracking(nonVWOScriptsToExecute) {
   if ((window._vwo_code && (window._vwo_code.finished() || window._vwo_code.libExecuted)) || hardLimitTimedout) {
     if (!window.willRedirectionOccurByVWO) {
       clearTimeout(hardLimitTimer);
       for (var i = 0; i < nonVWOScriptsToExecute.length; i++) {
         try {
           nonVWOScriptsToExecute[i]();
         } catch (e) {}
       }
       return;
     }
   }
   setTimeout(function() {
     tryNonVWOTracking(nonVWOScriptsToExecute)
   }, 500)
 }
 var hardLimitTimer = setTimeout(function() {
   hardLimitTimedout = true;
 }, VWO_HARD_TIMEOUT);
 tryNonVWOTracking(nonVWOScriptsToExecute);
})([function() {
<!-- Google Tag Manager -->
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<Your-GTM-TAG-ID>'); // Add your GTM TAG ID
<!-- End Google Tag Manager -->
}], 5000 /*MAXIMUM TIME IN SECONDS IN WHICH GA CODE WILL EXECUTE ANYWAY*/ );
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=<GA4-Measurement-ID>"></script> // In the case of GA4, this script should be loaded, replacing G-ABCD1EFG2H with your GA4 measurement ID.
<script>
(function(nonWingifyScriptsToExecute, WINGIFY_HARD_TIMEOUT) {
  window.Wingify = window.Wingify || [];
  window.willRedirectionOccurByWingify = true;
  window.Wingify.push(['onEventReceive', 'nR', function() {
    // nR fires only when no redirection is going to be done.
    // If a redirection will occur, this callback is suppressed.
    window.willRedirectionOccurByWingify = false;
  }]);
  var hardLimitTimedout = false;
  function tryNonWingifyTracking(nonWingifyScriptsToExecute) {
    if ((window._wingify_code && (window._wingify_code.finished() || window._wingify_code.libExecuted)) || hardLimitTimedout) {
      if (!window.willRedirectionOccurByWingify) {
        clearTimeout(hardLimitTimer);
        for (var i = 0; i < nonWingifyScriptsToExecute.length; i++) {
          try {
            nonWingifyScriptsToExecute[i]();
          } catch (e) {}
        }
        return;
      }
    }
    setTimeout(function() {
      tryNonWingifyTracking(nonWingifyScriptsToExecute)
    }, 500)
  }
  var hardLimitTimer = setTimeout(function() {
    hardLimitTimedout = true;
  }, WINGIFY_HARD_TIMEOUT);
  tryNonWingifyTracking(nonWingifyScriptsToExecute);
})([function() {
  // GA4 code started
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<GA4-Measurement-ID>'); //Replace given measurement ID with your GA4 Measurement ID 
  // GA4 code End/Closed 
}], 5000 /*MAXIMUM TIME IN SECONDS IN WHICH GA CODE WILL EXECUTE ANYWAY*/ );
</script>

Using VWO with Exit Pop-Up Code

You can also use VWO Sync Code with websites with exit pop-ups. Add the Code-1 snippet and then the following code before VWO Sync SmartCode:

<script >
window.onbeforeunload = function() {
if (window.willRedirectionOccurByVWO) {
// No Exit popup.
return null;
} else {
// Move Existing exit popup code Here to show popup in case visitor remains on control.
}
};
</script>

view raw

Note: This code will work for the Asynchronous code as well, but it is recommended to use this with synchronous code.

Was this article helpful?

Return to top

Related articles