Skip to content

Commit c2eb44c

Browse files
committed
edit pass: website-monitoring
1 parent 31b58d7 commit c2eb44c

File tree

1 file changed

+16
-14
lines changed

1 file changed

+16
-14
lines changed

articles/azure-monitor/app/website-monitoring.md

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: 'Quickstart: Monitor websites with Azure Monitor Application Insights'
3-
description: Provides quickstart instructions setup client/browser-side website monitoring with Azure Monitor Application Insights
3+
description: In this quickstart, learn how to set up client/browser-side website monitoring with Azure Monitor Application Insights.
44
ms.topic: quickstart
55
ms.date: 07/15/2019
66

@@ -20,13 +20,13 @@ With Azure Monitor Application Insights, you can easily monitor your website for
2020

2121
## Enable Application Insights
2222

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:
2424

2525
1. Sign in to the [Azure portal](https://portal.azure.com/).
2626
1. Select **Create a resource** > **Management tools** > **Application Insights**.
2727

2828
> [!NOTE]
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).
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).
3030
1. When the configuration box appears, use the following table to complete the input fields:
3131

3232
| Settings | Value | Description |
@@ -38,8 +38,8 @@ Application Insights can gather telemetry data from any internet-connected appli
3838

3939
## Create an HTML file
4040

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``:
4343

4444
```html
4545
<!DOCTYPE html>
@@ -49,14 +49,14 @@ Application Insights can gather telemetry data from any internet-connected appli
4949
</head>
5050
<body>
5151
<h1>Azure Monitor Application Insights Hello World!</h1>
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 <a href="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 <a href="https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md" title="API Reference">API reference</a>.</p>
5353
</body>
5454
</html>
5555
```
5656

5757
## Configure Application Insights SDK
5858

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**.
6060

6161
![New Application Insights resource form](media/website-monitoring/instrumentation-key-001.png)
6262

@@ -72,13 +72,15 @@ Application Insights can gather telemetry data from any internet-connected appli
7272
</script>
7373
```
7474

75-
1. Edit ``hello_world.html``, and then add your instrumentation key.
75+
1. Edit ``hello_world.html`` and add your instrumentation key.
7676

7777
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.
7878

7979
## Monitor your website in the Azure portal
8080

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.
8284

8385
1. Select **Analytics** ![Application Map icon](media/website-monitoring/006.png). 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:
8486

@@ -99,15 +101,15 @@ Application Insights can gather telemetry data from any internet-connected appli
99101
100102
![Analytics graph of user requests over a period of time](./media/website-monitoring/analytics-query.png)
101103
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).
103105
104106
![Server metrics graph](./media/website-monitoring/browser-performance.png)
105107
106108
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:
107109
108110
![User graph](./media/website-monitoring/usage-users.png)
109111
110-
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.
111113
112114
![User Flows visualization](./media/website-monitoring/user-flows.png)
113115
@@ -118,10 +120,10 @@ To learn more advanced configurations for monitoring websites, see the [JavaScri
118120
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.
119121
120122
> [!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.
122124
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**.
125127
126128
## Next steps
127129

0 commit comments

Comments
 (0)