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 will focus on using Launch by Adobe, which is the recommended implementation method.
- The items below are going to assume that you are using Launch by Adobe to implement on your site. The considerations would still exist if you are not using 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 Launch by Adobe
As stated, this is a simplified diagram of how SPA pages are handled in an Adobe Audience Manager implementation (without Adobe Analytics) using Launch by Adobe. As you can see, it is fairly straight-forward, with the big decision being how you are going to communicate a view change (or an action) to Launch by Adobe.
Triggering Launch from the SPA page
Two of the more common methods for triggering a rule in Launch (and therefore sending data into AAM), are:
- Using a Direct Call Rule
In this AAM example, we are going to use a Direct Call rule in Launch to trigger the hit going into AAM. 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 Launch.
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 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 Launch by Adobe