Rich-text Reply

Testing "Add to cart" verse "buy now"

Peter26 05-13-16

Testing "Add to cart" verse "buy now"

I'd appreciate help on how we can test the "add to cart" verse "buy now" on each of our product pages?


Our first attempt to set up the experiment was that we put the code for both the "add to cart" button and the "buy now" button in each product page, but with the "add to cart" commented out.  I then went to the optimizely experiment editor and edited HTML, removing the comments around the "add to cart" button and adding comment markers around the "buy now" button.


I then used the substring matchto apply this to all our product pages. 


However, the problem is that in all of the of the product pages in the variation, Optimizely is displaying the add to cart URL of the product I used in the editor, rather than the correct add to cart URL for that product ie. every single one is /addtocart/deal/440 rather than the actual URL.  


Any ideas on how to do this?  Thanks!


Level 1

JasonDahlin 05-13-16

Re: Testing "Add to cart" verse "buy now"

@Peter26 - This is an example of why I refuse to use any WYSIWYG editor.  It did exactly what you told it to do, but it did not know that you want to apply a "similar" change across all pages.


My recommendation is the following:

1- Instead of commenting out the "Buy Now" button, leave it in the page but with a class that makes it "display:none" using CSS rules.  The markup might resemble something like this:

<style>.buy_now { display: none; }</style>
<input type="button" class="add_to_cart" value="Add To Cart">
<input type="button" class="buy_now" value="Buy Now">

2- In your experiment's test variation, inject CSS that hides Add To Cart and displays Buy Now:

$('head').prepend('<style>.add_to_cart { display:none !important;} .buy_now { display:block;}</style>');


Alternatively, if the text on the button is text (vs being part of the button's image), you can simply update the text of the button:

e.g., change

<li class="add_button">Add To Cart</li>

To this

<li class="add_button">Buy Now</li>

Using code like this:

$('.add_button').text('Buy Now');
--Jason Dahlin
Analytics and Testing Guru Smiley Happy

Experimentation Hero