Export (0) Print
Expand All

Track web page events and metrics

Visual Studio 2013

Application Insights is in preview.

By inserting a few lines of script in your web pages, you can collect data about how they are used by your customers. Which pages do they come from? Have they visited the page before? What links do they follow?

If your web pages use JavaScript to interact with the user, you can log events that occur in the client web page. (If your website is an ASP.NET application that does most of its work at the server, log events in the web service SDK instead.)

If you created your web app with the Application Insights Tools in Visual Studio 2013, your pages are already instrumented. Skip to log events.

To have data about your web pages appear in Application Insights, you add a small script to each page.

  1. Get a script from Application Insights:

    • If you’re already monitoring performance of the server side of your application, then you’ll want to make the web page data appear under the same component name.

      Go to USAGE and select your application component. Because you don’t have usage analytics set up yet, you’ll see a configuration page. Choose Web site.

      In USAGE, choose Web Site

      Copy the script that appears.

      Copy the script

    • If you want to have the data appear under a new application component name, choose Add Application, click here.

      In Overview, Add Application, choose: click here

      Choose No, Web site.

      Choose No, Website, then Show instructions.

      Provide a name for your new application component, and choose Create.

      Enter new or existing app name, Create.

      Copy the script that appears.

      Copy the script

  2. Paste the script into each of your web pages, just before the close of the </head> tag. 

    It's a good idea to insert the script into all your web pages. If you're using ASP.NET, you can do that by inserting the script into your application's master page.

  3. Deploy and use your web application. Data will appear almost immediately in the Diagnostics Streaming page. After 5-15 minutes, aggregated data will begin to appear on the Usage pages.

Results appear in Application Insights under Usage.

Choose Usage, Features. Page Views

Take a look at the results that appear on different pages.

Choose Usage, Users, Active Users

You can log custom events, for example when the user clicks a particular button. Insert JavaScript like this:

if (appInsights) { appInsights.logEvent( 
    "open/buy", // event name 
    // Optional properties and metric:
    {Stock : "s:243", Property2: "Value 2"}, // Any number of string properties
    {Price: 42} //At most one numeric metric
);}

Results appear under Usage, Features, Events. Select a particular event name (in the table underneath the graph) to see property filters and results for that event.

Select Usage, Features, Events to view results

The path (in the example, "open/buy") is used to organize the events in the report. If you are also using another SDK in the same application (for example on the web server), make sure the event paths are distinct, as they will all be collected into the same report. For example, you could prefix every event name with "webpage/". Don’t begin the event name with ‘/’. Anything after ‘?’ or ‘#’ will be ignored.

If you include the third parameter, the dictionary of properties, you can use the property values to filter the list of event occurrences in the results. In this example, one of the filters is named "Stock". If you include a numeric property, the report will show minimum, average, and maximum values.

Security noteSecurity Note

Take care not to log personally identifiable information in the property values.

By default, the report in Application Insights identifies each page by its URL. If you want to provide a friendlier name, modify the last line of the script that you inserted:

appInsights.logPageView("Management/Accounts/AddUser"); 

Note that only the path part of a URL is used. Anything following ‘?’ or ‘#’ is ignored.

It's also useful to call logPageView() whenever the visible content of a page changes, even if the URL doesn't change - for example if fields are filled from a database query. In that case, you'll want to log a page name that reflects the content. If you want, you can remove the initial call to logPageView().

Some web applications identify their users, typically by requiring them to log in. If your application identifies users in this way, then Application Insights can report statistical information about users—for example, how often the average user returns to a page, irrespective of the client machine that they use.

Adapt the last few lines of the script you downloaded from Application Insights:

    appInsights.start("your component id");
    appInsights.appUserId = userId;    // the id of the logged-in user
    appInsights.accountId = accountId; // the account of the logged-in user
    appInsights.logPageView();

Counts of distinct users will appear under Usage, Authenticated Users.

By contrast, if you don’t use this feature, the metrics are slightly less precise. For example, a user who uses more than one browser, or a user who deletes cookies, is counted as multiple users.

  1. No data will appear until you have actually used your website.

  2. Look for data on the Diagnostics Streaming page. It might take up to 15 minutes for the first data to appear on the Usage pages.

  3. In Usage pages, make sure the time range selector at the top right of the graph includes today.

  4. Make sure you’ve copied the script including the component id correctly.

  5. Make sure that your page calls logPageView() and/or logEvent().

  6. In Internet Explorer use the F12 debug tools to verify that you see web requests to *.services.visualstudio.com when you use your page.

You can have at most one numeric parameter. If you have more than one, convert the others to strings.

  1. Select a particular event in the event list. You can only apply the filters to one event at a time.

  2. The filter doesn’t appear unless your page calls logEvent with a dictionary of properties. The key values of the properties must be strings.

*.services.visualstudio.com

Show:
© 2014 Microsoft