First appearing around 2003 as a means of reducing site load times in the face of consumers who have grown to expect fast and uninterrupted experiences online, Single page applications have become so popular that many site owners are now either building their client-side or moving current applications to the framework.
Most A/B testing software and personalization platforms today vary in their support of single page applications, with some going the route of APIs or tag managers, others providing SDKs per each individual framework, and a few who are simply incapable of implementing SPA-based personalization.
At Dynamic Yield, we believe marketers should be empowered to create and deliver experiences, with agility and speed. And for us, that meant providing a seamless integration with any SPA framework in the market, such as React, Vue.js, Angular, Backbone, among others. One that does not interfere with the development process and codebase, or require adjusting the implementation as new versions of the framework are released.
We developed a flexible solution that allows brands to tailor the website using Dynamic Yield’s full suite of personalization capabilities while prioritizing performance.
Now, let me tell you a little more about what is included in the implementation.
Given SPAs load virtual page views as visitors engage with different areas of the site, Dynamic Yield continually monitors whether there have been any changes in context, such as a transition to a new URL or when a product ‘Quick View’ overlay pops up on a listing page. In these cases, Dynamic Yield will auto-fire an SPA event, after which we will re-evaluate the current context, enabling marketers to seamlessly target the appropriate audience for that specific view.
That means you can rest easy knowing changes will be applied or reapplied at the right moment on your SPA site, without developer intervention or the risk of firing an event in the wrong place.
When personalizing on an SPA site, which does not rely on full page loads to update the content a visitor sees, it’s absolutely critical to understand when a user clicks from one page to another in order to trigger the intended experience. For example, if a user navigated from a product page to the cart, where the marketer intended to showcase free shipping threshold messaging, this typically requires coding a manual event to fire and render the experience – as it would for any other page transition.
Dynamic Yield’s codeless context implementation offers marketers an easy way to set the definitions for each page type and its attributes right from within the admin console, allowing them to be exact in their detection and activation. This also guarantees that audiences, views, and impressions are collected and calculated in an automated fashion.
Historically, optimizing experiences with SPA frameworks meant pre-selecting and defining each element from a web page in the back end to be able to implement any changes in real time. Interfering with the source code in this way is not only time-consuming but also increases the likelihood of breaking the actual code.
With Dynamic Yield’s Shadow DOM, we mimic your environment and the actual structure, content, screens, elements, and even page stylings so you can safely personalize hero banners, product recommendations, page layouts, and more, without development. And because she Shadow DOM is “invisible” to your SPA, this minimizes the number of element lookups, reducing flicker and boosting performance.
Dynamic Yield applies changes to elements on a traditional, static site when a page is activated. However, with single page applications, new elements are updated or added to alter the site experience as a visitor explores.
In order to accomplish this, we introduced three new technologies to the Dynamic Yield platform (marketers may want to have a developer close by to translate):
First, we use a Web API called a MutationObserver to monitor when page elements load, even when the page doesn’t fully reload itself. The MutationObserver provides hooks into DOM mutations, enabling Dynamic Yield to keep track of when a DOM node is inserted, destroyed, or modified so that we can apply (or reapply) changes at the right moment. In other words, we use MutationObserver to “see” when something has changed on your site.
Once an experiment or campaign activates and a visitor is bucketed into the experiment, the MutationObserver checks the DOM for as long as the page is active and applies (and reapplies) changes as appropriate. Once the page deactivates, Dynamic yield no longer attempts to change the elements on that page.
Furthermore, our script has a new state machine, with all of our elements existing as stateful smart objects. This allows us to keep track of what should be shown and when, while listening to your application via the MutationObserver.
And finally, we’ve added Dynamic Yield elements via the Shadow DOM, creating a safe environment for us to make changes in a way that doesn’t interfere with your application’s lifecycle.
Read our Knowledge Base article for more technical details on how Dynamic Yield works with SPAs as well as our solution’s high-level architecture.
One thing is clear, and that’s the fact that more and more websites, many of which used to be based on classic server-side-rendering, are now built or re-built as Single Page Applications (SPAs) using React and similar frameworks.
Dynamic Yield for SPAs guarantees that brands can experiment based on real-time changes, regardless of infrastructure, page, or use case. And we will continue to evolve as new techniques, frameworks, and approaches become available, prioritizing the needs of those who are experimenting with new and innovative technologies to put the customer experience first.
