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?

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.