Expand my Community achievements bar.

Join us at Adobe Summit 2024 for the Coffee Break Q&A Live series, a unique opportunity to network with and learn from expert users, the Adobe product team, and Adobe partners in a small group, 30 minute AMA conversations.
SOLVED

Implementing Adobe Analytics in Angular (Non AEM SPA)

Avatar

Level 1

Hello,

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.

Marc

1 Accepted Solution

Avatar

Correct answer by
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!" https://experienceleaguecommunities.adobe.com/t5/adobe-analytics-blogs/don-t-use-clearvars/ba-p/4107... .

View solution in original post

1 Reply

Avatar

Correct answer by
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!" https://experienceleaguecommunities.adobe.com/t5/adobe-analytics-blogs/don-t-use-clearvars/ba-p/4107... .