SPA and dynamic pages

Some sites add content or move between pages with JavaScript instead of loading a new document. These include single-page apps, product grids, and forms that reveal their next step in place.

Versions added after page load

Keep your normal page scripts. The proxy includes browser code that notices newly added version sets and chooses an alternative through your own website. You do not need a separate hosted embed or a dynamic-page switch.

Add the same markers when you create the content. For example, a product grid can insert:

Copy<section data-vc>
  <h1 data-vc-version>Coffee for your everyday ritual</h1>
  <h1 data-vc-version hidden>A better start to your morning</h1>
</section>

For this client-created content, we recommend initially leaving one version visible and hiding the others. Unlike content already in the server response, its selection happens in the browser and may briefly show that initial version.

Page changes and goals

Page goals follow changes to the page path, including navigation through the browser's Back and Forward buttons. Interaction goals work on newly added buttons and links too. Only versions the visitor actually saw receive credit.

Frameworks that render on both server and browser

React, Vue, and similar frameworks can expect the initial HTML to match the page they are about to manage. This startup step is called hydration. If the proxy has already removed alternatives from a framework-managed section, that expected match is lost.

For those sections, wait until the framework has finished its initial render before adding data-vc. Keep the alternatives in the initial HTML with their data-vc-version markers, then activate the set from your framework's mounted or after-render hook:

Copydocument.querySelector('#product-description').setAttribute('data-vc', '');

This leaves the framework's initial HTML intact. Selection then happens in the browser, using the proxy's first-party tracking paths. Test later rerenders too: do not have your framework continually overwrite the selected version's visibility.

For first-load server selection without flicker, keep the tested section outside the framework-managed region instead. A general SPA switch cannot make two different initial document trees match.

Try it locally

Use the development toolbar to switch through every alternative and check navigation, form state, and rerenders before publishing.