Adobe Target Announces Greater Support for the Modern Web, Including SPA

Image source: Adobe Stock / NicoElNino.
Adobe Target Announces Greater Support for the Modern Web, Including SPA
Adobe Products Featured

Websites built as single-page applications (SPAs) on popular frameworks like Angular and React are not a flash-in-the-pan trend. There’s a good chance you’ve already built or plan to build an SPA website because you know it can offer a great customer experience through faster page loads and updates. Your developers love working with SPAs too, because they find them easier to build and debug than traditional multi-page websites. Brands are embracing SPAs now more than ever because they:

  • Are Fast and Responsive. Most resources (HTML/CSS/Scripts) are only loaded once, and only data is transmitted for subsequent actions.
  • Deliver a Linear User Experience. Common parts of the page like the header and footer remain the same, and only content that needs to be changed gets rendered.
  • Can Run OfflineA SPA can cache any local data on the initial page load and supports any user actions thereafter — even without connectivity.

We began releasing features that more fully supported your use of Adobe Target on SPA sites in 2016 with the release of our JavaScript library and implementation framework, AT.js. We’ve been making it easier for you to use Target on these modern web applications ever since. In this new features announcement post, we’ll discuss two new features that will make both marketers and developers happy if they’re working with websites built using a SPA development framework.

For marketers, the Visual Experience Composer for Single Page Apps

We’re extremely pleased to announce the general availability of the Visual Experience Composer for Single Page Apps. The same WYSIWYG experience composer that you as a marketer, product owner, or non-technical Adobe Target user have enjoyed using to author experiences for your traditional multi-page websites is now available with native support for SPAs. That means you can test and personalize more reliably and more quickly — and without needing IT support to set up the experiences you use in your Adobe Target activities on your SPA.

What’s changing with the new Visual Experience Composer for Single Page Apps? The Visual Experience Composer of Adobe Target now leverages a brand-new concept that we call Target Views. Target Views can represent a whole site or a group of visual elements that make up a SPA experience. Adobe Target uses Target Views to deliver personalized content through the Visual Experience Composer, and names of these Target Views will appear on the modifications panel. Any actions performed will be grouped under the appropriate Target View, while the entire experience can be cached so that it is only delivered once or if a Target View is engaged.

The Visual Experience Composer for Single Page Apps showing the “HOME” Target View in the modifications panel.

Below is an example of how Target Views can be configured on a hypothetical e-commerce site:

  1. The home page of a hypothetical e-commerce shop can be defined as a Target View and we can name this view as “home.”
  2. A Target View can also be a group of visual elements. We navigated to the Products tab and see a list of products. In this case, a view can be the four products shown on the page, and we can name this Target View “products.”
  3. After adding a product to the shopping cart, we navigate to a cart. In this case, a Target View can encompass the delivery preferences or even a radio button value for standard shipping. We can name this Target View “normal delivery.”
  4. If we select express shipping via a radio button and nothing else changes in our Target View other than our shipping costs, this can still be a Target View and we can name it “express delivery.”

After a private beta in 2018, the Visual Experience Composer for Single Page Apps is available today! How have our beta customers reacted to these improvements? See one reaction below:

“Compared to the previous solutions I’ve used, the new Visual Editor Composer library allows for the first true integration for single-page applications, built to be used by marketers and optimization teams. We are able to increase our testing velocity with the simplified set-up so you can easily make changes on each step of the form, plus it improves the customer experience by removing the flicker that was so rampant with other solutions.”

John Stewart – Director of Product Management, LendingTree

For Developers, the release of AT.js 2.0

To make all that Visual Experience Composer magic above work, we had to rebuild our experience optimization framework from the ground up and rethink how Adobe Target embeds inside and communicates with SPA frameworks like React or Angular. The release of AT.js 2.0, our next generation client-side JavaScript library, powers the new Visual Experience Composer for Single Page Apps and a whole lot more.

This new library embeds Adobe Target more deeply inside the SPA framework with the new concept of a “view trigger.” A view trigger lets Adobe Target communicate directly with the SPA to deliver content and experiences only when relevant, only in the context of the current view, and without overwriting previous views. AT.js also replaces the concept of the target-global-mbox with a single-page load event supported by as many supplemental views as the SPA requires — all cached for performance. It’s just one more way we’re letting developers work with Adobe Target the way they want using the development framework they want.

Supporting you as you embrace the Modern Web

Single-page applications let you go to market faster and streamline your website development and deployments, while giving your end users a faster, more fluid experience on the web. With these new features, we want to assure you that we’re continuing to embrace the modern web, evolving with, anticipating, and innovating on changes to Adobe Target that support you, whether you are a marketer or a developer.

Still want to learn about more new features and enhancements? Read the first overview announcement that my colleague Drew Burns wrote, and then get more details about each new feature or enhancement by reading these announcement posts:

New Adobe Target Features to Drive Adoption of and Gain More Value from AI

Your Personal Trainer for Personalization Program Growth and Success

Recommended Articles