Using Google Tag Manager to Deploy Azure Application Insights Client-side Monitoring

If your web application is hosted on Microsoft Azure and you want to use Application Insights for application monitoring, you'll need to add a piece of JavaScript on your application's web pages in order to collect client-side statistics: page load time, JavaScript errors, users and sessions analytics, etc. The script can be found on Azure portal when Application Insights is enabled for a web application and it should look similar to this (don't pay attention to formatting):

var appInsights=window.appInsights||function(config){ 
function r(config){
t[config]=function(){
var i=arguments;
t.queue.push(function(){t[config].apply(t,i)})
}}
var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;
for(s.src=config.url||"//azyyyyyyy.vo.msecnd.net/scripts/a/ai.0.js",
u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],
i=["Event","Exception","Metric",
"PageView","Trace"];i.length;)
r("track"+i.pop());
return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),
config.disableExceptionTracking|| 
(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){
var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t }({
 instrumentationKey:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" });
window.appInsights=appInsights;
appInsights.trackPageView();

Standard Azure instruction says:

To collect end-user usage analytics about your application, insert the following script into each page you want to track. Place this code immediately before the closing tag, and before any other scripts. Your first data will appear automatically in just a few seconds.

The trouble with this is you may need to modify many web pages and then do the live deployment before any data will be collected, and then if you are not happy with something, repeat the cycle over again. It's time consuming and counter productive. What's the solution then?

If you already use Google Analytics on your web site, you may be familiar with Google Tag Manager, aka GTM. If not, then Google it up. In short, GTM allows dynamically adding random blocks of JavaScript on live web sites without making any changes to the code and control JavaScript block presence from the Web UI. Convenient, efficient, and gives good control.

In general, GTM works out of the box with no or little troubleshooting required but some scripts may not work with it. Many script providers usually state their known compatibility level with GTM. Unfortunately, Azure does not say in their documentation anything about GTM. Noneless, first it's worth a try, and secondly, it does work.

The Application Insights JavaScript for client-side analytics does work with Google Tag Manager and requires no changes nor troubleshooting. Clear pass. Give it a try and enjoy the ride.