Rich-text Reply

Best practices for testing different full checkout flows in Magento?

JulienLN 02-09-15
Accepted Solution

Best practices for testing different full checkout flows in Magento?

Hi guys -

 

It's the first time that I am working with a client using Magento; I usually work with much larger clients who have their in-house platform which is often not agile but very flexible to test different checkout flows.

 

My current client on Magento would clearly benefit from testing out different checkout flows, one page vs multi-page, guest checkout or not, etc. The issue I am running into to advise them correctly on a good setup with Optimizely is that these pages seem to be quite inflexible to work with in Magento. It seems that there will be a lot of custom coding involved to be able to set up a split testing between 2 different checkout flows, using Optimizely, which kind of defeats the purpose of how we use it normally :-)

 

I would be very interested in the best practices the community can share on this topic, which I'd imagine is not completely specific to Magento. To be completely clear: I am not having issues in making minor changes to the existing checkout flow (eg fields, labels, CTAs, etc.) but in testing radically different checkout flows that cannot be implemented through Optimizely but need to be developed by the dev team (easy part) but then tested through Optimizely (the part where it becomes quite difficult due to Magento, not Optimizely).

 

Many thanks for any insights!

 

Best regards,
- Julien

Level 2

Joel_Balmer 02-10-15
 

Re: Best practices for testing different full checkout flows in Magento?

Hi Julien!

 

From what I've understood from your situation, you should be able to:

 

  • Run tests on magento pages by integrating, here.
  • Setup a multipage test, here.
  • Set each page to be a redirect to each new page design in the funnel, here.

 

This should allow you to test full page redesigns in a checkout flow, consistently being bucketed into 1 or the other, for a magento site.

 

If I've misunderstood, please provide let us know, and if you have more details let us know.

 

Hopefully someone else may also be able to provide some insights!

Re: Best practices for testing different full checkout flows in Magento?

Julien,

 

It is true, the nature/structure of Magento makes testing radically different checkout flows rather difficult. I think your best approach here would be to set up redirect tests as can be seen here

 

Coding the changes within Optimizely certainly isn't feasible when it comes to Magento. One very important point to note when setting up redirect tests, however, is to set up goal targeting so that you can properly track click events/goals on your original page and redirects. Make sure to read the section on goal targeting from that prior link: Setting Up Goal Targeting

 

Aside from that, utilizing the Optimizely API is probably going to be your best bet for setting up your click/whatever goals and events. You could use variation code to track events, or you could put all of this in your experiment JavaScript and run specific goal tracking based on URL, for example, or something else (perhaps you have an object attached to the window in your different pages, and a property of this object indicates which page/variation a visitor is on with which you can use to trigger your experiment JS goal tracking respectively). See here for more info. 

 

Depending on how experienced your devs are, you could even override some of the native Magento function calls made throughout the checkout process and inject your own code which could trigger the Optimizely API calls. You could use the wrap function built into the Prototype.js library, or you could simply redefine a native Magento method, call the original with .call or .apply and then run your other code afterward. For example, the following code snippet overrides the native configureElement method that runs on configurable product pages:

 

    // store reference to original method

    var oldConfigureElement = Product.Config.prototype.configureElement;

 

    // define your new method here

    var newConfigureElement = function() {

 

        // call old method and pass in arguments from this new function to old one

        oldConfigureElement.apply(this, arguments); // set proper `this` context

 

        // do all of your other stuff here....... 

        // perhaps fire a specific event that you can listen for in your variation/exp

        // JavaScript in Optimizely, and when fired, you make an API call

 

    };

 

 

    // Set the original method equal to the newly defined method

    Product.Config.prototype.configureElement = newConfigureElement;

 

 

In any case, it's definitely going to take a bit of custom JavaScript to get this done effectively. Hopefully this helps.

 

 

 

 

-- Sean
UI Developer @ Blue Acorn

optimizely developer certification
JulienLN 02-12-15
 

Re: Best practices for testing different full checkout flows in Magento?

Hi Sean -

Many thanks for the very detailed reply! You're right on all counts and yes, it does help a lot! :-)

I'll have to discuss this more in depth with my client's devs to see what is the easiest approach for them, but you've highlighted the best ones indeed :-)

Thanks again!

Best regards,
- Julien
Level 2

Re: Best practices for testing different full checkout flows in Magento?

Always glad to help! Best of luck
-- Sean
UI Developer @ Blue Acorn

optimizely developer certification
imtiaz 10-06-16
 

Re: Best practices for testing different full checkout flows in Magento?

[ Edited ]
 
Level 1