Search code examples
azureazure-application-insights

How can I call addTelemetryInitializer when using the latest Javascript snippet?


I am trying to customise the name attribute for pageview events

This has previously been asked, for example How to provide custom names for page view events in Azure App Insights?

but this and all other solutions I've found (and the Microsoft documentation too) are working with an old version of the javascript snippet, of the form

window.appInsights = appInsights;
// …
appInsights.trackPageView();

The current snippet from the portal is very different though

var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var // ...
{
     instrumentationKey:"key"
}); window[aiName] = aisdk,aisdk.queue && aisdk.queue.length ===0 && aisdk.trackPageView({});

I've tried this sort of thing

var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){function n(e){t[e]=function(){var n=arguments;t.queue.push(function(){t[e].apply(t,n)})}}var t={config:e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie=i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message:e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t}(
{
  instrumentationKey:"my-key"
}); window[aiName] = aisdk;
if (aisdk.queue && 0 !== aisdk.queue.length) {
  function adjustPageName(item) {
        var name = item.name.replace("AppName", "");

        if (name.indexOf("Order") !== -1)
            return "Order";

        if (name.indexOf("Product") !== -1)
            return "Shop";

        // And so on...
        return name;
    }

    // Add telemetry initializer
    aisdk.queue.push(function () {
        aisdk.context.addTelemetryInitializer(function (envelope) {
            var telemetryItem = envelope.data.baseData;
            // To check the telemetry item’s type:
            if (envelope.name === Microsoft.ApplicationInsights.Telemetry.PageView.envelopeType || envelope.name === Microsoft.ApplicationInsights.Telemetry.PageViewPerformance.envelopeType) {

                // Do not track admin pages
                if (telemetryItem.name.indexOf("Admin") !== -1)
                    return false;

                telemetryItem.name = adjustPageName(telemetryItem);
            }

        });
    });
  aisdk.trackPageView();
};

But it doesn't work (no errors, but no effect on the telemetry either)

Has anyone managed to get anything like this working using the new snippet?


Solution

  • Please try the code below, I can add a custom property by using the latest javascript code snippet:

    var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){function n(e) { t[e] = function () { var n = arguments; t.queue.push(function () { t[e].apply(t, n) }) } }var t={config: e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie = i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_" + (r = "onerror")); var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message: e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t}(
        {
            instrumentationKey: "xxxxxxxxxx"
        }
    ); window[aiName] = aisdk, aisdk.queue && 0 === aisdk.queue.length;
    // Add telemetry initializer
    aisdk.queue.push(function () {
        var telemetryInitializer = (envelope) => {
            //Add a custom property
            envelope.data.name = 'This item passed through my telemetry initializer';
        };
        appInsights.addTelemetryInitializer(telemetryInitializer);
    });
    aisdk.trackPageView({})
    

    Then in azure portal, the custom property is added:

    enter image description here