Conduct test during the checkout flow
How do I setup Optimizely to conduct tests during the checkout flow. I want to change the names on some buttons on the Add contact info page and Review order page - and put in some other elements. How can I do that on pages that demand that you put something in the basket and clicked checkout?
Take a read of this and see if it helps: https://help.optimizely.com/hc/en-us/articles/2001
I do not think that that help article explains how to go about that situation?
Usually the procedure to load a page in the Editor which requires session-specific content in order to load is as follows:
- Go to the live website and complete whatever actions are necessary to reach the page you are trying to load in the correct state. In your example, you'd probably need to add an item to the basket and then click on the checkout button.
- Leave this tab open
- Return to the Optimizely Editor and open your experiment
- Enable mixed content by clicking the small shield icon in the browser URL bar - this allows secure and non-secure content to load in the Editor and helps us to access session-specific content
- The page should now load in the Editor in the same state you loaded it outside of Optimizely
There are a few other things that can prevent such a page from loading correctly and these are as follows:
- If, whilst loading the page, you open the developer console (CTRL + SHIFT + J in Chrome) and see a number of red error messages which concern something called your X-Frame-Options, then you have a setting on your site which prevents the page from being loaded in an iframe. Since the Editor loads the page in an iframe, you may have difficulty accessing session-specific content due to this.
- The page triggers a timeout, which causes the Editor to load the page via proxy instead of over HTTPS or HTTP. When the Editor loads a page via proxy, a temporary snippet is 'inserted' on the page and any session-specific content is lost, so you'd only see the original version of the basket page instead of the page with items added.
There are three possible solutions to these problems:
- If you have a development set of pages separate from your production pages and they are clones of each other, you can set up the test on the dev page, then change the targeting to match the live page when the test runs.
- Change the X-Frame-Options setting per each page you are testing for a short period of time to setup your test to `ALLOW-FROM optimizely.com`. Then, once the test is live, for the duration it is running and you are not editing the test, revert the X-Frame options to your `SAMEORIGIN` preference.
- If you have a local network, you can save a copy of the basket page with items added to your computer and then load this page locally to make the changes. You'd then change the targeting in the experiment to the live site and the experiment should work as intended.
I know this is a lot of information and some of it is relatively technical, so if you have any questions, please ask away!
This would cause Optimizley not to fire because it would never get a URL match?
Even if the URL were unique each time, you could still follow the steps in my previous instructions i.e load the page outside the Editor first and then load the experiment again within the Editor using the URL that is currently generated.
If that doesn't work, the other workarounds (such as local hosting) may be a better option.
I think you need to set it up using the technique of opening the page in another tab and accessing it through Optimizely like that. Then make your changes.
You then should just have to change the URL targetting to make it a regular expression match?
A representative from Optimizely might be able to walk this through with you.