Implementing custom events in Application Insights

Charles Sterling

Application Insights Usage reports can supply an incredible wealth of information by simply adding a single line of JavaScript. Such as how many people visit a page, what browsers are they using, what operating systems they are using, where are they visiting from etc etc etc –but this doesn’t tell the entire story.  For instance, it doesn’t tell the development team application or interaction specific things like how much a customer LIKES the page.   -Luckily this is easy to add.

Starting with a simple Asp.net form:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<input type="button" value="Happy" name="button1"/>
<input type="button" value="Unhappy" name="button2"/>
    </div>
    </form>
</body>
</html>

image

 

1. We would start by adding the JavaScript to start the default instrumentation for usage (in purple below)

 

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

<script type="text/javascript">
        var _daAnalytics = _daAnalytics || {}; _daAnalytics.init = function (d) { _daAnalytics.Commands = _daAnalytics.Commands || []; for (var a = function (a) { return function () { _daAnalytics.Commands.push([a].concat(Array.prototype.slice.call(arguments, 0))) } }, b = "siteId trackLinkClicks setUserId setProperty setView trackPage trackAction trackEvent trackView setAppId setAccountId setUserId".split(" "), c = 0; c < b.length; c++) _daAnalytics[b[c]] = a(b[c]); _daAnalytics.setAppId(d); var a = document.createElement("script"); a.type = "text/javascript"; a.src = "//az416426.vo.msecnd.net/scripts/da.js"; a.async = !0; var b = document.getElementsByTagName("script")[0]; b.parentNode.insertBefore(a, b); };

        _daAnalytics.init("aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee");
        _daAnalytics.trackPage();
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
<input type="button" value="Happy" name="button1"/>
<input type="button" value="Unhappy" name="button2"/>
    </div>
    </form>
</body>
</html>

This JavaScript is created for you, and can be found in the Application Insights by clicking on the Control panel Icon:

https://YOURACCOUNT.visualstudio.com/_appanalytics/_admin/keysanddownloads#application=YOURAPPLICATION

image

image

image

 

2. The next step is to add the custom event to the HTML source. This is done by calling __da.trackEvent() in green below.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

<script type="text/javascript">
        var _daAnalytics = _daAnalytics || {}; _daAnalytics.init = function (d) { _daAnalytics.Commands = _daAnalytics.Commands || []; for (var a = function (a) { return function () { _daAnalytics.Commands.push([a].concat(Array.prototype.slice.call(arguments, 0))) } }, b = "siteId trackLinkClicks setUserId setProperty setView trackPage trackAction trackEvent trackView setAppId setAccountId setUserId".split(" "), c = 0; c < b.length; c++) _daAnalytics[b[c]] = a(b[c]); _daAnalytics.setAppId(d); var a = document.createElement("script"); a.type = "text/javascript"; a.src = "//az416426.vo.msecnd.net/scripts/da.js"; a.async = !0; var b = document.getElementsByTagName("script")[0]; b.parentNode.insertBefore(a, b); };

        _daAnalytics.init("aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee");
        _daAnalytics.trackPage();
    </script>

</head>
<body>
    <form id="form1" runat="server">
   <script>

             function trackHappy() {
                     window.__da.trackEvent("rating", window.location.hostname + window.location.pathname, { "Rating": "Happy" }, { "RatingValue": 100 });
                     alert("Happy! " + window.location.hostname + window.location.pathname);
               }

             function trackUnhappy() {
                   window.__da.trackEvent("rating", window.location.hostname + window.location.pathname, { "Rating": "Unhappy" }, { "RatingValue": 0 });
                   alert("Unhappy! " + window.location.hostname + window.location.pathname);
            }
         </script>

<input type="button" value="Happy" name="button1" onclick="trackHappy()"/>
<input type="button" value="Unhappy" name="button2" onclick="trackUnhappy()"/>

    </div>
    </form>
</body>
</html>

4. Now to find these events in Application Insights: go to the Usage menu select Events Insights and find your custom event…AFTER you select your custom event you will see the number of events that occurred and their distribution…For instance you can see the Happy button was selected 20 times and the Unhappy button selected 15 times. 

image

4. If you wanted to see the values of the custom event you will want to use the “Events” report.

image

After selecting your custom event choose the details tab and you will see heuristics about your custom event like the min, max and average values

image

(Much of this information is also available at at: http://msdn.microsoft.com/library/dn481098.aspx)

0 comments

Discussion is closed.

Feedback usabilla icon