Skip to content

ab testing

Harmen Janssen edited this page Aug 22, 2016 · 1 revision

Setting up an A/B test

For information about A/B testing with Optimizely, go this section.

Step 1: Preparing your app

  • Set a canonical url reference in html

It’s a good idea to still indicate the actual url of the alternative page refers to the original one. To achieve this, we should add the following to the layout, in the

section.

file: /application/modules/default/views/layouts/layout.phtml

<?php if(isset($this->canonicalUrl)): ?>
	<link rel="canonical" href="<?php
echo $this->baseUrl($this->canonicalUrl);
?>"></link>
<?php endif; ?>

We’re using the canonicalUrl variable here, that we’ve just added in the controller action.

Step 2: Preparing your specific type of app

Option A: Frontend-driven without redirects (for Angular)

As practiced in the Melkweg site.

	<h1 variation="0">Welcome to my personal homepage</h1>
	<h1 variation="1">I created a homepage and you're not going to believe what happened next!!</h1>
	<h1 variation="2">Free iPod!</h1>

Option B: Frontend-driven, without redirects

See Google's own documentation here: https://developers.google.com/analytics/solutions/experiments-client-side

Basically it comes down to:

  • Load Google cxApi with your experiment id in the query string
  • Ask the API for the variation
  • Do something with this variation (hide/show content, etc.)

Option C: Backend-route, with redirects

  • Create variation view with ?v=b (either in view or controller)
  • Embed Google Content Experiments code on original + variation page
  • The embed will now redirect some users to the variation page

Step 2: For all types of sites

  1. Set up a new experiment under Behavior / Experiments.
  2. Configure the first url: insert an example of a url of this type. This url is not the only one the experiment will be ran on, instead all the pages that include the Google Experiments Code will be included in the experiment.
  3. Configure the second url: choose 'relative' as type, and use '?v=b' as value.
  4. Ignore all warnings about non-existing codes to be embedded (these warnings give really unreliable feedback) and start the experiment.

Also see: http://support.google.com/analytics/bin/answer.py?hl=en&answer=1745216


Optimizely

Optimizely is a easy to use testing tool for websites and the support will answer a lot of questions. But her some things I encountered.

Installation

There is a code snippet that you need to include high in the

of your website. It needs to load synchronously so don't load it with google tag manager.

If you’re an existing Google Tag Manager user, you may already have pre-configured Universal Analytics tags that fire off pageview calls. If this is the case, check this out

No 'Access-Control-Allow-Origin' header is present

If your site is not using https then you will see an No 'Access-Control-Allow-Origin' header is present error in your console. Don't worry about this, optimizely will work anyway. Or [read this ticket that explains this issue] (https://community.optimizely.com/t5/Using-Optimizely/XMLHttpRequest-cannot-load-app-optimizely/td-p/11639).

Clone this wiki locally