Problem solving and story telling.

In digital business, driving conversions (getting users to do what you want them to do) is a science. And there are plenty of tools out there that can help. Experimenting should be a constant exercise in this respect. Take any discipline, anything competitive, or life in general and you’ll find benefit in testing the waters and adjusting your sail. Our ability to interpret that data is the bottle neck to making profitable decisions. The best lesson I’ve learned is that intuition is usually not enough. We’re better looking at the numbers and trusting data instead.

Over the years, I’ve used various marketing software for automation and optimization. The overall goal has always been to influence users through a funnel of action, finally leading to a “conversion”. Fundamentally, it’s a lever for persuasion and influence. I’ve been working on a product that focuses on this point. Optimizing conversions, sales, and leads can be broken down into a system based approach. That’s what SplitWit aims to achieve. It is a “software as a service” platform that helps you to split test your website. That means it allows you to make changes to your website, that only half of your visitors will see, and then determines which version leads to better results (be that sales, sign-ups, etc.) Through each campaign, you’ll see an increase in performance.

Here, I’ll highlight some features and talk through its development.

Registration engine and basic template

As a starting point, I used a template to quickly get things prototyped and working. I’ve made a few enhancements to this base code while building SplitWit. I will eventually merge those updates into the template repository – which I’ll highlight in another article.

The front-end design utilizes basic principles that focus on user experience. I iterated through various color pallets, and ended with a blue-shaded scheme. Subtle textured patterns applied to background sections help add a finished look. And of course, FontAwesome is my go-to icon set.

Code-wise, some dependencies include Bootstrap 4, jQuery Simple MobileMenu, and Google Fonts. An awesome CSS technique that I used for the first time was to set the main container of each page to have a minimum height of 100% of the viewport. This ensures that the page footer doesn’t end up in the middle of the screen if there is not enough content.

.main-content.container{
  min-height: 100vh;
}

Visual optimizer and editor

This part was fun to build. After setting up an account, you can create experiments that target certain pages of your website. The visual optimizer lets you make changes easily between the control and variation versions.

The editor loads up your website as an iFrame on the right side of the page. Once your page is loaded, SplitWit adds an overlay to the iFrame. This way, instead of interacting with the page, your clicks can be intercepted. Any elements that you click on get loaded up as HTML into the “make a change” section of the editor. Any changes you make get saved to that variation, and will be displayed to half of your visitors.

Here is an example of the code that powers the overlay and connects it to the editor:

pageIframe.contents().find("body").prepend(overlay);
 
pageIframe.contents().find("body *").css("z-index", 1).mouseenter(function(){

  $(this).addClass('highlighted'); 

  testSelectorEl = $(this);
  

}).mouseout(function(){

  $(this).removeClass('highlighted');   

}).click(function(e){

  e.preventDefault();
  var value = testSelectorEl.getPath()
  selectNewElement(value);
  //scroll user to selector input
  $([document.documentElement, document.body]).animate({
    scrollTop: $(".page-editor-info").offset().top
  }, 1000);

});

The editor has lots of built in options, so you can change the style and behavior of your page without needing to know how to code. A marketer can use this tool without the help of a developer – which is clutch!

Metrics and statistical significance

A key feature of SplitWit is to measure conversion metrics and performance indicators. The platform determines which variation is a winner based on the metrics you set. Three types of metrics are offered: page views, click events, and custom API calls.

Algorithms calculate statistical significance based on the number of visitors an experiment receives and the conversion metrics configured. This makes sure that the result is very unlikely to have occurred coincidently.

The code snippet

Each project setup in SplitWit generates a code snippet. Once this snippet is added to a website, SplitWit is able to do its magic. Using JavaScript, it applies variation changes, splits user traffic between versions, and measures key metrics about the experiments running.

The platform uses a relational database structure, powered by MySQL. As you make changes to your experiments, the details are saved and written to your unique snippet file. When the snippet file loads, the first thing is does is check to see if there are any experiments that should be running on the current page. Each experiment can be configured to run on various URLs. The configuration rules contain three parts: a URL pattern, a type (target or exclude), and a match type (exact, basic, or substring). You can read SplitWit documentation to find an explanation of these match types.

Here is the code used to test a URL against an experiment’s configuration rules:

function testUrl(testurl, conditions){
			
	if(testurl.search(/(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/) < 0){
		return window.inputError($(".test-url-input"), "Please test a valid URL.");
	}
	var valid = false;
	var arr  = [],
	keys = Object.keys(conditions);

	for(var i=0,n=keys.length;i<n;i++){
		var key  = keys[i];
		arr[i] = conditions[key];
	}

	conditions = arr;
	for (i = 0; i < arr.length; i++) { 
		var url = conditions[i].url;
		var matchtype = conditions[i].matchtype;
		var conditiontype = conditions[i].conditiontype;

		if(matchtype == "exact" && conditiontype == "target" && url == testurl){
			valid = true;
		}
		if(matchtype == "exact" && conditiontype == "exclude" && url == testurl){
			valid = false;
		}

		if(matchtype == "basic"){
			var cleanTestUrl = testurl.toLowerCase();
			var cleanUrl = url.toLowerCase();

			if(cleanTestUrl.indexOf("?") > 0) {
				cleanTestUrl = cleanTestUrl.substring(0, cleanTestUrl.indexOf("?"));
			}
			if(cleanUrl.indexOf("?") > 0) {
				cleanUrl = cleanUrl.substring(0, cleanUrl.indexOf("?"));
			}
			if(cleanTestUrl.indexOf("&") > 0) {
				cleanTestUrl = cleanTestUrl.substring(0, cleanTestUrl.indexOf("&"));
			}
			if(cleanUrl.indexOf("&") > 0) {
				cleanUrl = cleanUrl.substring(0, cleanUrl.indexOf("&"));
			}
			if(cleanTestUrl.indexOf("#") > 0) {
				cleanTestUrl = cleanTestUrl.substring(0, cleanTestUrl.indexOf("#"));
			}
			if(cleanUrl.indexOf("#") > 0) {
				cleanUrl = cleanUrl.substring(0, cleanUrl.indexOf("#"));
			}
			cleanTestUrl = cleanTestUrl.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "");
			cleanUrl = cleanUrl.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "");
			cleanTestUrl = cleanTestUrl.replace(/\/$/, "");
			cleanUrl = cleanUrl.replace(/\/$/, ""); 

			if(conditiontype == "target" && cleanUrl == cleanTestUrl){
				valid = true;
			}
			if(conditiontype == "exclude" && cleanUrl == cleanTestUrl){
				valid = false;
			}

		}
		if(matchtype == "substring"){
			if(testurl.includes(url) && conditiontype == "target"){
				valid = true;
			}
			if(testurl.includes(url) && conditiontype == "exclude"){
				valid = false;
			}
		} 
	}
	
	return valid;

}

A/B split testing

Conducting experiments with the goal of optimizing a metric is a powerful tool, and yields a large return on the time and money you invest in to it. The SplitWit platform can help digital goals come to fruition in short time. As new features are rolled out, I’ll continue posting updates deep diving into how things work behind the scenes. Follow @SplitWit for regular updates.

www.SplitWit.com