Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to provide custom names for page view events in Azure App Insights?

By default App Insights use page title as event name. Having dynamic page names, like "Order 32424", creates insane amount of event types.

Documentation on the matter says to use trackEvent method, but there are no examples.

appInsights.trackEvent("Edit button clicked", { "Source URL": "http://www.contoso.com/index" })

What is the best approach? It would be perfect to have some sort of map/filter which would allow to modify event name for some pages to the shared name, like "Order 23424" => "Order", at the same time to leave most pages as they are.

like image 974
Igor Yalovoy Avatar asked Dec 14 '18 11:12

Igor Yalovoy


People also ask

How do you query custom events in application Insights?

In the Azure Portal, navigate to the Application Insights resource, and click Log Analytics. Log queries help you to fully leverage the value of the data collected in Azure Monitor Logs. Query your custom events by entering “customEvents” in the prompt and click Run.

Where is ApplicationInsights config?

By default, when using the automated experience from the Visual Studio template projects that support Add > Application Insights Telemetry, the ApplicationInsights. config file is created in the project root folder and when compiled is copied to the bin folder.

What is event telemetry?

You can create event telemetry items (in Application Insights) to represent an event that occurred in your application. Typically it is a user interaction such as button click or order checkout. It can also be an application life cycle event like initialization or configuration update.

What is telemetry in Azure application Insights?

Azure Application Insights sends telemetry from your web application to the Azure portal, so that you can analyze the performance and usage of your application. The telemetry model is standardized so that it is possible to create platform and language-independent monitoring.


2 Answers

You should be able to leverage telemetry initializer approach to replace certain pattern in the event name with the more "common" version of that name.

Here is the example from Application Insights JS SDK GitHub on how to modify pageView's data before it's sent out. With the slight modification you may use it to change event names based on their appearance:

window.appInsights = appInsights;
...
// Add telemetry initializer
appInsights.queue.push(function () {
    appInsights.context.addTelemetryInitializer(function (envelope) {
        var telemetryItem = envelope.data.baseData;

        // To check the telemetry item’s type:
        if (envelope.name === Microsoft.ApplicationInsights.Telemetry.PageView.envelopeType) {
            // this statement removes url from all page view documents
            telemetryItem.url = "URL CENSORED";
        }

        // To set custom properties:
        telemetryItem.properties = telemetryItem.properties || {};
        telemetryItem.properties["globalProperty"] = "boo";

        // To set custom metrics:
        telemetryItem.measurements = telemetryItem.measurements || {};
        telemetryItem.measurements["globalMetric"] = 100;
    });
});
// end

...
appInsights.trackPageView();
appInsights.trackEvent(...);
like image 89
Dmitry Matveev Avatar answered Oct 07 '22 16:10

Dmitry Matveev


With help of Dmitry Matveev I've came with the following final code:

var appInsights = window.appInsights;

if (appInsights && appInsights.queue) {
    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
    appInsights.queue.push(function () {
        appInsights.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);
            }

        });
    });
}

Why this code is important? Because App Insights use page titles by default as Name for PageView, so you would have hundreds and thousands of different events, like "Order 123132" which would make further analysis (funnel, flows, events) meaningless.

Key highlights:

  • var name = item.name.replace("AppName", ""); If you put your App/Product name in title, you probably want to remove it from you event name, because it would just repeat itself everywhere.
  • appInsights && appInsights.queue you should check for appInsights.queue because for some reason it can be not defined and it would cause an error.
  • if (telemetryItem.name.indexOf("Admin") !== -1) return false; returning false will cause event to be not recorded at all. There certain events/pages you most likely do not want to track, like admin part of website.
  • There are two types of events which use page title as event name: PageView and PageViewPerformance. It makes sense to modify both of them.
like image 45
Igor Yalovoy Avatar answered Oct 07 '22 18:10

Igor Yalovoy