Adobe Target implementation for Single Page Application (SPA) / How to implement Adobe target for Single Page Application (SPA)

Traditional websites work on the "page-to-page" Navigation model which is also known as Multipage application. where the client sends a request to a server and in response, the server sends a packet (HTML). For every page load website designs are tightly coupled with URLs.

Modern web applications are often independent of page reloads. These experiences are often 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 page-load, to deploy personalization and experimentation no longer works.

at.js 2.x is focused on improving at.js to have harmonious interactions with SPAs.

Benefits of using at.js 2.x that are not available in previous versions:

Ability to cache all offers on page-load to reduce multiple server calls to a single server call.
Tremendously improve your end-users' experiences on your site because offers are shown immediately via the cache without lag time introduced by traditional server calls.
A simple one-line of code and one-time developer set up to enable your marketers to create and run A/B and Experience Targeting (XT) activities via the VEC on your SPA.

What is Abobe Target Views and Single Page Application

Adobe Target VEC for SPA uses a new concept called Views. A SPA 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 explain further about what Views are, let’s navigate this hypothetical online e-commerce site implemented in React and explore some example Views. Click the links below to open this site in a new browser tab.

Adobe target SPA demo Home Page

When we load the home page, we can see a hero image that promotes an Easter sale and the newest products that are selling on the site. In this case, a View can be defined as the entire home page. This is handy to note as we will expand on this more in the Implementing Adobe Target Views section below.

Adobe target SPA Product page

As we navigate to the product page the entirety of the products page can be defined as a View. We can name this View "products" just like the pathname in https://target.enablementadobe.com/react/demo/#/products)

We decide 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 here can represent only the second row of products shown above. The View name can be called "PRODUCTS-PAGE-2."

Adobe Target SPA Checkout page

Now, on the checkout page, we are given some options to choose normal delivery or express delivery. Because a View can be any group of visual elements on a site, we can name this "View Delivery Preferences."

Furthermore, the Views concept can be extended much further than this. If you want to personalize the content on the site depending on which delivery preference is selected, a View can be created for each delivery preference. In this case, when we select Normal Delivery, the View can be named "Normal Delivery." If Express Delivery is selected, the View can be named "Express Delivery."

Implementing Adobe Target Views for SPA

Now that we have covered what Adobe Target Views are, we can use this concept in Target to run A/B and XT tests on SPAs via the VEC. This will require a one-time developer setup.

Install at.js 2.x. - First, we need to install at.js 2.x. This version of at.js was developed with SPAs in mind. Previous versions of at.js and mbox.js do not support Adobe Target Views and the VEC for SPAs. Download at.js 2.x via the Adobe Target UI located in Setup > Implementation. at.js 2.x can also be deployed via Adobe Launch. However, the Adobe Target Extensions are currently not up to date and supported.

Implement at.js 2.x’s newest function, triggerView() on your sites. - After defining the Views of your SPA where you want to run an A/B or XT test, implement at.js 2.x’s triggerView() function with the Views passed in as a parameter. This allows marketers to use the VEC to design and run the A/B and XT tests for those Views defined. If the triggerView() function is not defined for those Views, the VEC will not detect the Views and thus marketers cannot use the VEC to design and run A/B and XT tests.

adobe.target.triggerView(viewName, options)

(1)

Parameter: viewName

Type: String

Required?: Yes

Validation:

No trailing spaces.
It cannot be empty.
View name should be unique for all pages.
Warning: View name should not start or end with ' / '. This is because the customer would generally extract the View name from the URL path. For us, "home" and " /home " are different.
Warning: The same view should not be consecutively triggered multiple times with the {page: true} option.

Description: Pass in any name as a string type that you want to represent your View. This View name displays in the Modifications panel of the VEC for marketers to create actions and run their A/B and XT activities.

(2)

Parameter: Options

Type: Object

Required?: No

Description:

TRUE: Default value of the page is true. When page=true, notifications will be sent to the Edge servers for incrementing impression count.

FALSE: When page=false, notifications will not be sent for incrementing impression count. This should be used when you want to only re-render a component on a page with an offer.

Now let’s go through some example use cases on how to invoke the triggerView() function in React for our hypothetical e-commerce SPA:

if we want to run A/B tests on the whole home site, then we might want to name the view "home":

Home Page

function targetView() {
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);
}
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(viewName);
}
}
// react router v4
const history = syncHistoryWithStore(createBrowserHistory(), store);
history.listen(targetView);
// react router v3
<Router history={hashHistory} onUpdate={targetView} >

Product Page

Now, let’s look at an example that is a little bit more complicated. Let’s say as marketers, we want to personalize the second row of the products by changing the "Price" label color to red after a user clicked the Load More button.

function targetView(viewName) {
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(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});
targetView('PRODUCTS-PAGE-' + page);
}
}

Checkout Page

If marketers want to personalize the content on the site depending on which delivery preference is selected, a View can be created for each delivery preference. In this case, when we select Normal Delivery, the View can be named "Normal Delivery." If Express Delivery is selected, the View can be named "Express Delivery."
Now, marketers might want to run an A/B test to see whether changing the color from blue to red when Express Delivery is selected can boost conversions as opposed to keeping the button color blue for both delivery options.

function targetView(viewName) {
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(viewName);
}
}
class Checkout extends Component {
render() {
return (
<div onChange={this.onDeliveryPreferenceChanged}>
<label>
<input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
<span> Normal Delivery (7-10 business days)</span>
</label>
<label>
<input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
<span> Express Delivery* (2-3 business days)</span>
</label>
</div>
);
}
onDeliveryPreferenceChanged(evt) {
var selectedPreferenceValue = evt.target.value;
targetView(selectedPreferenceValue);
}
}