How to Implement Event-based Redirection for Split URL Tests

During a split URL test on your website, there can be cases where you want VWO to execute scripts and leave out others. For example, you may want to execute a code snippet only when there is no redirection. Or you may want to avoid GA Code execution on the control if it is going to be redirected to another variation.

In this article, we will discuss 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 need to execute code only when redirection is not going to happen, then you can attach an event to listen for redirection. Add the following code snippet before VWO Smart Code (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));
     };
})();

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

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 as well as the variation page (for both Synchronous and Asynchronous code). To avoid this, install code-1 above VWO Sync Code and then execute GA tracking code conditionally.

// 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 GA code here.
}

For asynchronous Smart Code, this implementation will not work because by the time the script executes, it is not necessary that the VWO library is loaded. For asynchronous code implementation, add the following code:

(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() {
     (function(i, s, o, g, r, a, m) {
         i['GoogleAnalyticsObject'] = r;
         i[r] = i[r] || function() {
             (i[r].q = i[r].q || []).push(arguments)
         }, i[r].l = 1 * new Date();
         a = s.createElement(o),
             m = s.getElementsByTagName(o)[0];
         a.async = 1;
         a.src = g;
         m.parentNode.insertBefore(a, m)
     })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
     ga('create', 'UA-75286006-1', 'auto'); //UA ID would vary as per UA account
     ga('send', 'pageview');
}], 5000 /*MAXIMUM TIME IN SECONDS IN WHICH GA CODE WILL EXECUTE ANYWAY*/ );

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 Smart Code:

<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>

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