Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Implementing Adobe Analytics in Angular (Non AEM SPA)


Level 1


We're trying to implement Adobe Analytics into an Angular app (not built using AEM SPA). We have already set up the Data Collection and Adobe Analytics extension and using within our legacy (non-SPA app) just fine. But for the Angular app, from what we've read, seen, and experienced, we need to pass the eVars, props, etc, instead of the digitalData via the s.t() function for page views, as the routes change. First, is that a true statement? Second, is there a way for us to use the digitalData layer instead? Would we need to switch using Launch and the _satellite.track() function? Can we use Adobe Analytics and Launch together?

Also, since Adobe Analytics seems to initially convert the digitalData to eVars, props, etc. does anyone know the function that does that? Just thinking, maybe, we could manually call that function to reset the Adobe Analytics variables.

Any assistance would be greatly appreciated.


1 Reply


Community Advisor

Since your website is a SPA, then I strongly advise you to ditch the digitalData key-value data layer as fast as possible! Such key-value data layers really don't work well with the dynamic nature of SPAs.

Instead, you should use an event-driven data layer. Adobe has its own Adobe Client Data Layer. If you're familiar with Google Tag Manager's dataLayer, then the ACDL operates in the same way.

With a data layer like ACDL, you don't need to use _satellite.track() at all. Since you're using Launch, install the ACDL extension, then in your Rules, use the ACDL event to "listen" for the appropriate events.

To your first question, the thing to remember is that a SPA is actually just onesingle web page. It uses JavaScript "trickery", or scripts, to show "pages" of content. On the other hand, Adobe Analytics "s" object is global, so once an eVar or prop has been set, it stays in the "s" object until the whole website gets reloaded, e.g. by pressing the browser's Reload button. Your best bet is to clear out any eVars, props, events, etc that don't need to persist between your hits. Take a look at my article, "Don't use clearVars!" .