You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: In this quickstart, learn how to set up client/browser-side website monitoring with Azure Monitor Application Insights.
4
4
ms.topic: quickstart
5
5
ms.date: 07/15/2019
6
6
@@ -20,13 +20,13 @@ With Azure Monitor Application Insights, you can easily monitor your website for
20
20
21
21
## Enable Application Insights
22
22
23
-
Application Insights can gather telemetry data from any internet-connected application; running on-premises or in the cloud. Use the following steps to view this data:
23
+
Application Insights can gather telemetry data from any internet-connected application that's running on-premises or in the cloud. Use the following steps to view this data:
24
24
25
25
1. Sign in to the [Azure portal](https://portal.azure.com/).
>If this is your first time creating an Application Insights resource see [Create an Application Insights resource](https://docs.microsoft.com/azure/azure-monitor/app/create-new-resource).
29
+
>If this is your first time creating an Application Insights resource, see [Create an Application Insights resource](https://docs.microsoft.com/azure/azure-monitor/app/create-new-resource).
30
30
1. When the configuration box appears, use the following table to complete the input fields:
31
31
32
32
| Settings | Value | Description |
@@ -38,8 +38,8 @@ Application Insights can gather telemetry data from any internet-connected appli
38
38
39
39
## Create an HTML file
40
40
41
-
1. On your local computer, create a file called ``hello_world.html``. For this example, create the file on the root of the C: drive so that it looks like ``C:\hello_world.html``.
42
-
1. Copy and paste the script below into ``hello_world.html``:
41
+
1. On your local computer, create a file called ``hello_world.html``. For this example, create the file on the root of drive C so that it looks like ``C:\hello_world.html``.
42
+
1. Copy and paste the following script into ``hello_world.html``:
43
43
44
44
```html
45
45
<!DOCTYPE html>
@@ -49,14 +49,14 @@ Application Insights can gather telemetry data from any internet-connected appli
<p>You can use the Application Insights JavaScript SDK to perform client/browser-side monitoring of your website. To learn about more advanced JavaScript SDK configurations visit the <ahref="https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md"title="API Reference">API reference</a>.</p>
52
+
<p>You can use the Application Insights JavaScript SDK to perform client/browser-side monitoring of your website. To learn about more advanced JavaScript SDK configurations, visit the <ahref="https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md"title="API Reference">API reference</a>.</p>
53
53
</body>
54
54
</html>
55
55
```
56
56
57
57
## Configure Application Insights SDK
58
58
59
-
1. Select **Overview**, select **Essentials**, and then copy your application's **Instrumentation Key**.
59
+
1. Select **Overview** > **Essentials**, and then copy your application's **Instrumentation Key**.
@@ -72,13 +72,15 @@ Application Insights can gather telemetry data from any internet-connected appli
72
72
</script>
73
73
```
74
74
75
-
1. Edit ``hello_world.html``, and then add your instrumentation key.
75
+
1. Edit ``hello_world.html`` and add your instrumentation key.
76
76
77
77
1. Open ``hello_world.html`` in a local browser session. This action creates a single page view. You can refresh your browser to generate multiple test-page views.
78
78
79
79
## Monitor your website in the Azure portal
80
80
81
-
1. Reopen the Application Insights **Overview** page in the Azure portal to view details of your currently running application. The **Overview** page is where you retrieved your instrumentation key. The four default charts on the overview page are scoped to server-side application data. Because we're instrumenting the client/browser-side interactions with the JavaScript SDK, this particular view doesn't apply unless we also have a server-side SDK installed.
81
+
1. Reopen the Application Insights **Overview** page in the Azure portal to view details of your currently running application. The **Overview** page is where you retrieved your instrumentation key.
82
+
83
+
The four default charts on the overview page are scoped to server-side application data. Because we're instrumenting the client/browser-side interactions with the JavaScript SDK, this particular view doesn't apply unless we also have a server-side SDK installed.
82
84
83
85
1. Select **Analytics**. This action opens **Analytics**, which provides a rich query language for analyzing all data collected by Application Insights. To view data related to the client-side browser requests, run the following query:
84
86
@@ -99,15 +101,15 @@ Application Insights can gather telemetry data from any internet-connected appli
99
101
100
102

101
103
102
-
1. Go back to the **Overview** page. Under the **Investigate** header, select **Browser**, and then select **Performance**. Metrics related to the performance of your website display. There's a corresponding view for analyzing failures and exceptions in your website. You can select **Samples** to access the [end-to-end transaction details](../../azure-monitor/app/transaction-diagnostics.md).
104
+
1. Go back to the **Overview** page. Under the **Investigate** header, select **Browser**, and then select **Performance**. Metrics related to the performance of your website appear. There's a corresponding view for analyzing failures and exceptions in your website. You can select **Samples** to access the [end-to-end transaction details](../../azure-monitor/app/transaction-diagnostics.md).
1. On the main Application Insights menu, under the **Usage** header, select [**Users**](../../azure-monitor/app/usage-segmentation.md) to begin exploring the [user behavior analytics tools](../../azure-monitor/app/usage-overview.md). Because we're testing from a single machine, we'll only see data for one user. For a live website, the distribution of users might look like this:
1. For a more complex website with multiple pages, you can use the [**User Flows**](../../azure-monitor/app/usage-flows.md) tool to track the pathway visitors take through the various parts of your website.
112
+
1. For a more complex website with multiple pages, you can use the [**User Flows**](../../azure-monitor/app/usage-flows.md) tool to track the pathway that visitors take through the various parts of your website.
@@ -118,10 +120,10 @@ To learn more advanced configurations for monitoring websites, see the [JavaScri
118
120
If you plan to continue working with additional quickstarts or tutorials, don't clean up the resources created in this quickstart. Otherwise, use the following steps to delete all resources created by this quickstart in the Azure portal.
119
121
120
122
> [!NOTE]
121
-
> If you used an existing resource group, the following instructions won't work. Instead, you can just delete the individual Application Insights resource. Note that when you delete a resource group, all underyling resources that are members of that group are deleted too.
123
+
> If you used an existing resource group, the following instructions won't work. Instead, you can just delete the individual Application Insights resource. Keep in mind that when you delete a resource group, all underyling resources that are members of that group are deleted too.
122
124
123
-
1. In the left menu on the Azure portal, select **Resource groups**, and then select **myResourceGroup** or the name of your temporary resource group.
124
-
1. On your resource group page, select **Delete**, type **myResourceGroup** in the text box, and then select **Delete**.
125
+
1. On the left menu on the Azure portal, select **Resource groups**, and then select **myResourceGroup** or the name of your temporary resource group.
126
+
1. On your resource group page, select **Delete**, enter **myResourceGroup** in the text box, and then select **Delete**.
0 commit comments