{"id":11641,"date":"2016-02-11T14:59:47","date_gmt":"2016-02-11T14:59:47","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudioalm\/?p=11641"},"modified":"2019-02-14T17:36:21","modified_gmt":"2019-02-15T01:36:21","slug":"monitor-team-services-web-extensions-with-visual-studio-application-insights","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/devops\/monitor-team-services-web-extensions-with-visual-studio-application-insights\/","title":{"rendered":"Monitor Team Services web extensions with Visual Studio Application Insights"},"content":{"rendered":"

One\u00a0of the top questions we get\u00a0from developers\u00a0building extensions for Visual Studio Team Services is “Are people using my extension<\/strong>“? The Visual Studio Marketplace<\/a> (launched in November and currently in preview) shows\u00a0the number of Team Services accounts an extension is installed to, but not the number of people actually using it or how these people are using it.\u00a0Enter Visual Studio Application Insights.<\/p>\n

\n

Get an overview of extensions for Team Services<\/a>. Extensions are also available on-premises with Team Foundation Server 2015 Update 2 RC1 (see the release notes<\/a>).<\/p>\n<\/blockquote>\n

Application Insights, or AI, is a Microsoft Azure-hosted service that provides real-time monitoring of Java, .NET, JavaScript (and more) applications.\u00a0Application Insights\u00a0can alert you to problems in your extension, and almost as importantly, it\u00a0can help\u00a0you understand usage of your extension, and help answer questions like:<\/p>\n

    \n
  1. How many people are using my extension?<\/li>\n
  2. Which features\u00a0of my extension are most\/least used?<\/li>\n
  3. What geography are users accessing my extensions from?<\/li>\n
  4. Did I just break all of my users with my update at 3 AM today?<\/li>\n<\/ol>\n

    The answers AI provides are not just\u00a0<\/strong>fun facts<\/b>. AI can help guide your decision-making process (should you stop investing in a particular feature or should you double down?). AI can alert you to\u00a0problems in your extension (before there is a\u00a0mass exodus by your users). AI can also help you optimize your extension based on where users are accessing it from and what browsers they are using.<\/p>\n

    This post will guide you through the simple steps of adding tracking to a web-based Team Services extension.<\/p>\n

    \n

    See real code in action: check out the\u00a0Branch Delete<\/a> extension code on GitHub.<\/p>\n<\/blockquote>\n

    Create an\u00a0Application Insights resource<\/h2>\n

    First step, is to sign-up for an Azure subscription. To get started, visit the Application Insights<\/a> overview page.<\/p>\n

      \n
    1. In the Azure Portal, click the New button, and search for Application Insights<\/strong>.<\/li>\n
    2. Click Create, enter a name for your AI resource, pick an\u00a0application type, and click Create<\/strong>.<\/li>\n<\/ol>\n

      For the name, I chose a name that equates to my Team Services publisher name so that I can monitor usage for multiple extensions in one AI instance. You might just chose to create one AI instance per extension.\u00a0I chose ASP.NET as the application type even though my extension is fully-hosted by Team Services.<\/p>\n

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

      Tracking activity in your extension<\/h2>\n

      Now the fun part. Start by grabbing the provided bootstrapping snippet. You will embed this code in your web extension’s main HTML page.<\/p>\n

      Add the AI JavaScript SDK<\/h3>\n

      AI provides you a customized JavaScript snippet that you can embed in your extension’s main page.<\/p>\n

        \n
      1. Click the get started icon in the main blade and then click the Get code to monitor my web pages<\/b> link:\n\"CodeJsCode\"<\/a><\/li>\n
      2. Copy the JavaScript code snippet.\n