Using best practices on SPA pages when sending data to AAM

In this document, we will describe several best practices that you should follow and be aware of as you are sending data from Single Page Applications (SPA) to Adobe Audience Manager (AAM). This doc focuses on using Experience Platform Launch, which is the recommended implementation method.

Initial Notes

• The items below are going to assume that you are using Platform Launch to implement on your site. The considerations would still exist if you are not using Platform Launch, but you would need to adapt them to your implementation method.
• All SPAs are different, so you may need to tweak some of the following items to best meet your need, but we wanted to share some best practices with you; things that you need to think about as you are sending data from SPA pages to Audience Manager.

Simple diagram of working with SPAs and AAM in Experience Platform Launch

Triggering Launch from the SPA page

Two of the more common methods for triggering a rule in Platform Launch (and therefore sending data into Audience Manager), are:

• Setting JavaScript custom events (see example HERE with Adobe Analytics)
• Using a Direct Call Rule

In this Audience Manager example, we are going to use a Direct Call rule in Launch to trigger the hit going into Audience Manager. As you’ll see in the next sections, this really becomes useful by setting the Data Layer to a new value, so that it can be picked up by the Data Element in Platform Launch.

Demo Page

We have created a small demo page that demonstrates changing a value in the data layer and sending it into AAM, as you may do on a SPA page. This functionality can be modeled for more elaborate changes needed. You can find this demo page HERE.

Setting the data layer

As mentioned, when new content is loaded on the page or when someone performs an action on the site, the data layer needs to be set dynamically in the head of the page BEFORE Launch is called and runs the rules, so that Platform Launch can pick up the new values from the data layer and push them into Audience Manager.

If you go to the demo site listed above and look at the page source, you will see:

• The data layer is in the head of the page, before the call to Platform Launch
• The JavaScript in the simulated SPA link changes the Data Layer, and THEN calls Platform Launch (the _satellite.track() call). If you were using JavaScript custom events instead of this Direct Call Rule, the lesson is the same. First change the data layer, and then call Launch.

Additional Resources

• SPA discussion on the Adobe forums
• Reference Architecture sites to show how to implement SPA in Launch by Adobe
• Using best practices when tracking SPA in Adobe Analytics
• Demo site used for this article