Adobe Target For Single-Page-Applications (SPA)

Introduction#

In recent years, Single Page Applications have gained popularity due to the competitive digital era and the need for dynamic content in user experience for a customer-centric environment. Some of the major technology tools like Facebook, Gmail, and Trello are built as single-page applications to deliver a unique experience to end-users with ease of accessibility.

Traditionally, the web apps have been a Multi-Page Applications (MPA), wherein each page has a separate HTML file in the server directory and a new page load is performed every time user navigates the application web pages.

Single Page Applications (SPA) on other hand doesn’t work with individual HTML files in the server directory, It typically has a single HTML page where the content /or components are loaded dynamically from the server, this way there is a single page load for your page and then the content is added actively based upon user interaction.

Adobe Target For Single Page Applications#

Adobe Target library is added in the page header and loads on every page load, this way target library can append mbox parameters and profile parameters in the request and the response from the target would include the experience in case the user qualifies for the one.

One of the challenges using Adobe Target with Single Page Applications is that since there are no individual page loads for dynamically loaded components on the page, Target is unable to render different components/routes in Visual Experience Composer (VEC) to design/optimize the user experience.

Then comes at.js 2. x library version for Adobe Target that can handle Single Page Applications in a much better way than preceding library versions. It supports caching offers on page load, which reduces server calls and improves user experience since offers are served from the cache memory in the browser. Additionally, a simple one-time developer setup enables marketers to use Visual Experience Composer (VEC) and optimize user experience by running A/B and XT activities on SPAs.

Implement Adobe Target For Single-Page-Applications (SPA)#

In this article, we will implement Adobe Target (at.js v2.3.2) for a single page application using adobe launch and explore visual experience composer for editing A/B activity.

Basic Setup

I have set up a simple three-component based single page application for this illustration, where we have three views/components namely - 'page-one’, ‘page-two’, and ‘page-three'. Also, we have our adobe launch library header code implemented in the page header.

  1. Build a data element for view name - The single-page applications generally rely on #hash fragments values for components rendered /or it is handled using routes. In our demo site above, we can see the #fragmenets are available whenever the components change.
    The target library recognizes each individual component as a unique view, hence we need to grab these values and send them in target requests for processing.

Let us set up a custom code data element “Views” returning views/components loaded on the page.

//default view: '#page-one'
var _view = window.location.hash || '#page-one';
try {
  if (_view.indexOf('#') == 0)
    _view = _view.substring(1);
} catch(err) {}
return _view

  1. Install Adobe Target v2 Launch extension (at.js v2.3.2) - The Client Code, Organization Id, and Server Domain will be automatically fetched from your Org ID else add these manually.

  2. Setup Adobe Target Load Rule - In this step, we will create a page load rule to trigger on “Library Loaded (Page Top) event and perform the below actions in sequence:

  • Initialize the target library [Adobe Target v2 - Load Target]
  • Add Params to all requests - Set ‘at_property’ parameter here in order to adobe target to deliver responses pertaining to a specific property.
  • Adobe Target v2 - Trigger View - Use data element %Views% created earlier in this article to return view name.

This rule will load our library on intial page load (first component viewed) for single page appliction, append ‘at_property’ value in targetPageParams() method and then invoke adobe.target.triggerView(“viewNameHere”) to send target request.

  1. Track remaining components/views - In order to track remaining components dynamically loaded, we need to invoke triggerView(“viewNameHere”) method for each view in order to initiate target requests.
    Since we’re using #fragements in our demo site, we will create a rule in launch to trigger on history change and set Adobe Target v2 - Trigger View as an action to initiate target request on view load. Please Note: We already have the target library loaded along with the “at_property” parameter appended form the earlier page load rule.

  1. Adobe Target Visual Experience Composer - Post validating the above steps and making a few target request tracking calls we can set up an activity in visual experience composer with ‘Current View’ set as view name implemented in the tracking call under the modifications tab.

We can navigate to other views by clicking on anchor and selecting ‘Navigate to this link’ /or by selecting ‘Browser’ mode and clicking through view changes.

If you enjoyed this post, I’d be very grateful if you’d help it spread by sharing it on Twitter/LinkedIn. Thank you!

©2020-2024 abhinavpuri.com