Use best practices on SPA pages when sending data to AAM

This document describes several best practices for sending data from single-page applications (SPA) to Adobe Audience Manager (AAM). This article focuses on using Experience Platform tags, the recommended implementation method.

Initial notes

• The items below are going to assume that you are using Platform tags to implement on your site. The considerations still exist if you are not using Platform tags, but you would need to adapt them to your implementation method.
• All SPAs are different, so you might need to tweak some of the following items to best meet your requirements, but Adobe wants to share some best practices 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 tags (formerly, Launch)

Triggering tags from the SPA page

Two of the more common methods for triggering a rule in Platform tags (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, you use a Direct Call rule in Platform tags to trigger the hit going into Audience Manager. As you’ll see in the next sections, this becomes useful by setting the Data Layer to a new value, so that it can be picked up by the Data Element in Platform tags.

Demo page

Here is a small page that demonstrates changing a value in the data layer and sending it into Audience Manager, 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 Platform tags are called and runs the rules, so that Platform tags 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 tags
• The JavaScript in the simulated SPA link changes the Data Layer, then calls Platform tags (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 Platform tags.

Additional resources

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