How can I test different types of buttons with Google Analytics Tests?

Question

A few years ago I did A/B testing with Google where I put javascript into my page and it displayed two or more versions of a code snippets.

So I had ONE url with e.g. different buttons (green and red one).

But now there are Tests at Google Analytics where I can test different URLs.

My problem is that I have a Magento shop where I want to test two different types of buttons on product pages.

Can I test such changes with Google Analytics Tests?

Answer 1

I found an answer at Google Developer Docs. Short version:

You define your tests, implement Googles test code and your variations.

<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>
<script>
  // Ask Google Analytics which variation to show the user.
  var chosenVariation = cxApi.chooseVariation();
</script>

And your code for variations:

<!-- Load the JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
  function() {},  // Original: Do nothing. This will render the default HTML.
  function() {    // Variation 1: Banner Image
    document.getElementById('banner').src = 'bay-bridge.jpg';
  },
  function() {    // Variation 2: Sub-heading Text
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
  },
  function() {    // Variation 3: Button Text
    document.getElementById('button').innerHTML = 'Learn more';
  },
  function() {    // Variation 4: Button Color
    document.getElementById('button').className = 'button button-blue';
  }
];

// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(
  // Execute the chosen view
  pageVariations[chosenVariation]
);
</script>

And be sure to fire a pageview after this, so that all the data are send to Google.

Answer 2

i would setup such test with event tracking, so i would have for red button and green button different event tracking codes, like.

Red button: <a href="ab.com/c.html" onClick="_gaq.push(['_trackEvent', 'abtest', 'window.location.href', 'red_button', 1, false]);">abc</a>


Green button: <a href="ab.com/c.html" onClick="_gaq.push(['_trackEvent', 'abtest', 'window.location.href', 'green_button', 1, false]);">abc</a>