Implementing Adobe Analytics in Angular (Non AEM SPA) | Community
Skip to main content
M
marc-sequel
New Participant
July 18, 2022
Solved

Implementing Adobe Analytics in Angular (Non AEM SPA)

  • July 18, 2022
  • 1 reply
  • 3413 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by yuhuisg

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 one, single 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/410740 .

1 reply

yuhuisg
yuhuisgAccepted solution
New Participant
July 26, 2022

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 one, single 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/410740 .

Terms & ConditionsAccessibility statement

Loading footer...