Send custom complex properties to Telemetry to Azure Portal with App Insights TrackEvent in Javascript?

Question

How can I send custom complex non-string properties to Telemetry to Azure Portal with App Insights TrackEvent in basic Javascript (not NodeJS)?

I initialized the Application Insights JavaScript SDK through the following setup snippet:

<script type='text/javascript'>
        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||'//az416426.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','Ajax'];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: "@Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration.Active.InstrumentationKey"
        });
        window.appInsights=appInsights;
        appInsights.trackPageView();
    </script>

I tried the example from here https://github.com/microsoft/ApplicationInsights-JS and here https://learn.microsoft.com/en-us/azure/azure-monitor/app/api-custom-events-metrics#properties but without success:

appInsights.trackEvent({
  name: 'EventName',
  properties: { // accepts any type
    prop1: 'string',
    prop2: 123.45,
    prop3: { 
        nested: 'objects are okay too'
    }
  }
});

In the Ajax track request sent to Azure the sent payload has this form:

ver: 2
name:
   name: 'EventName'
      properties:
         prop1: 'string'
         prop2: 123.45
         prop3:
            nested: 'objects are okay too'

And in the Azure Portal App Insights, I get this:

CUSTOM EVENT
Event name  [object Object]

I also get an Javascript Warning in the Console:

Logging.ts:206 AI: CannotSerializeObjectNonSerializable 
message:"Attempting to serialize an object which does not implement ISerializable" 
props:"{name:name}"

I was able to send only by specifying name property separately and only string typed properties and only one-level nested properties.

Successful tests:

appInsights.trackEvent("EventName1", { properties: 'something' });
appInsights.trackEvent("EventName2", { prop1: 'something', prop2: 'prop2' });

Unsuccessful tests:

appInsights.trackEvent("EventName3", { prop1: 'prop1', nestedProp2: {prop2: 'prop2'} });
appInsights.trackEvent('EventName4', { properties: { dataToSend: 'something' }, measurements: {prop1: 'prop1', prop2: 'prop2'}});

Answer 1

The problem is with the SDK version.

In Azure portal and in tags property from browser AJAX calls it shows that i'm using the 1.0.21 SDK version, and those examples are for 2.5.3 SDK version, which are not backward compatible.

The solution was to upgrade to the latest SDK version by replacing the snippet setup (the main difference would be in changing url az416426.vo.msecnd.net/scripts/a/ai.0.js with this one az416426.vo.msecnd.net/scripts/b/ai.2.min.js).

The new Snippet Setup:

<script type="text/javascript">
var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(n){var o={config:n,initialize:!0},t=document,e=window,i="script";setTimeout(function(){var e=t.createElement(i);e.src=n.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",t.getElementsByTagName(i)[0].parentNode.appendChild(e)});try{o.cookie=t.cookie}catch(e){}function a(n){o[n]=function(){var e=arguments;o.queue.push(function(){o[n].apply(o,e)})}}o.queue=[],o.version=2;for(var s=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];s.length;)a("track"+s.pop());var r="Track",c=r+"Page";a("start"+c),a("stop"+c);var u=r+"Event";if(a("start"+u),a("stop"+u),a("addTelemetryInitializer"),a("setAuthenticatedUserContext"),a("clearAuthenticatedUserContext"),a("flush"),o.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},!(!0===n.disableExceptionTracking||n.extensionConfig&&n.extensionConfig.ApplicationInsightsAnalytics&&!0===n.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){a("_"+(s="onerror"));var p=e[s];e[s]=function(e,n,t,i,a){var r=p&&p(e,n,t,i,a);return!0!==r&&o["_"+s]({message:e,url:n,lineNumber:t,columnNumber:i,error:a}),r},n.autoExceptionInstrumented=!0}return o}(
{
  instrumentationKey:"INSTRUMENTATION_KEY"
}
);(window[aiName]=aisdk).queue&&0===aisdk.queue.length&&aisdk.trackPageView({});
</script>

Now, the following Cutom Event is sent and received in Azure portal App Insights as expected:

appInsights.trackEvent({
  name: 'EventName',
  properties: { // accepts any type
    prop1: 'string',
    prop2: 123.45,
    prop3: { 
        nested: 'objects are okay too'
    }
  }
});

Answer 2

Credit to @FlorinVîrdol for his great answer to this question! I would have added a reply comment but I had too much to write...

My requirement was to track the page view by authenticated user id, so in ASP.NET MVC in _Layout.cshtml, get the authenticated user id:

@{
    string authUserId = HttpContext.Current?.User?.Identity?.Name;
    if (string.IsNullOrEmpty(authUserId))
    {
        authUserId = "Not authenticated";
    }
}

I used this value in the same script snippet as @FlorinVîrdol, apart from (a) I needed to use the full app insights connection string which was in the web.config and (b) I wanted to set the user id directly in trackPageView rather than another call to trackEvent, so:

    <script type="text/javascript">
        var sdkInstance = "appInsightsSDK"; window[sdkInstance] = "appInsights"; var aiName = window[sdkInstance], aisdk = window[aiName] || function (n) { var o = { config: n, initialize: !0 }, t = document, e = window, i = "script"; setTimeout(function () { var e = t.createElement(i); e.src = n.url || "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js", t.getElementsByTagName(i)[0].parentNode.appendChild(e) }); try { o.cookie = t.cookie } catch (e) { } function a(n) { o[n] = function () { var e = arguments; o.queue.push(function () { o[n].apply(o, e) }) } } o.queue = [], o.version = 2; for (var s = ["Event", "PageView", "Exception", "Trace", "DependencyData", "Metric", "PageViewPerformance"]; s.length;)a("track" + s.pop()); var r = "Track", c = r + "Page"; a("start" + c), a("stop" + c); var u = r + "Event"; if (a("start" + u), a("stop" + u), a("addTelemetryInitializer"), a("setAuthenticatedUserContext"), a("clearAuthenticatedUserContext"), a("flush"), o.SeverityLevel = { Verbose: 0, Information: 1, Warning: 2, Error: 3, Critical: 4 }, !(!0 === n.disableExceptionTracking || n.extensionConfig && n.extensionConfig.ApplicationInsightsAnalytics && !0 === n.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)) { a("_" + (s = "onerror")); var p = e[s]; e[s] = function (e, n, t, i, a) { var r = p && p(e, n, t, i, a); return !0 !== r && o["_" + s]({ message: e, url: n, lineNumber: t, columnNumber: i, error: a }), r }, n.autoExceptionInstrumented = !0 } return o }({
            connectionString: "@ConfigurationManager.AppSettings["AppInsightsConnectionString"]"
        });
        (window[aiName] = aisdk).queue && 0 === aisdk.queue.length && aisdk.trackPageView({
            properties: {
                AuthId: '@authUserId.Replace(@"\", @"\\")'
            }
        });
    </script>

In Azure you can then perform the following query in the Logs section to see the users page views:

pageViews
    | where timestamp > datetime("2022-06-10T00:00:00.000Z") 
        and timestamp < datetime("2022-06-11T00:00:00.000Z")
    | where client_Type == "Browser"
    | where customDimensions.AuthId == "UK\\someuser"
    | extend authId = customDimensions.AuthId
    | sort by timestamp asc

For reference the minified JavaScript trackPageView method in az416426.vo.msecnd.net/scripts/b/ai.2.min.js looks like this if you need to set more params which you can do by name as I have done above:

trackPageView=function(e,n,t,r,i){this.appInsightsNew.trackPageView({name:e,uri:n,properties:t,measurements:r})