I would rather use a package manager than adding the HTML script manually, especially as you already have one set up with Angular. It will be easier to manage versions, etc... And also this allows to have everything in one or several bundles packaged by Webpack, so better performance in the end.
What I do in this post should give you the time the user stayed on your application, and give you events for each route change: that seems enough, but if you want more events (not just route changes) you can use the same principle on any user action. Of course, if you abuse this, you might reach a quota on Azure Insights, and also that might send quite a lot of user requests (might slow down the app, maybe some users will be concerned about this, so this opens up quite a lot of other issues).
Thanks for the update. I installed the library.
where I need to configure the instrumentation key(the first code snippet)?
how to add the service you created(the second code) ?
Thanks in advance.
As you can check in this commit I stored the key (look for instrumentationKey) in a dedicated Angular service. We could of course do better, but that key will be shared publicly at some point (as it is used to send the data), and it's probably not going to change much, so that solution should be good enough for most people.
Once the service is created, it is just a normal Angular service, so you need to inject it wherever you need it. In the example, it is done in the constructor of the Account service -> you just reference the Insight Service there, and then you can use it.
passed all param for setAuthenticatedUserContext(validatedId, accountId, boolean) boolean is for saving the details in cookie,. we have two unique ides for the application so passed both in validateId and in accountId boolean made as true. not sure this is a correct approach
the page name is captured as with component name like "HomeComponent home".
Hi, thanks for the above article
I am trying to integrate azure insight to my angular-7 application.
this are any questions, any help is appreciated.
Is there any difference by adding the insight through npm vs html script in header as mentioned in the azure insight doc.
One of my requirement is that to track how long a user stayed(duration) in each
page and what all event user clicked. how track this.
Thanks
I would rather use a package manager than adding the HTML script manually, especially as you already have one set up with Angular. It will be easier to manage versions, etc... And also this allows to have everything in one or several bundles packaged by Webpack, so better performance in the end.
What I do in this post should give you the time the user stayed on your application, and give you events for each route change: that seems enough, but if you want more events (not just route changes) you can use the same principle on any user action. Of course, if you abuse this, you might reach a quota on Azure Insights, and also that might send quite a lot of user requests (might slow down the app, maybe some users will be concerned about this, so this opens up quite a lot of other issues).
Thanks for the update. I installed the library.
where I need to configure the instrumentation key(the first code snippet)?
how to add the service you created(the second code) ?
Thanks in advance.
As you can check in this commit I stored the key (look for
instrumentationKey) in a dedicated Angular service. We could of course do better, but that key will be shared publicly at some point (as it is used to send the data), and it's probably not going to change much, so that solution should be good enough for most people.Once the service is created, it is just a normal Angular service, so you need to inject it wherever you need it. In the example, it is done in the constructor of the Account service -> you just reference the Insight Service there, and then you can use it.
Thanks for the help, basic implementation is just done now with login, will test tomorrow morning and let you know the result, thanks
Hope every thing looks good expect below issue
passed all param for setAuthenticatedUserContext(validatedId, accountId, boolean) boolean is for saving the details in cookie,. we have two unique ides for the application so passed both in validateId and in accountId boolean made as true. not sure this is a correct approach
the page name is captured as with component name like "HomeComponent home".
the page view duration capture is not accurate, same second is captured for all pages. any help is appreciated