Launching A/B tests using Piwik PRO Tag Manager and Optimizely

Published: July 1, 2016 Updated: August 3, 2018 Author Category Tag Manager, Use cases

A/B tests are used to test different elements of web content by comparing two versions, usually planned changes with the original. Learn how to launch them using Piwik PRO Tag Manager and Optimizely:

A/B test scenario

A/B testing is used to test different elements of web content by comparing two versions, usually planned changes with the original. When we want to track and compare conversion results, A/B testing is the best way to do this.

The goal for this use case is to test which set of the headline and subheadline on Contact Page would be more effective and will result in more form fill outs and produce a higher conversion rate.

Let’s see original version…

Original version of the Contact page copy
Original version of the Contact page copy

… and the variation with changed copy:

Changed version of the Contact page copy
Changed version of the Contact page copy

Sadly Optimizely editor has some problems displaying non-standard fonts on piwik.pro.

Without an A/B testing platform, we would have to create copy of the page with different copy. It would require reaching out to your IT team. With Piwik PRO Tag Manager and Optimizely, pretty much anyone can implement this test in a relatively short time.

Free Comparison of 6 Enterprise-Ready Tag Management Systems

Get to know the 40 key differences between Google Tag Manager, Tealium, Segment, Adobe Marketing Cloud, Ensighten & Piwik PRO:

Download FREE Ebook

Optimizely configuration

After coming up with a A/B testing scenario, we have to configure our whole campaign in Optimizely. To do this we need to follow those steps:

1. Start New Experiment:

Starting new experiment in Optimizely
Starting new experiment in Optimizely

2. On the next screen insert easily recognizable Experiment Name (1), set the Experiment URL (2) and Create Experiment:

Setting up the experiment in Optimizely
Setting up the experiment in Optimizely

3. On the next page we configure what the variation will look like. We are automatically on the variation configuration page. After hovering on the copy we see a blue border and after clicking it we are getting an edit menu. We are choosing Edit Element… then Edit Text.

Please look on the screen below:

Changing page element via Optimizely
Changing page element via Optimizely

As you see, Optimizely has a lot of options that we can fiddle with. In this use case we will only be changing the copy.

4. Now the variation is configured. We need to set up the goal before we will be able to start the experiment. To do that, we go to the Goals Set up page in the right top corner:

Setting up the test goals
Setting up the test goals

then click on Create a New Goal:

Creating new goal for the test
Creating new goal for the test

and configure the goal with the Goal Name (1) and URL to track (2) – this should be an unique URL which is reachable only in process of the conversion:

Adding new goal
Adding new goal

The next screen confirms that our new goal is created and already selected in our test along with Engagement goal. We can Close this popup.

5. The last step is to save all the changes with Save now (1) button and start the experiment with Start Experiment (2) button:

Saving and starting experiment
Saving and starting experiment

Piwik PRO Tag Manager Configuration

After creating an experiment in Optimizely itself, we have to enable it on our website. Without Piwik PRO Tag Manager we would have to edit our website’s source code to put the Optimizely snippet into the head section.

But thanks to the new Piwik PRO Tag Manager feature featuring synchronous tags, we can easily add Optimizely code into our website. Of course, we are assuming that Piwik PRO Tag Manager codes have been implemented during installation – we need IT assistance only one at the beginning.

Optimizely configuration in Piwik PRO Tag Manager is quite straightforward. We need to carry out the following steps (and you can explore those steps in our Piwik PRO Tag Manager Guides):

1. Add a new dedicated tag by clicking + Add a tag button

Piwik PRO Tag Manager - adding a tag
Piwik PRO Tag Manager - adding a tag

2. Select a recognizable Tag name (1), choose the Synchronous version of the tag (2) and click on the Optimizely logo (3)

Configuring new tag in Piwik PRO Tag Manager
Configuring new tag in Piwik PRO Tag Manager

If you use a different A/B testing platform you can add custom HTML tag.

3. Type in the Project ID like here (this is an example, of course):

Inserting Optimizely Project ID
Inserting Optimizely Project ID

This unique ID can be found in the Optimizely admin panel of your account. On the main page you should go to the Settings tab and you will be able to find the ID under Snippets Details.

4. Now configure the trigger. The Optimizely code should run on all urls which are taking part in testing – the main url of the Contact page and also the Thank You page which has been set as a goal. We set the Trigger name (1) and Page view conditions to url containing conact (2) instead of equals to /contact to include the Thank You page too.

Trigger configuration in Piwik PRO Tag Manager
Trigger configuration in Piwik PRO Tag Manager

5. At the bottom of the tag configuration screen we see a notification:

Piwik PRO Tag Manager Synchronous code notification
Piwik PRO Tag Manager Synchronous code notification

It is also very important to insert the synchronous code into website’s source code during the installation along with the asynchronous one used for other tracking.

6. Save all configuration

7. The next step is to publish the new changes by clicking the Publish button.

Experiment Review

The best way to check if an experiment is running correctly is to review our website using couple of different browsers in both private and normal mode. If we have not configured custom percentage share of each version in all traffic, both the original and variation are displayed randomly and evenly (in our case 50% original and 50% variation).

A/B testing uses cookies so if a platform decides to show a user one version then, we will continue to see the same version until we delete cookies or change the browser. Private mode is an exception because there is no data saved during the session.

If we see our variation in one of the browser/modes, that means the whole experiment is working. Of course, the speed at which we see results will depend on the level of traffic.

Free Comparison of 6 Enterprise-Ready Tag Management Systems

Get to know the 40 key differences between Google Tag Manager, Tealium, Segment, Adobe Marketing Cloud, Ensighten & Piwik PRO:

Download FREE Ebook

Author:

Szymon Grzesiak, Marketing Tech Lead

Tech savvy Performance Marketing Specialist. LinkedIn Profile

See more posts of this author
Free Comparison of 5 Enterprise-Ready Tag Management Systems

Share