How does Evolv AI Work with Single Page Applications?

In recent years, subscription-based brands and retailers like Netflix, Gmail, and Airbnb have adopted single-page applications (SPA) to reduce site load times and offer uninterrupted, seamless, fast, and highly tailored experiences online.

The architecture of single-page applications makes it easier for developers to build, and deploy, experiences with the front-end completely independent from the underlying back-end technology, which is mission-critical for businesses that need to ensure the customers log in, register, purchase, and tracking of orders process remains friction-free, even as other areas of a website mature.

Challenges Brands Face with Experimentation Across SPAs

While there are many upsides to SPA frameworks like React, Vue.js, Angular, Meteor, Backbone, Ember, Knockout, and Aurelia, there are also challenges businesses must overcome. Especially as it relates to experimentation.

Traditionally, A/B testing software and other personalization platforms are ill-equipped to work with SPAs due to the differences in how pages load with an SPA versus a multi-page application. With an SPA, the page load time is faster because the page doesn’t actually reload. Instead, it updates locally in a browser, causing two issues during experimentation: 

• Opaque change management: Most experimentation tools require a full page reload, and because SPAs don’t operate that way, changes to a single page will often be overwritten, and incorrect experiences get served to the end user.
• Lack of context:  Because of the dynamic experience of an SPA, personalization platforms struggle to keep track of a visitor’s context, like whether they’ve landed on a product listing, detail, or cart page in the past, and at what stage the new content should be delivered. 

Evolv AI’s technology solves these issues. 

Evolv AI + Single Page Applications

Evolv AI takes an API-first approach, making experimentation compatible with single-page applications by decoupling content from presentation experiences and preserving context. Going a step beyond this approach is Evolv AI’s Mutate Library, which allows end users to not only experiment with SPA easier but also enables them to make persistent changes through a visual editor: 

• Contextual changes: The conditions for when to apply a change are customizable. Evolv AI’s technology can use the URL, including URL changes to the hash, without requiring a full page reload. Evolv AI can also use any property defined by a customer, for example, whenever a user opens the menu.  
• Consistent delivery: Evolv AI’s proprietary Mutate Library monitors the page for updates. When a new element is added and matches the selector for elements needing a change, Evolv AI’s technology will find and change it. If the element is altered, and changes get removed, Evolv AI will reapply them automatically.

With an SPA, you expect changes to happen on multiple pages at any time. It can be very challenging for someone to create a variant that knows when to apply or reapply, but if not handled, an incorrect page version will appear. Evolv AI handles the changes, so you don’t have to. Learn more about setting up Mutate here.

Benefits of Evolv AI for Single-Page Applications

Evolv AI also offers a host of AI-led experimentation services to simplify SPA experimentation even further: 

• Illuminate the experimentation process: Spin up a preview of an experiment and move away from a publish and pray arrangement most SPAs hold you to. In Evolv AI’s Manager, you can set up, configure, and preview projects or experiences before they go live, and deploy the changes you created within the visual editor.  
• Simplify version control: Working with a single-page application has historically been a code-heavy undertaking that doesn’t cater to a marketer’s wants or needs, making it challenging to create and publish content independently. Evolv AI’s Web Editor and industry-leading Generative AI features make it possible to quickly add or modify elements across your digital assets, from background images to product listing images to typography and more, without needing a designer or developer. 
• Act on insights and contextual recommendations: Our AI’s decision engine and active learning platform uses historical insights and causal inference across all user data to connect users to the best possible experiences in real-time and generate in-context ideas for further optimization.
• Uncover new opportunities: Observe how your experiences are performing in real-time, analyze the results, and glean insights and recommendations for new ways to pair segments of your audiences to the best experiments possible. 

For more information, check out this technical deep dive on how to integrate React. For more information on the SPA framework you leverage, book a time to speak with an expert.