Adobe Target Announces Greater Support for the Modern Web, Including SPA
Image source: Adobe Stock / NicoElNino.
by Jason Hickey
posted on 02-20-2019
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 Offline_. _A SPA can cache any local data on the initial page load and supports any user actions thereafter — even without connectivity.
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:
- The home page of a hypothetical e-commerce shop can be defined as a Target View** **and we can name this view as “home.”
- 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.”
- 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.”
- 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
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:
Topics: Digital Transformation, Adobe Summit, Personalization