How to Implement Event-based Redirection for Split URL Tests – Wingify

close this to read article

This article covers the following:

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

While you are running a Split URL test on your website, there could be scenarios where you may want Wingify 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.

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 Wingify 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 Wingify 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 Wingify 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 Wingify with Exit Pop-Up Code

You can also use Wingify Sync Code with websites with exit pop-ups. Add the Code-1 snippet and then the following code before Wingify 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>

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

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

Need more help?

For further assistance or more information, contact Wingify Support.

Articles in this section

Executing Code Only When Redirection Is Not Happening

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

Using Wingify with Exit Pop-Up Code

Need more help?

Related articles