Implement single-page applications (SPAs) web-spa-implementation

Adobe Experience Platform Web SDK provides rich features that equip your business to execute personalization on next-generation, client-side technologies, such as single-page applications (SPAs).

Traditional websites work on “page-to-page” navigation models, otherwise known as multi-page applications, where website designs are tightly coupled to URLs and transitions from one web page to another requires a page load.

Modern web applications, such as single-page applications (SPAs), have instead adopted a model that propels rapid use of browser UI rendering, which is often independent of page reloads. These experiences can be triggered by customer interactions, such as scrolls, clicks, and cursor movements. As the paradigms of the modern web have evolved, the relevance of traditional generic events, such as a page load, to deploy personalization and experimentation no longer works.

Benefits of using Web SDK for SPAs web-spa-benefits

Here are some benefits of using Web SDK for your single-page applications:

XDM Views and single-page applications web-spa-xdm

The Journey Optimizer web editor takes advantage of a concept called views.

Views are a logical group of visual elements which together make up an SPA experience. A single-page application can, therefore, be considered as transitioning through views, instead of URLs, based on user interactions. A view can typically represent a whole site, a single page or grouped visual elements within a page.

To further explain what views are, the following example uses a hypothetical online e-commerce site.

The concept of views can be extended much further than this. These are just a few examples of views that can be defined on a site.

Implementing XDM views implement-xdm-views

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

This requires performing the following steps in order to complete a one-time developer setup:

 alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
   "web": {
    "webPageDetails": {
    "viewName":"home"
   }
  }
 }
});

sendEvent() function examples

This section outlines two examples showing how to invoke the sendEvent() function in React for a hypothetical e-commerce SPA.

Example 1: A/B test home page web-spa-sample-1

The marketing team want to run A/B tests on the entire home page.

To run A/B tests on the whole home site, sendEvent() must be invoked with the XDM viewName set to home:

function onViewChange() {

  var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash

  viewName = viewName || 'home'; // view name cannot be empty

  // Sanitize viewName to get rid of any trailing symbols derived from URL

  if (viewName.startsWith('#') || viewName.startsWith('/')) {
    viewName = viewName.substr(1);
  }

  alloy("sendEvent", {
    "renderDecisions": true,

    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName":"home"
        }
      }
    }
  });
}

// react router v4

const history = syncHistoryWithStore(createBrowserHistory(), store);

history.listen(onViewChange);

// react router v3

<Router history={hashHistory} onUpdate={onViewChange} >

Example 2: Personalized products web-spa-sample-2

The marketing team want to personalize the second row of products by changing the price label color to red after a user clicks to see all Men products.

function onViewChange(viewName) {

    alloy("sendEvent", {
        "renderDecisions": true,
        "xdm": {
            "web": {
                "webPageDetails": {
                    "viewName": viewName
                }
            }
        }
    });
}

class Products extends Component {

    render() {
        return (

            <
            button type = "button"
            onClick = {
                this.handleLoadMoreClicked
            } > All Men 's Products</button>
        );
    }

    handleLoadMoreClicked() {
        var page = this.state.page + 1; // assuming page number is derived from component's state
        this.setState({
            page: page
        });
        onViewChange('PRODUCTS-PAGE-' + page);
    }
}