Extending Adobe Target Functionality and Availability

by Natalie Lacuesta Byrum

posted on 03-28-2018

Today, visitors interact with brands on touchpoints well beyond traditional web and mobile sites. They might deposit a check into their bank account or check-in to their hotel room via a mobile app, explore insurance plan options and select the right one for them via a digital kiosk, or even get product information from an AI-powered digital assistant. As customers’ expectations and brand engagements evolve, so does web technology.

Brands are more frequently opting to build a significant portion of their web experiences on one of many popular single page application (SPA) development frameworks for a more seamless customer experience. These brands want to use Adobe Target to personalize and optimize throughout these single page application frameworks just as they have with traditional websites, but there is the added complexity of multiple state or route changes within single page applications that occur after a page loads within the framework. We have several new enhancements that make working within these complex environments immensely easier.

I am thrilled to share three new features we’re releasing that support our goal of extending Adobe Target functionality and availability to more people and places for use in today’s “Modern Web” single page application frameworks. These features include:

Develop experiences for single page apps in the Visual Experience Composer

Single page applications (SPAs) implemented on popular frameworks like React and Angular and custom implementation frameworks are the new norm for the websites of today’s “modern web.” Website visitors love SPAs because they deliver an almost interruption-free experience. When visitors click a link, rather than the entire page reloading, only the impacted area of the page updates. It’s fast. What’s not to like?

SPAs indeed deliver a great customer experience, but they challenge marketers and developers who want to deploy more complex personalization strategies. That’s because most approaches for showing offers rely on the visitor’s browser to request the offer to display as the page loads. With SPAs, because the page doesn’t reload, the script on the page that requests the offer from an optimization solution doesn’t run with a traditional web deployment. To make offers display, marketers must rely on developers to provide code to call the solution when those changes need to be made, or continuously call the solution, which can be tedious.

This was our impetus to create the first (and only) client-side library file engineered expressly for SPAs and the modern web in 2017 – AT.js – with extension libraries that enable a practitioner to very elegantly connect directly into the state/route changes within a single page application for a discrete call to Adobe Target.

This greatly enhances the speed of activity set-up for practitioners, and developers would much prefer to do a one-time setup and let the marketer take control of using Target on the SPA website.

We’ve been developing for SPAs and the modern web for a while now. In 2018, we are taking this ground-breaking research and applying it to the entirely new Visual Experience Composer, giving marketers the agility and control they need to build rich, personalized experiences at scale, no matter what framework or architecture they use.

Nimit describes one of the refinements that the Target team developed for the Visual Experience Composer to support SPAs:

“With an SPA website, the URL often doesn’t uniquely identify what gets shown in the browser as it does with the traditional web in which each click opens a new page and URL. That can make it difficult for marketers to figure out where they are in the SPA when modifying or creating experiences. For example, a travel aggregator website could have a flight reservations section or a hotel reservations section that displays in its SPA when a visitor clicks a tab. These aren’t page changes, but rather what developers call ‘view’ or ‘route’ changes.”

To address this issue, Nimit says “Developers can now write a single line of javascript code that lets the marketer know whenever a new view has displayed by putting a breadcrumb trail at the top of the Visual Experience Composer.” Nimit says, “These seemingly small things can make a big difference to a marketer.”

This new feature will be available through the first-look program in April.

Simplify using Target on React SPAs with the React JS implementation framework

With SPAs on the rise as an enterprise architecture, no framework is more ascendant than the SPA development framework, React. A key reason for its popularity is the method it uses to render SPA components in the browser, which makes delivery of those components incredibly fast. However, that same method also presents issues when using experience optimization solutions that are not developed for SPAs to modify those components—the experiences might not get applied, get partially applied, or disappear altogether at some future point.

To work around this issue, marketers have had to rely on IT teams to create complex custom code or hardcode the test or personalization experience on the SPA website. But once again, reliance on IT creates a bottleneck for testing and personalization scale and velocity. We believed there had to be a better way.

We built the React JS implementation framework for Target, a framework designed specifically for React architectures that enables us to tightly integrate Adobe Target with the popular SPA framework. Once implemented, non-technical marketers can create experience variations for components of their React JS websites using the full capabilities of the Adobe Target Visual Experience Composer. They can also push those experiences live when they launch the activity—in most cases, with no IT assistance needed and no degradation of website performance. The framework will be released on Github this spring.

A continued commitment to all our users and their customers

Nimit summed up the commitment to our customers that these features represent. He says, “We focus on helping our customers deliver the power of personalization everywhere in two key ways. First, by making it super easy for marketers to take control of their personalization strategies and deploy them in a do-it-yourself manner, and second, by giving developers the tools and APIs they need to enable personalization on modern web frameworks, mobile, and IoT devices.”

Next up on the Target features announcements at Adobe Summit? A feature that will help marketers meet the ever-increasing demand for more content to test and personalize in Target. Check the Personalization blog tomorrow!

Topics: Digital Transformation, Adobe Summit, Personalization

Products: Target