L740 - Single Page Apps with the Next Generation of AT.JS 2.0

Table of Contents

• Lab Overview
• Lesson 1 - Adobe Target for Single Page Applications
• Lesson 2 - Setup Target Views in a Single-page Application Website
• Lesson 3 - Create Personalized Experiences Using VEC for SPA
• Lesson 4 - Advanced Use Cases
• Additional Resources

Lab Overview

By the time you finish reading this sentence, your web architecture could be out of date. The web is moving at a breakneck pace, and technologies are changing constantly and rapidly. Adobe has built a new implementation library from the ground up to support the modern web and help you adapt to the changing times. At.js 2.0 is a JavaScript library developed for Single-page applications but works with any platform and framework. Learn how to take advantage of the next generation of the At.js 2.0 library to streamline your deployment of React and AngularJS.

Key Takeaways

• Get the basics of Single-page application design and how it impacts authoring in the Adobe Target Visual Experience Composer
• Deploy Adobe Target on a Single-page application web page using the next generation At.js 2.0 Javascript library
• Set up of Target Views in a Single-page application to create tests and personalize content in a do-it-yourself fashion without continuous development dependencies

Prerequisites

• Adobe Target

Lesson 1 - Adobe Target for Single Page Applications

Objective

1. Understand the difference between the traditional Multi-page application and Single-page application
2. Understand why previous versions of At.js did not work well with Single-page applications
3. Understand the new concept of Adobe Target Views

Understanding the Difference Between Traditional Multi-page Applications and Single-page Applications

What is a Multi-page Application?

Multi-Page applications are traditional web applications that need to make server requests to render the entire page in the browser via a full page reload every time it needs to display data or new content as a result of user actions. Even though most of the page is consistent and only parts of the page are to be updated, a Multi-Page application must reload the entire page.

What is a Single-page Application?

Single-page applications are web applications that load a single HTML page and dynamically rewrite the current page depending on user interactions. Example single-page applications include Facebook, Netflix, Twitter, Gmail, and Pinterest. In a Single-page application, after the initial page load, the server doesn't send HTML any more, but rather as the user interacts with the application, server requests are made to retrieve the data and markup for only the relevant and applicable content without ever needing a full page refresh.

What are the Benefits of Single-page Applications?

Single-page applications have many benefits over multi-page applications and therefore, the industry is rapidly adopting Single-page application frameworks. Take a look at the NPM package download trends for the most popular Single-page application frameworks.

You can already see that the most popular framework, React, has NPM package downloads in the millions. We will see that in the near future, majority of businesses with an online presence, will have already adopted Single-page applications. So what are the benefits of Single-page applications over Multi-page applications?

1. Fast and Responsive - Most resources are only loaded once and only data and markup is transmitted for user actions
2. Improved User Experience - Only content that needs to be updated is reloaded while the rest of the page remains intact
3. Runs Offline - Users can interact with the application even after losing Internet connectivity, since all required resources have already been retrieved and cached on page load

Understanding Why Previous Versions of At.js Did Not Work Well With Single-page Applications

Previous versions of At.js worked well with Multi-page applications, since every user interaction resulted in a full page reload. At.js would be included at the head of the HTML page and this allowed it to retrieve offers via a Target backend server call.

However, in Single-page applications, user actions do not trigger a full page reload, but instead only sections of the page would be dynamically rendered and updated. And that introduced a flurry of disadvantages:

1. Customers would need to implement code to retrieve the offers via a Target backend server call which resulted in slower Single-page application performance, as well as complicated and convoluted code
2. Framework-specific extensions would need to be installed and used to deal with route changes, dynamic components, and other SPA feature-sets
3. A longer lifecycle and time to value, since marketers and developers need to collaborate for lengthy periods of time on each personalization campaigning effort, which prevented both teams focusing on what they do best

Understanding the New Target Views for Single-page Applications

Adobe Target is now introducing a new concept called Target Views for Single-page Applications. Target Views can represent the entire page of your Single-page application, or a visual group of elements. A Target View is defined so that a personalization campaign or content can be shown for a Single-page application through Adobe Target.

Let's consider a hypothetical e-commerce website called AShop implemented in React.

https://target.enablementadobe.com/react/demo/

When we navigate to the home page of AShop, we can define the Target View to be the entire home page. We will name this Target View as Home. Naming a view is important and this will be covered in greater detail in the next lesson.

https://target.enablementadobe.com/react/demo/#/products

We then navigate to the products section to see what kind of products AShop has to offer. The first four products shown in this section can also be categorized as a Target view. In this case the Target view name can be Product Result Page One.

https://target.enablementadobe.com/react/demo/#/checkout

Lastly, we add to cart some products that we want to purchase. In this example, a Target view can be defined at a more granular level to the point of representing a delivery preference radio button. We can call this Target View, Normal Delivery.

Lesson 2 - Setup Target Views in a Single-page Application Website

Objective

1. Install Adobe Target in a REACT-based single page application
2. Add Target Views in route change listeners

Lesson Context

Exercise 2.1 Setup REACT-based single page application locally

1. Download website from the Github repository: https://github.com/adobe-target/react-demo
2. Extract .zip file to a local directory
3. Launch Command Prompt and navigate to source code directory as extracted above
4. Execute to install project dependencies:

npm install

This might take a few seconds to complete.

5. Execute to build the project:

npm run build

This will run build in watch mode, i.e. will keep listening to any further changes made to project and build automatically. Please DO NOT CLOSE this terminal.

6. Launch another Command Prompt and navigate to same path as above. Execute to run the project:

npm run start

This will run the web server at http://localhost:3000. Please DO NOT CLOSE this terminal.

7. In a new browser tab, open website http://localhost:3000

Exercise 2.2 Login to Experience Cloud Account and Launch Adobe Target

1. Login to the Experience Cloud web interface by navigating to https://experiencecloud.adobe.com

2. Each attendee has a unique login assigned to them. You should see this on your workstation. Enter that email address and password on the login form and click the Sign in with an Enterprise ID button
   The email address should be of format: L740+id@adobeeventlab.com. Please make note of your unique user id i.e. id in the email address after + sign. We will use it while creating Target activities with unique name and URL in next exercise.

3. Click the Solution Switcher in the navigation header and select Target

4. Click Launch under the Target tile

Exercise 2.3 Install Adobe Target in website

1. Click on Setup link in top navigation bar
2. Click on Implementation link in left panel
3. Click on Download at.js 2.0.1 button
4. Save at.js to public folder of the website source code
5. Edit public/index.html to include at.js library just before <head> tag is closed:

<head>
  ...
  <script src="at.js"></script>
</head>

Exercise 2.4 Add Target Views in route change listeners

1. Find router logic in src/index.js file
2. Call At.js triggerView function on route change. Add the following piece of JS code below the last import statement in src/index.js:

function targetView() {
  let viewName = window.location.hash;

  // Sanitize viewName to get rid of any trailing symbols derived from URL
  if (viewName.startsWith('#')) {
    viewName = viewName.substr(1);
  }
  if (viewName.startsWith('/')) {
    viewName = viewName.substr(1);
  }

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

  // Validate if the Target Libraries are available on your website
  if (window.adobe && adobe.target && typeof adobe.target.triggerView === 'function') {
    adobe.target.triggerView(viewName);
  }
}

const history = syncHistoryWithStore(createBrowserHistory(), store);
history.listen(targetView);

Lesson 3 - Create Personalized Experiences Using VEC for SPA

Objective

1. Author personalized experiences on different views
2. Validate content delivery

Exercise 3.1 Create A/B Activities using the new VEC for SPA

1. Open Adobe Target and go to Activities link from top navigation bar

2. Click on Create Activity button and select Experience Targeting

3. Enter Activity URL as: http://localhost:3000/?user=id# where id is <your unique user id>. Click the Next button.

4. Observe CURRENT VIEW as HOME in Modifications panel on the right

5. Perform a few customization actions on Home view:
   5.1 Change the "Cart" and "Like" buttons on top to a lighter blue color by clicking on these, and then selecting Edit -> Background Color. These modifications should be applied on a "Page Load" event, because we are changing components of the header. So, hover over these actions in the Modifications panel and click the third Move to Page Load Event button
   5.2 Change the "Latest Products for 2019" label to "Hottest Products for 2019" with the text color changed to purple, using the Edit -> Text/HTML customization option
   

6. Next, perform an action on Product details page:
   6.1 Switch to Browse mode by clicking Browse in the top right corner, then click the Products header link
   6.2 Click on the second product - Cara black tote handbag
   6.2 Switch back to Compose mode by clicking Compose
   6.3 Move the Price below Description, by using either one of the Layout -> Rearrange, Layout -> Move or directly editing the Container HTML via Edit -> Text/HTML

7. Click Next. Note that Experience A will be shown to all visitors

8. Click Next again to get to the Goals & Settings screen. Set the Primary goal to Engagement and the measure to Page Views and then proceed to save the activity by clicking Save & Close. When prompted, enter the Activity name as SPA shop <your unique user id>

9. Once the activity is successfully saved, activate it by clicking on the Inactive dropdown and selecting Activate

Exercise 3.2 Validate content delivery

1. Open URL: http://localhost:3000/?user=id#/ in a new browser tab where id is <your unique user id>
2. Validate that all offers apply successfully on Home view and Products view

Lesson 4 - Advanced Use Cases

Objective

1. Learn advanced use cases

Exercise 4.1 Offers on products loaded lazily

1. In website source code, edit src/containers/Products.js.
2. Edit handleLoadMoreClicked function to trigger view on new products loading. Replace handleLoadMoreClicked function with the following code:

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

targetView(viewName) {
  // Validate if the Target Libraries are available on your website
  if (window.adobe && adobe.target && typeof adobe.target.triggerView === 'function') {
    adobe.target.triggerView(viewName);
  }
}

3. Build and run the website
4. Go to Target web UI and edit the activity created in the previous exercise, by hovering over the activity and clicking on the first button with the pencil icon
5. Once the landing page loads, click Browse, then click the Products header link
6. Click Load More button once, to load the second row of products
7. Switch back to Compose mode by clicking Compose
8. Click on the label of the first item in the second product row and Insert After an HTML text fragment saying "Few left, Hurry up!". Customize the added text, by Editing the HTML and setting a red background color and a white text color on the selected text
   
9. As before, Save the activity, make sure it's activated and validate offer delivery

Exercise 4.2 Offers on switching radio buttons in Checkout form

1. In website source code, edit src/containers/Checkout.js
2. Edit onDeliveryPreferenceChanged function to trigger a Target view when delivery preferences are changed. Replace onDeliveryPreferenceChanged function with the following code:

onDeliveryPreferenceChanged(evt) {
  const selectedPreferenceValue = evt.target.value,
   preferenceKey = Object.keys(DELIVERY_PREFERENCES).filter(key => DELIVERY_PREFERENCES[key].value === selectedPreferenceValue);

  this.setState({deliveryPreference: DELIVERY_PREFERENCES[preferenceKey]});
  this.targetView('DELIVERY-' + selectedPreferenceValue);
}

targetView(viewName) {
  // Validate if the Target Libraries are available on your website
  if (window.adobe && adobe.target && typeof adobe.target.triggerView === 'function') {
    adobe.target.triggerView(viewName);
  }
}

3. Build and run the website
4. Go to Target web UI and Edit the previously created activity
5. Click Browse, then click the Products header link
6. Add a couple of products to the cart
7. Click on the Cart button in the top right corner
8. Click the "Checkout your order" button
9. Click on the "Express Delivery" radio button
10. Click Compose
11. Change the "Pay" button color to red
12. As before, Save the activity, make sure it's activated and validate offer delivery

Additional Resources

Read through the following additional resources if you are interested in learning more:

1. Single Page Application Implementation
2. Single Page Application Visual Experience Composer
3. How At.js Works
4. Upgrading From At.js 1.x to 2.0