Using Google Tag Manager to deploy Azure Application Insights client-side monitoring

If your web application is hosted on Microsoft Azure and you are using Application Insights for monitoring you'll have to add a piece of JavaScript on web pages to collect client-side statistics like 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.

Once you enable your web application for Application Insights monitoring, the JavaScript can be found on Azure portal 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?

You you already use Google Analytics on your web site you may be familiar with Google Tag Manager, aka GTM, if not 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 provides 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. Regardless, 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.