Mobile app version of vmapp.org
Login or Join
Murphy175

: How can I test different types of buttons with Google Analytics Tests? 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

@Murphy175

Posted in: #ABTesting #GoogleAnalytics

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?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Murphy175

2 Comments

Sorted by latest first Latest Oldest Best

 

@Vandalay111

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>

10% popularity Vote Up Vote Down


 

@Hamaas447

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme