Skip to content

Commit f4fb2ac

Browse files
committed
edit pass: website-monitoring
1 parent 6630ca0 commit f4fb2ac

File tree

1 file changed

+26
-28
lines changed

1 file changed

+26
-28
lines changed

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

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ ms.topic: quickstart
55
ms.date: 07/15/2019
66

77
ms.custom: mvc
8-
---
8+
----
99

1010
# Quickstart: Start monitoring your website with Azure Monitor Application Insights
1111

@@ -20,28 +20,26 @@ 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 start viewing this data.
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:
2424

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

2828
> [!NOTE]
29-
>If this is your first time creating an Application Insights resource you can learn more by visiting the [Create an Application Insights Resource](https://docs.microsoft.com/azure/azure-monitor/app/create-new-resource) article.
30-
31-
A configuration box appears; use the following table to fill out the input fields.
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+
1. When the configuration box appears, use the following table to complete the input fields:
3231

3332
| Settings | Value | Description |
3433
| ------------- |:-------------|:-----|
35-
| **Name** | Globally Unique Value | Name that identifies the app you're monitoring |
36-
| **Resource Group** | myResourceGroup | Name for the new resource group to host Application Insights data. You can create a new resource group or use an existing one. |
37-
| **Location** | East US | Choose a location near you, or near where your app is hosted |
38-
39-
3. Click **Create**.
34+
| **Name** | Globally Unique Value | The name that identifies the app you're monitoring. |
35+
| **Resource Group** | myResourceGroup | The name for the new resource group to host Application Insights data. You can create a new resource group or use an existing one. |
36+
| **Location** | East US | Choose a location near you, or near where your app is hosted. |
37+
1. Select **Create**.
4038

4139
## Create an HTML file
4240

43-
1. On your local computer, create a file called ``hello_world.html``. For this example the file will be placed on the root of the C: drive at ``C:\hello_world.html``.
44-
2. Copy 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 the C: drive so that it looks like ``C:\hello_world.html``.
42+
1. Copy and paste the script below into ``hello_world.html``:
4543

4644
```html
4745
<!DOCTYPE html>
@@ -58,11 +56,11 @@ Application Insights can gather telemetry data from any internet-connected appli
5856

5957
## Configure Application Insights SDK
6058

61-
1. Select **Overview** > **Essentials** > Copy your application's **Instrumentation Key**.
59+
1. Select **Overview**, select **Essentials**, and then copy your application's **Instrumentation Key**.
6260

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

65-
2. Add the following script to your ``hello_world.html`` before the closing ``</head>`` tag:
63+
1. Add the following script to your ``hello_world.html`` file before the closing ``</head>`` tag:
6664

6765
```javascript
6866
<script type="text/javascript">
@@ -74,15 +72,15 @@ Application Insights can gather telemetry data from any internet-connected appli
7472
</script>
7573
```
7674

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

79-
4. Open ``hello_world.html`` in a local browser session. This action creates a single pageview. You can refresh your browser to generate multiple test page views.
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.
8078

81-
## Start monitoring in the Azure portal
79+
## Monitor your website in the Azure portal
8280

83-
1. You can now reopen the Application Insights **Overview** page in the Azure portal to view details about 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. Since 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. 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.
8482

85-
2. Click on ![Application Map icon](media/website-monitoring/006.png) **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:
83+
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:
8684

8785
```kusto
8886
// average pageView duration by name
@@ -101,29 +99,29 @@ Application Insights can gather telemetry data from any internet-connected appli
10199

102100
![Analytics graph of user requests over a period of time](./media/website-monitoring/analytics-query.png)
103101

104-
3. Go back to the **Overview** page. Click on **Browser** from under the **Investigate** header, then select **Performance** Here you find metrics related to the performance of your website. There's also a corresponding view for analyzing failures and exceptions in your website. You can click **Samples** to drill into individual transaction details. From here, you can access the [end-to-end transaction details](../../azure-monitor/app/transaction-diagnostics.md) experience.
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).
105103

106104
![Server metrics graph](./media/website-monitoring/browser-performance.png)
107105

108-
4. To begin exploring the [user behavior analytics tools](../../azure-monitor/app/usage-overview.md), from the main Application Insights menu select [**Users**](../../azure-monitor/app/usage-segmentation.md) under the **Usage** header. Since 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 as follows:
106+
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:
109107

110108
![User graph](./media/website-monitoring/usage-users.png)
111109

112-
5. If we had instrumented a more complex website with multiple pages, another useful tool is [**User Flows**](../../azure-monitor/app/usage-flows.md). With **User Flows** you can track the pathway visitors takes through the various parts of your website.
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.
113111

114112
![User Flows visualization](./media/website-monitoring/user-flows.png)
115113

116-
To learn more advanced configurations for monitoring websites, check out the [JavaScript SDK API reference](https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md).
114+
To learn more advanced configurations for monitoring websites, see the [JavaScript SDK API reference](https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md).
117115

118116
## Clean up resources
119117

120-
If you plan to continue on to work with additional quickstarts or with the tutorials, don't clean up the resources created in this quickstart. Otherwise, if you don't plan to continue, use the following steps to delete all resources created by this quickstart in the Azure portal.
118+
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.
121119

122120
> [!NOTE]
123-
> If you used an existing resource group the instructions below will not work and you will need to just delete the individual Application Insights resource. Keep in mind anytime you delete a resource group all underyling resources that are members of that group will be deleted.
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.
124122

125-
1. In the left menu in the Azure portal, click **Resource groups**, and then click **myResourceGroup** or the name of your temporary resource group.
126-
2. On your resource group page, click **Delete**, type **myResourceGroup** in the text box, and then click **Delete**.
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**.
127125

128126
## Next steps
129127

0 commit comments

Comments
 (0)