{"id":9756,"date":"2013-12-18T15:44:13","date_gmt":"2013-12-18T15:44:13","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudioalm\/2013\/12\/18\/implementing-custom-events-in-application-insights\/"},"modified":"2019-02-14T17:54:04","modified_gmt":"2019-02-15T01:54:04","slug":"implementing-custom-events-in-application-insights-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/devops\/implementing-custom-events-in-application-insights-2\/","title":{"rendered":"Implementing custom events in Application Insights"},"content":{"rendered":"
\n
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 \u2013but this doesn\u2019t tell the entire story.  For instance, it doesn\u2019t tell the development team application or interaction specific things like how much a customer LIKES the page.   -Luckily this is easy to add. <\/div>\n<\/p><\/form>\n

Starting with a simple Asp.net form: <\/p>\n

\n

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http:\/\/www.w3.org\/1999\/xhtml"<\/a>>
<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><\/p>\n<\/blockquote>\n

\"image\"<\/a> <\/p>\n

 <\/p>\n

1. We would start by adding the JavaScript to start the default instrumentation for usage (in purple below)<\/p>\n

 <\/p>\n

\n

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

<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); }; <\/em><\/font><\/p>\n

        _daAnalytics.init("aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee<\/strong>");
        _daAnalytics.trackPage();
    <\/script><\/em><\/font><\/p>\n

<\/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><\/p>\n<\/blockquote>\n

This JavaScript is created for you, and can be found in the Application Insights by clicking on the Control panel Icon: <\/p>\n

https:\/\/YOURACCOUNT.visualstudio.com\/_appanalytics\/_admin\/keysanddownloads#application=YOURAPPLICATION<\/a> <\/p>\n

\"image\"<\/a> <\/p>\n

\"image\"<\/a> <\/p>\n<\/p>\n

\"image\"<\/a> <\/p>\n

 <\/p>\n

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

\n

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

<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); }; <\/em><\/p>\n

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

<\/head>
<body>
    <form id="form1" runat="server">
   <script><\/font> <\/p>\n

             function trackHappy() {
                     window.__da.trackEvent("rating", window.location.hostname + window.location.pathname, { "Rating": "Happy<\/strong>" }, { "RatingValue": 100 <\/strong>});
                     alert("Happy! " + window.location.hostname + window.location.pathname);
               } <\/font><\/p>\n

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

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

    <\/div>
    <\/form>
<\/body>
<\/html><\/p>\n<\/blockquote>\n

4. Now to find these events in Application Insights: go to the Usage<\/strong> menu select Events Insights<\/strong> and find your custom event\u2026AFTER you select your custom event you will see the number of events that occurred and their distribution\u2026For instance you can see the Happy button was selected 20 times and the Unhappy button selected 15 times.  <\/p>\n

\"image\"<\/a> <\/p>\n<\/p>\n

4. If you wanted to see the values of the custom event you will want to use the \u201cEvents\u201d report. <\/p>\n

\"image\"<\/a> <\/p>\n

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 <\/p>\n

\"image\"<\/a> <\/p>\n<\/p>\n

(Much of this information is also available at at: http:\/\/msdn.microsoft.com\/library\/dn481098.aspx<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"

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 \u2013but this doesn\u2019t tell the entire story.  For instance, […]<\/p>\n","protected":false},"author":63,"featured_media":45953,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[224,1],"tags":[],"class_list":["post-9756","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-azure","category-devops"],"acf":[],"blog_post_summary":"

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 \u2013but this doesn\u2019t tell the entire story.  For instance, […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/9756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/comments?post=9756"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/9756\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media\/45953"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media?parent=9756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/categories?post=9756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/tags?post=9756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}