Author single-page applications web-author-spas

About views about-views

Single-page applications (SPAs) can now be authored in the web designer visual editor. This allows you to select which specific views you want to apply your web page modifications to.

Learn how to author single-page applications in this video

A view can be defined as a whole site or a group of visual elements on a site, such as the home page, the entirety of the products site or the delivery preferences frame on all the checkout pages.

One-time developer setup is needed to define the views in the Adobe Experience Platform Web SDK implementation. This enables you to create and run Adobe Journey Optimizer web campaigns on SPAs.

Define views in the Web SDK implementation define-views

XDM views can be leveraged in Adobe Journey Optimizer to empower marketers to run web personalization and experimentation campaigns on SPAs via the web visual editor. Learn more

To be able to access and author views in the Journey Optimizer user interface, make sure you follow the steps listed in this section.

Discover views in the web designer discover-views

Once SPAs setup is done in the Adobe Experience Platform Web SDK implementation, you need to navigate through all the views of your website that you want to apply modifications to. Follow the steps below.

  1. Create a web campaign and access the web designer.

    The view you are currently in is displayed on top left.

  2. Swap to Browse mode. Learn more

  3. Navigate between the different pages of the website to discover them all. The view name displayed on top changes when you go through another page.

Apply modifications to other views apply-modifications-views

Once you added a modification while being in a specific view, you can apply it to other selected views. Follow the steps below.

If you have not discovered views using the Browse mode, you will not be able to select them for applying your modifications. Learn more
  1. Select the Modifications icon to display the corresponding pane on the left.

  2. Select any modification and click the More actions button next to it. Select Apply to more views.

  3. Select the views you want to apply your changes to.

  4. Click Apply.

  5. Swap to Browse mode to check the modifications are applied on the desired pages.

How-to video video

This video explains how to:

  • Discover SPA views using Browse mode
  • Perform authoring on the current view
  • Apply website modifications to multiple views or to all views that were discovered
  • Do bulk actions on modifications