This page explains how to setup Multivariate Testing on your HTML pages, hosted on any domain or CDN.

If you want to know more about Multivariate Testing, then click here to read this first.

STEP 1

Place FunnelFlux's javascript in your lander or offer page. Click here to see where to get this javascript code.

STEP 2

You must edit this javascript code to inject your variations.

Let's have a look at the following JS code given by FunnelFlux:

<!-- FunnelFlux Tracking JS Start -->
<script>
	function ffluxQuery() {;
	document._ffqValues = [];
	function track() {...
	};
}
var fflux = new ffluxQuery();
fflux.ffq('set', ['flux_url', document.URL]);
fflux.ffq('set', ['flux_ref', document.referrer]);
fflux.ffq('set', ['flux_fn', '1478948131054']);
fflux.track();
</script>
<!-- FunnelFlux Tracking JS End -->

You will create your variations just above the fflux.track() line.

Like this:

<!-- FunnelFlux Tracking JS Start -->
<script>
function ffluxQuery() {;
	document._ffqValues = [];
	function track() {...
	};
}
var fflux = new ffluxQuery();
fflux.ffq('set', ['flux_url', document.URL]);
fflux.ffq('set', ['flux_ref', document.referrer]);
fflux.ffq('set', ['flux_fn', '1478948131054']);
fflux.mvt().add('heading', 'Best Shoes Evaaarrr!');
fflux.mvt().add('heading', '#1 Product');
fflux.mvt().add('image', 'image01.jpg');
fflux.mvt().add('image', 'image02.jpg');
fflux.mvt().add('image', 'image03.jpg');
fflux.mvt().add('cta', 'Buy NOW!');
fflux.mvt().add('cta', 'Get one NOW!');
fflux.mvt().add('cta', 'Purchase a Pair NOW!');
fflux.mvt().add('background', '#ff0000');
fflux.mvt().add('background', '#008000');
fflux.track();
</script>
<!-- FunnelFlux Tracking JS End -->

'heading', 'image', 'cta' and 'background' are just example keys here.

The names for the keys are completely up to you, but they must be relevant to what you are testing.

These keys and associated values will then be available to you in your drilldown reports.

Once you are done with your variations, you need to inform FunnelFlux about it by calling the MVT processor:

<!-- FunnelFlux Tracking JS Start -->
<script>
function ffluxQuery() {;
	document._ffqValues = [];
	function track() {...
	};
}
var fflux = new ffluxQuery();
fflux.ffq('set', ['flux_url', document.URL]);
fflux.ffq('set', ['flux_ref', document.referrer]);
fflux.ffq('set', ['flux_fn', '1478948131054']);
fflux.mvt().add('heading', 'Best Shoes Evaaarrr!');
fflux.mvt().add('heading', '#1 Product');
fflux.mvt().add('image', 'image01.jpg');
fflux.mvt().add('image', 'image02.jpg');
fflux.mvt().add('image', 'image03.jpg');
fflux.mvt().add('cta', 'Buy NOW!');
fflux.mvt().add('cta', 'Get one NOW!');
fflux.mvt().add('cta', 'Purchase a Pair NOW!');
fflux.mvt().add('background', '#ff0000');
fflux.mvt().add('background', '#008000');
fflux.mvt().process();
fflux.track();
</script>
<!-- FunnelFlux Tracking JS End -->

By default, one visitor will only see one single combination of variations, no matter how many times he enters your funnel or refreshes the page.

You can change this behavior by passing the following parameter to the MVT function:

fflux.mvt().process( 'always' );

This will always show random variations. If your visitor refreshes the page, he will see new variations.

STEP 3

You can now retrieve, for each key, the variation to output on the current page like this:

<script>
var currentVariation = fflux.mvt().get('key-name');
</script>

With our 4 example keys above, it would be:

<script>
var heading = fflux.mvt().get('heading');
var image = fflux.mvt().get('image');
var cta = fflux.mvt().get('cta');
var bg = fflux.mvt().get('background');
</script>

Now you need to inject these values into your HTML content, where you want them to be displayed. The FunnelFlux MVT Javascript just provides the variations for your page code to consume, and tracks which ones were selected on page load.

This short guide does not aim to teach you Javascript, but here are some quick guidelines.

Your HTML page is made of content elements which have tags/classes. You have to give unique IDs to the elements that will receive the MVT variations.

For example, a title element may look like this:

<h1>My Lander Title</h1>

Adding an ID to this element is easy - let's add a unique ID called 'my-title':

<h1 id='my-title'>My Lander Title</h1>

In Javascript, you can then edit your title dynamically with the code below:

<script>
document.getElementById('my-title').innerHTML = 'This is my new title'; </script>

And if you want to inject the heading variation the MVT script returned to you, you do it in this way:

<script>
document.getElementById('my-title').innerHTML = fflux.mvt().get('heading'); </script>

For this h1 element, we changed its 'innerHTML' property.

You change the 'innerHTML' property when the content of the element you are editing is between an opening and a closing tag.

<h1>THIS IS THE INNER HTML OF THIS H1 TAG</h1>

It is not always what you want to change though.

For example, if you want to change the file path of an image element, you cannot change the inner html, as the path is not between an opening and closing tags.

In this case, you rather change the img element attribute called "src". Here is the HTML markup of an image tag:

<img src='my-image.png' />

Let's add an ID, so we can edit it via javascript:

<img id='my-image' src='my-image.png' />

To edit this src attribute, you write:

<script>
document.getElementById('my-image').src = fflux.mvt().get('image'); </script>

There is yet another common element you may want to change dynamically, and it is the CSS of some HTML tags.

Let's have a look at a link HTML markup:

<a id='my-link' href='http://domain.com?flux_action=1' style="background-color:#000; color:#fff">Link Text</a>

To edit this link's background-color CSS styling in Javascript, you write:

<script>
document.getElementById('my-link').style.backgroundColor = fflux.mvt().get('background');
</script>

One important note here. Properties cannot have minuses characters (-) in their names. "background-color" is not a valid javascript property name.

Everytime an HTML/CSS attribute uses a minus character, the Javascript equivalent removes the minus and changes the next letter with an uppercase.

background-color becomes backgroundColor
background-position becomes backgroundPosition
etc...

It is up to you to check and ensure your Javascript is correct for whatever you are trying to achieve.

To summarise, here is a fully working page (just replace the JS code given by FunnelFlux):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Landing 1</title>
<style>
body{font-family: Arial, sans-serif;font-size: 12px;text-align: center;}
</style>
</head>
<body>
<h1 id='heading'></h1>
<img id='image' alt="" />
<p><a id='cta' href="http://yourdomain.com?flux_action=1" style="border-radius:2px; display: inline-block; padding: 10px 20px; font-size:24px; text-decoration: none; background-color:#fff; color:#fff"></a></p>

<!-- FunnelFlux Tracking JS Start -->
<script>
function ffluxQuery(){
    ;document._ffqValues=[];function track(){...};
}
var fflux = new ffluxQuery();
fflux.ffq('set', ['flux_url', document.URL]);
fflux.ffq('set', ['flux_ref', document.referrer]);
fflux.ffq('set', ['flux_fn', '########]);
fflux.mvt().add('heading', 'Best Shoes Evaaarrr!');
fflux.mvt().add('heading', '#1 Product');
fflux.mvt().add('image', 'image01.jpg');
fflux.mvt().add('image', 'image02.jpg');
fflux.mvt().add('image', 'image03.jpg');
fflux.mvt().add('cta', 'Buy NOW!');
fflux.mvt().add('cta', 'Get one NOW!');
fflux.mvt().add('cta', 'Purchase a Pair NOW!');
fflux.mvt().add('background', '#ff0000');
fflux.mvt().add('background', '#008000');
fflux.mvt().process('always');
fflux.track();
</script>
<!-- FunnelFlux Tracking JS End -->

<script>
document.getElementById("heading").innerHTML = fflux.mvt().get('heading');
document.getElementById("image").src = fflux.mvt().get('image');
document.getElementById("cta").innerHTML = fflux.mvt().get('cta');
document.getElementById("cta").style.backgroundColor = fflux.mvt().get('background');
</script>

</body>
</html>

Declaring MVT variations with another system

Let's say you want to use something like Visual Website Optimiser, Instapage, etc. where you can do split-testing/MVT within their system.

BUT -- you want to send the variation data to FunnelFlux as well so that you can break down the data. Possible? Of course!

The best way to do this is using our JS and declaring MVT data manually, while not using the fflux.mvt functions we have detailed above.

So, firstly remove any MVT info from your basic FunnelFlux no-redirect JS.

Secondly, you'll need to manually create the MVT variation choices by adding some JS to your multivariate/split-test pages in the other system.

Here's an example code, taken from the funnelflux.com website as an example:

<script>
document.ffmvt = {};
document.ffmvt["header-variant"] = "header1.html";
document.ffmvt["video-variant"] = "JPAT11RYWPY";
document.ffmvt["cta"] = "GET STARTED NOW FOR JUST $1";
</script>

As you can possibly tell, we're using MVT to rotate some header sections, Youtube video variations and a CTA text.

We're using JS to do this but are actually choosing these variations before the page loads, and injecting the MVT data into the start of the document.

So, all you need to do is add something like this to <head> to declare your MVT variation names and their content -- declare only one each:

<script>
document.ffmvt = {};
document.ffmvt["some_attribute"] = "some_value";
document.ffmvt["another_attribute"] = "some_other_value";
</script>

If you are manually creating MVT variations with some visual editor, where the code injection is part of the variations, just insert the appropriate variation details in each one.

Your system may also allow you to dynamically inject variation data, e.g. with JS variables. If doing this, ensure your code above comes after their code that determines a variation, and before the base FunnelFlux code, e.g.

<script>
document.ffmvt = {};
document.ffmvt["some_attribute"] = some_mvt_var;
document.ffmvt["another_attribute"] = some_function().get('mvt_var');
</script>

How to use PHP-based MVT with Javascript Tracking

Consider a situation where you want to use MVT and generate the variations with PHP -- e.g. because it does things server-side before the page is rendered, you find it easier to work with, etc.

But, you have people visiting your pages organically, without a FunnelFlux tracking link being used. Perhaps its a general website or sales page, you have a lot of organic shares and views, or the page is loaded via a PHP include() from another system.

In this scenario the PHP multivariate code can generate variations but it can't track the served variations against a user, because that user does not exist to FunnelFlux until the on-page Javascript tracks and logs them -- which happens long after the mvt.php file has done its job.

To deal with this scenario, the PHP code has the ability to "send to JS" to pass onward its variation information in Javascript, which the on-page Javascript can now read and log for the user.

This is documented in the PHP article on MVT, available here.