[Beta]{class="badge informative" title="This feature is currently in a limited beta release"}

Single-page applications

Single-page applications (SPAs) present unique challenges for web personalization because they dynamically update page content without full page reloads. Journey Optimizer B2B Edition provides specialized tools to handle SPA personalization effectively.

Understanding SPAs

Unlike traditional multi-page websites where each navigation triggers a full page load, SPAs use JavaScript to update content dynamically while maintaining a single HTML page. This approach creates several considerations for web experiences:

Configure SPA support

To personalize SPAs effectively, you need to configure view tracking so that Journey Optimizer B2B Edition can identify when users navigate between virtual views.

Set up view declarations

Work with your development team to implement view declarations using the Adobe Web SDK. Using these view declarations involve calling the sendEvent command with view information whenever the SPA navigates to a new view.

Example implementation:

// When a new view is rendered in your SPA
alloy("sendEvent", {
  "xdm": {
    "web": {
      "webPageDetails": {
        "viewName": "product-detail",
        "URL": window.location.href
      }
    }
  },
  "data": {
    "__adobe": {
      "target": {
        "viewName": "product-detail"
      }
    }
  }
});

View naming conventions

Use consistent, descriptive view names that match your application’s logical structure:

Create web experiences for SPAs

When creating web experiences for SPAs, consider the following best practices:

Target specific views

Handle dynamic content

SPAs often load content dynamically after the initial page render. Use these techniques to ensure that modifications apply correctly:

Wait for elements

Configure modifications to wait for the target elements to exist before applying:

Use mutation observers

For highly dynamic content, the Web SDK includes built-in mutation observers that detect when new elements are added to the page. These observers ensure that modifications are applied even when elements load asynchronously.

SPA frameworks

Journey Optimizer B2B Edition web experiences work with popular SPA frameworks:

Best practices for SPA personalization

Use stable selectors

SPAs often generate dynamic class names or IDs (especially with CSS-in-JS solutions). As an alternative, you can use:

Example:

<!-- Instead of targeting dynamic class names -->
<button class="css-1a2b3c4d">Sign Up</button>

<!-- Add a stable data attribute -->
<button class="css-1a2b3c4d" data-action="signup">Sign Up</button>

CSS selector: [data-action="signup"]

Test views

When testing SPA web experiences:

Handle view transitions

Some SPAs use animations or transitions between views. Consider:

Troubleshooting

As you review the SPA design changes, use the following recommendations to resolve some common issues:

Related topics