Agentless monitoring of Angular 10 application
I have an angular application with routing. I have instrumented it by adding this
<script type="text/javascript" src="https://js-cdn.dynatrace.com/jstag/xxx/yyy/zzz_complete.js"; crossorigin="anonymous"></script>
as the first element in the head -element. I have indicated in the settings that the site is Angular and Dynatrace has also listed that is has detected that framework.
Dynatrace is working as it should be a the first page is loaded, but on subsequent page loads that are done with Angular routing the navigation events are not picked up.
The site can be seen here: https://spaindexing-dev-web.azurewebsites.net/
What is needed for routing events to be tracked? Google analytics is being triggered when navigating.
please check what's needed to properly instrument your angular app on the framework detection page. Enabling "Angular" (detection alone is not sufficient) will tell you all the steps that are needed. Navigation events (i.e., route changes) are only captured whenever they are tied to web requests (XHR) requests. Referring to @Julius L. either use the dedicated angular support as mentioned above or go for the generic support. Don't use both!
We have the Angular setting on
and also the XHR
My question is that is it possible to monitor firstContentfulPaint for both when a user comes in to a SPA site and when he navigates to the next view using the spa framework's routing?
First off, sorry for the late reply, I missed your second question!
LCP and the other core web vitals are only available for Load action. Also referred to as "initial page loads" or "direct hits". They are not available for SPA route changes, since the API does not reset values such as LCP after a "soft navigation" using the SPA router. Many requested this already with the API team but sadly, it still isn't available...
PS: Please revise your set-up because you either use the dedicated Angular (JS) support, which means you enable that switch and follow the instrumentation guidelines, or you enable the other other two toggles for XHR and fetch(), since this is an either or decision.
regards
Thomas
Dynatrace creates user actions in a user session only if the user activity results into a network request.
Did you enable your specific Angular support and/or generic XHR/fetch support in "Async requests and single page apps" in settings of your application in Dynatrace UI?
By default, only Load actions are captured and your site is a single page application.
