If your organization is having trouble successfully running A/B tests in areas of your site where customers are going through the purchase flow, the issue may be due to Single Page Applications (SPAs) on your site. As customers move through the process, your A/B testing tool might not recognize their progress in an SPA environment.
There is enormous value in A/B testing critical areas of the web experience that are often operating in SPA environments, such as an eCommerce checkout.
This guest blog post was written by Jason Boal, The Principal Analyst & Optimization Strategist at 33 Sticks – a leading American analytics agency. Let’s address this common issue and uncover ways to overcome this to unlock hidden revenue on your site.
1. What is a SPA and how can I tell if the web experience uses one?
In a Single-Page Application (SPA) environment, content is loaded dynamically without requiring a full page refresh or reload. User interactions occur on a single page, with new content being loaded as the user navigates. Gmail is a prime example of an SPA. At a high level, an SPA functions similarly to a standard client-server interaction, but the key difference lies in what is returned to the browser.
To determine if you are operating in a Single-Page Application (SPA) environment on your site, pay attention to whether the page reloads as you interact online. If you see the page load indicator—such as the spinning icon in the browser tab (in Chrome)—it means the page is reloading, and you are likely using a traditional multi-page application (MPA).
Many websites are hybrids, meaning that only certain sections, like the checkout process, function as an SPA. To find out which parts of your site are SPAs, you can ask your development team for clarification.
2. Does my testing tool work within SPA environments and what do I do if it doesn’t?
Visual editors are becoming extremely popular in the A/B testing space, for many reasons. One is that Marketers are developing and launching more tests compared to the DEV team. If your testing tool has a difficult time loading and testing content in the visual editor, the reason could be that the tool is either not equipped or not set up to properly handle SPAs. This often happens in a secure checkout flow, where the customer is required to step through items like shipping address, billing, etc. The page you are attempting to A/B test on will not properly load in the visual editor and you will receive an error message.
FIGURE 1 – VISUAL EDITOR SPA ERROR MESSAGE
Ask your vendor if your testing tool can detect changes in the DOM and if it has a mechanism to look for timing.
Here are two challenges that some A/B testing tools face:
- Visual Editors: Some A/B testing tools rely on the initial page load to determine what content to modify. These tools may struggle when content needs to change without a page reload. For example, if your test content is on page 3 of your site’s checkout flow, which is an SPA, the tool might not detect the need to inject content changes because there are no page loads as users navigate through the checkout flow.
- Timing: As content on the page changes, it can be tricky for an A/B testing tool to insert test variations at the right moment. Variations can’t be applied before the content starts loading, but waiting until the content has fully loaded can result in users seeing the content change, a phenomenon known as “flicker.”
AB Tasty has extensive experience creating A/B tests in Single-Page Application (SPA) environments. We recommend implementing a delay on our tag’s execution so that it only triggers when the page is fully ready. This is achieved using a proprietary locking mechanism. This is just one example of how AB Tasty stands out in the A/B testing industry.
3. How do I take it to the next level?
Once you’ve unlocked A/B testing in SPAs, it is time to brainstorm testing ideas and develop a strategic roadmap to uncover ways to increase revenue for your organization. Here are a few ideas to help you jump-start that process!
- Test various methods of updating cart quantity.
- Test product detail page functions such as color variant selection methods.
- Test buy box functions such as stock amount and store information.
- Test different shipping messages based on cart value.
- Test reordering flow steps.
- Test navigation patterns or menu structures to optimize user flow within the SPA.
- A/B test various UI/UX elements like buttons, forms, or interactive features specific to your SPA.
- Test personalization strategies based on user behavior and interactions within the SPA.
Key Takeaways
- There is enormous value in A/B testing critical areas of the web experience that are often operating in SPA environments, such as an eCommerce checkout flow. This is usually the last stage of any digital customer journey and vital to get right.
- Determine whether or not your site leverages SPAs anywhere on your site.
- Dig into your testing tool to ensure it can properly load test content changes with SPA environments.
- Understand what other AB testing tools are out there and how they handle SPAs.
- Develop an optimization roadmap based on your new knowledge!
