Support

Split Testing ExpressionEngine – Multivariate and A/B Split Tests Tutorial

(Setup Time: Approx. 15 minutes + time spent designing split test)

Today I was asked:

“Is it possible to do A/B Split Testing and Multivariate Testing in ExpressionEngine with ZenTester?”

Yes – it’s very easy to set up a split test with ZenTester.

In fact, if you want to get the most out of ExpressionEngine, you should be split testing – otherwise, you’re leaving your site unoptimized, and missing out on potential signups, sales and profits!

Here’s how to do it:

Step 1: Sign up for ZenTester

If you don’t already have an account with ZenTester, you can register for an account here (link opens in a new window so you can refer back to this page).

It’s quick, easy, and much cheaper than any other set of tools with similar features.

Step 2: Create a test

After you have created your ZenTester account, log in and hit “Create New Test”.

And then select either an “A/B Split Test” or “Multivariate Test”:

I recommend Multivariate split testing, because it will let you test many variables on the one page at the same time.

It also lets you use ZenTester’s neat “WYSIWYG” editor – letting you set up split tests as quickly and as easily as editing a Word Document – so you don’t need to set up a second version of each page you want to test inside ExpressionEngine.

Plus, multivariate tests can tell you more about specifically which variables are improving your conversions.

Here’s a brief video demo I did on a recent webinar:

Once you have finished, save your test.

Then select the type of conversion goal you want to track.

(Most of the time, it’s as simple as selecting “Visitors should visit a specific page” and then entering the URL of your “thank-you” page – i.e. the “thank you for your purchase page” for a sale or your “thank you for signing up” page for a signup.)

If you need help, here’s a tutorial about setting up conversion goals.

Step 3: Copy the ZenTester tracking code

Once you’ve set up your test, ZenTester will give you a single line of javascript code to insert into your website.

 

This one line of javascript code handles all tracking and testing seamlessly – including making a quick change to the content on your webpage so that visitors see the right version of your split test. This is how you’re able to set up split tests without editing a whole bunch of code inside ExpressionEngine each time. (Like magic, huh!)

If you miss it along the way, you can always go back and find the code by going into “Your Tests”, clicking on the test you set up, and then click “Get Code”.

Step 4: Find your ExpressionEngine Templates

So now that you’ve got your ZenTester tracking code, the next step is to get it into your ExpressionEngine template.

Log into ExpressionEngine, and then go to “Design”, then “Templates”, then “Template Manager”.

Here you should see the templates for your site.

Step 5: Edit The Template

Select the “Template Group” for the page you want to split test, and click on the name of a template to edit that template.

If there is more than one template here, you will want to find the templates that are used for your thank-you page, and the page you will be split testing at the minimum.

  • If you do not have the ZenTester code on the page you are trying to split test, visitors won’t see the split test variations, and you won’t track any stats.
  • If you do not have the ZenTester code on your thank-you page, you won’t see any conversions recorded for your split test.

Alternatively – insert the ZenTester code into the right area of every template in every template group. It will save time next time you go to set up a new split test.

Step 6: Paste in the ZenTester Tracking Code

Paste the one-line ZenTester javascript code into the template, just before the closing head tag (i.e. just before the </head> ).

When you’re done, save your changes to the template by hitting “Update and Finished”.

Step 7: Unleash the Beast!

Now that everything’s set up, it’s time to unpause your test and let it run!

Go back into the test you set up in the ZenTester control panel (to get back to your test, click “Your Tests”, then click on the test you set up.)

Next, click “Configure”.

Scroll to the bottom of the page and click “Start Test”.

…And Watch The Results Roll In

Now that you’re done, check back occasionally to see the results come in!

Will ZenTester work if my site is using Cloudflare?

Yep, ZenTester will work perfectly with a service such as Cloudflare or most other site speed-up or caching services. Currently we use Cloudflare for our main ZenTester.com website.

How to test video using ZenTester

This tutorial video demonstrates how to test video on your website using ZenTester. A Text version of this tutorial is below.

Text Transcript

In this tutorial video I’m going to show you how you can test different videos or test a video versus text on your website that uses a custom video player such as easy video player or other flash video players. Or it can also be used for videos from YouTube, Vimeo or other similar websites.

Unfortunately testing videos using ZenTester is currently a little more complex than simply testing text, the reason for this is that most custom video players such as Easy Video Player or Most other flash video players use javascript to place the video on the page and you can’t use javascript in a normal ZenTester test without there being security issues.

What we’re going to do is create a ‘custom code block’ test. Now don’t be scared by the name, all it is is a simple window where you will copy and paste the code for your video. So lets go ahead and do that now.

First click on the plus button with a green background when you are on the sections tab of the menu in the bottom right of the screen.

After the new window appears click on ‘custom code block test’.

Then a new window appears, all we have to do here is take the code that our video player gives us, in this case it’s an easy video player script, then copy and paste that into the window.

Then select the check box if you want this to be tested across your entire site.

After you’ve done this we have one more step. We need to copy and paste this script onto our page where we want the video to appear. If you aren’t comfortable editing your website code it’d be best to send these 2 snippets to your webmaster along with a link to this video and he’ll be able figure out how to put them on your website.

So we’ll copy that and go to our code, this is the code for the page we loaded into the editor. We want the video inserted just after the headline. So what we’ll do is create a new line and paste the code in there. Then we go back to our editor, copy the second bit of code and paste it immediately after the first piece of code.

Before the snippet is inserted

After the snippet is inserted

Also ensure you have the main ZenTester javascript code on any page you are testing. I’ve just copied and pasted this on the page now to demonstrate, it’ll look something like this:

This is the code ZenTester gives you after you’ve clicked finished in the editor. It should be on all pages that ZenTester is on. Now that this is done we simply click create and it’s created.

After that is saved and you’ve clicked finished and started the test when visitors come to your site they’ll either see nothing there or they’ll see your video exactly as you like and Zentester will figure out which one works the best. Unfortunately it’s not possible to preview these tests in the editor because of the way the custom code block works, because it’s using Javascript.

Now I’ll demonstrate what you need to do if you want to test a video instead of your text. So I’ll go to this test and I’ll click edit. you can also use this edit button if you accidently close this window and lose this snippet here. If you ever want to bring it up again simply click the edit button.

Now when we want to test the tet we do exactly as we did before where we copy this section and remove the old section from before then we paste this piece of code before the text we want to test. Then we go back to the editor and copy and second piece of code and place this after the text that we want to replace with the video.

Now we go back to the editor and click save and it’s done. If you want to test another video you can do that by clicking the add variation button

and simply copy and paste the new video code into the window. The snippet of code is exactly the same so you don’t have to change a thing on your page. You can just copy and paste the new video in here and click create and it’s done. And then you’ll be testing the difference between your text, video 1 and video 2.

And that’s all there is to it. We are looking into ways into making testing videos easier, as easy as testing text on the page. Unfortunately we need to create a custom solution for every video player on the market. For now this is the best way to test video on your site using ZenTester.

How do I change a goal name?

You can change the name of a goal in one of two ways. The first way is in the visual editor you can double click on the name of the goal and an edit box will appear where you can then change it.

The second way is in the control panel if you load up the test the goal relates to then click goals. Then on the next page click edit beside the goal you would like to change the name of and change it there.

Can I paste the Javascript code somewhere other than the header?

We recommend always pasting the javascript code in between the <head></head> tags on your website. This is because if you place it further down the page the page may end up loading before the tests do and thus visitors may see the original page for a few seconds before seeing the test variation they should be seeing.

How do I change a section name?

You can rename sections in the visual editor by double clicking on the name. A text box will then appear where you can change the name to whatever you like (max 20 characters)

How do I change a test name?

You can rename your test by first loading the test in the Zentester control panel (first click on “your tests” then click on “details” beside the test you’d like to edit) then clicking the “configure” button found along the top, then editing the test name on this configuration page.

How do I change a variation name?

You can rename variations in the visual editor by double clicking on the variation name. A text box will then appear where you can change the name to whatever you like (max 20 characters)

How do I preview my tests?

To Preview your test simply load it up in the visual editor then in the bottom right click on the different tests and variations to see how they will look on the page.

A dedicated preview tool is coming soon so that you can preview your site outside of the editor.

Page 1 of 41234»