Creating an AB test that switches the route on Angular

This Article Will Help You:

• Issue
• Solution

Issue

Angular JS button links are sometimes tied to the a specific route defined on the router file. However, sometimes we would like to AB test links on those buttons. Modifying those button links with Visual Editor changes or code in the Code Editor or Variation Custom JS code might not be possible, as the processing of this links depends on the router configuration of your app.

Solution

The solution is to make the router conditionally select another route depending on the variation that has been selected. For this we would need to edit the router configuration and build the application again. 

For enabling this, we are going to make use of the on-page javascript api that is included and deployed with the Convert tracking code, on any page that includes it.

So, here we are going to provide some example code:

...

if (convert.currentData.experiments[123456789]) { // Check if user bucketed on variation
  this.router.navigate(['/variation_link']); 
  }
 else { // bucketed on original or non on test
  this.router.navigate(['/original_link']);
  }
 }

...

This code queries the Convert on-page javascript API, for information regarding the variation with its id 123456789 if it has been selected for the visitor. The Convert script should have selected the variation randomly for the visitor at page load or when triggered:

convert.currentData.experiments[123456789];

If it returns undefined, the second route will be taken, which would correspond to the original variation.

You can read where to find the experiment and variation id's in the following article.