�۶���Ƶ

Single-page application implementation

�۶���Ƶ 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 worked on “Page-to-Page” navigation models, otherwise known as Multi Page Applications, where website designs were tightly coupled to URLs and transitions from one webpage to another required a page load.

Modern web applications, such as single-page applications, 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 work.

Benefits of Experience Platform Web SDK for SPAs

Here are some benefits to using �۶���Ƶ Experience Platform Web SDK for your single-page applications:

XDM Views and single-page applications

The �۶���Ƶ Target VEC for SPAs takes advantage of a concept called Views: a logical group of visual elements that 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 or grouped visual elements within a site.

To further explain what Views are, the following example uses a hypothetical online e-commerce site implemented in React to explore example Views.

After navigating to the home site, a hero image promotes an Easter sale as well as the newest products available on the site. In this case, a View could be defined for the entire home screen. This View could simply be called “home”.

As the customer becomes more interested in the products that the business is selling, they decide to click the Products link. Similar to the home site, the entirety of the products site can be defined as a View. This View could be named “products-all”.

Since a View can be defined as a whole site or a group of visual elements on a site, the four products shown on the products site could be grouped and considered as a View. This view could be named “products.”

When the customer decides to click the Load More button to explore more products on the site, the website URL does not change in this case, but a View can be created here to represent only the second row of products that are shown. The View name could be “products-page-2”.

The customer decides to purchase a few products from the site and proceeds to the checkout screen. On the checkout site the customer is given options to choose normal delivery or express delivery. A View can be any group of visual elements on a site, so a View could be created for delivery preferences and be called, “Delivery Preferences”.

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

XDM Views can be leveraged in �۶���Ƶ Target to empower marketers to run A/B and XT tests on SPAs via the Visual Experience Composer. This requires performing the following steps in order to complete a one-time developer setup:

sendEvent() function examples

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

Example 1: A/B test home page

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

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

function onViewChange(viewName) {

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

class Products extends Component {

  render() {
    return (
      <button type="button" onClick={this.handleLoadMoreClicked}>Load more</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);
  }

}

Example 3: A/B test delivery preferences

The marketing team want to run an A/B test to see whether changing the color of the button from blue to red when Express Delivery is selected can boost conversions (as opposed to keeping the button color blue for both delivery options).