Is it possible to A/B test javascript-generated element variation using GA Experiments and GA Events?

Question

I'm trying to do A/B testing using Google Experiments on a javascript-generated variation elements.

In simpler example, I'm trying to create a button using javascript that has different colors

The HTML is simple

<form id="foo"></form>

The button is generated like this

var color = Math.floor((Math.random() * 10) + 1) % 2 == 1 ? 'red' : 'green';
$("#foo").append("<input type='submit' value='submit' style='background-color:" + color + "'/>")
$("#foo input[type='submit']").on('click', function(e){
    _gaq.push(['_trackEvent', 'Cart', 'Submit']);
});

Here's the fiddle.

In my Google Analytics, I use the event 'Cart'->'Submit' as a conversion goal. I basically want to test which color has the highest conversion.

I can actually put the color in the event tracker, say _gaq.push(['_trackEvent', 'Cart', 'Submit', 'green']); and do some filtering in the GA console.

I just knew about GA Experiments and I'm trying to learn about it. From what I understand in GA Experiments here, I have to create several pages to test. Is it possible to do this in one page but using different variation on javascript-generated element like above?

Answer 1

You could do it on the same page by passing a parameter to the page, so http://www.yourwebsite.com/page.html?version=2 and http://www.yourwebsite.com/page.html

Set the colour of the button based on the parameter sent to the page.

Google Experiments work by redirecting anyone who lands on http://www.yourwebsite.com/page.html to any URL of your choice ( which could then be http://www.yourwebsite.com/page.html?version=2 ) should they be selected as part of the B testing group.

You should not be randomly generating the colour each time a user visits. It needs to be constant for the A and B version.