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.

INITIAL NOTES:

  • 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

spa_for_aam_in_launch

NOTE: 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:

  • Setting JavaScript custom events (see example HERE with Adobe Analytics)
  • 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.

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 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
  • The JavaScript in the simulated SPA link changes the data layer, and THEN calls 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

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy