Download our FREE Testing Toolkit for A/B testing ideas, planning worksheets, presentation templates, and more! Download Now

Optimizely Blog

Tips & Tricks for Building Your Experimentation Program

X

Download our FREE Testing Toolkit for A/B testing ideas, planning worksheets, presentation templates, and more!

Get It Now





Today, at Opticon, we announced Support for Dynamic Websites — the industry’s first out-of-the-box solution for experimenting with dynamic content and Single Page Applications. Now marketers can easily experiment on dynamic content. This feature was built to:

  • Experiment out-of-the-box on Single Page Applications in the visual editor
  • Develop experiments more flexibly with new options to apply changes continuously
  • Apply changes at the right time without flash, no matter how dynamic the content

The web has come a long way since Optimizely got started back in 2010. These days websites are, in many cases, fully-fledged browser-based applications. They’ve grown increasingly dynamic, often loading content separately —and after— the initial page load.  What’s more, many development teams have implemented Single Page Application (SPA) frameworks and libraries, such as AngularJS and React.  These applications mimic site navigation without reloading the full page, re-rendering components dozens or even hundreds of times as a user interacts with the page.

SPAs have created faster, more performant web experiences, but it’s made experimentation difficult in many cases. If elements on the page are constantly changing, how can a client-side platform like Optimizely’s Web product ensure it can apply changes at the right time?

A lot of the solutions for experimenting with dynamic content and web applications have historically been very reactive. They’ve involved extensive custom workarounds built by developers that certainly aren’t scalable for any team that’s trying to empower everyone in their organization to experiment.

That’s why we’re extremely excited to announce Support for Dynamic Websites. We’ve been thinking deeply about this problem and have introduced an innovative approach to the Optimizely X Web product so that it will work seamlessly with dynamic content.

Increased Flexibility

The biggest change we have made is a shift in how Optimizely communicates with your website. Leveraging the MutationObserver API, Optimizely can hear and respond immediately to changes to the DOM. So if something dynamic is introduced five, ten, or even thousands of seconds after the page loads — we’ll still be able to apply a change that’s part of an experiment. Instead of ‘asking’ the site every 20ms whether an element exists on the page, we let the page tell us when elements load or re-render. Previously Optimizely would poll for a maximum of 2 seconds after the initial page load. If Optimizely didn’t find any elements to change on the page at that point, it would not make any future attempts to apply variation changes. This meant that changes sometimes wouldn’t get applied, they would get erased by app logic, or would cause flashing.

Built for the Visual Editor

From the beginning Optimizely’s ambition has been simple: make it easy. With our Visual Editor in the Optimizely Web product we’ve empowered marketers and non-technical team-members to run experiments without having to write code or rely on engineering help. That’s why we decided to introduce more flexibility in the web client, so that as websites become increasingly dynamic, marketers can continue to experiment in the Visual Editor. Implementing Support for Dynamic Websites can be done in seconds. To update the version of the client, customers can simply make a change in Settings that will turn dynamic support on.

The capability will work across all Optimizely Web solutions and will be available for any customer on an Enterprise plan. We will be sharing more information about Support for Dynamic Websites at Opticon and we’ll share additional updates on the availability soon! You can view the live stream or the recording from our keynote optimizely.com/opticon.

Optimizely X
comments powered by Disqus