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
The telemetry is available in the `customEvents` table on the [Application Insights Logs tab](../logs/log-query-overview.md) or [usage experience](usage-overview.md). Events might come from `trackEvent(..)` or the [Click Analytics Auto-collection plug-in](javascript-click-analytics-plugin.md).
149
+
The telemetry is available in the `customEvents` table on the [Application Insights Logs tab](../logs/log-query-overview.md) or [usage experience](usage-overview.md). Events might come from `trackEvent(..)` or the [Click Analytics Auto-collection plug-in](javascript-feature-extensions.md).
150
150
151
151
If [sampling](./sampling.md) is in operation, the `itemCount` property shows a value greater than `1`. For example, `itemCount==10` means that of 10 calls to `trackEvent()`, the sampling process transmitted only one of them. To get a correct count of custom events, use code such as `customEvents | summarize sum(itemCount)`.
Copy file name to clipboardExpand all lines: articles/azure-monitor/app/app-insights-overview.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,7 +20,7 @@ Application Insights provides other features including, but not limited to:
20
20
21
21
-[Live Metrics](live-stream.md) – observe activity from your deployed application in real time with no effect on the host environment
22
22
-[Availability](availability-overview.md) – also known as “Synthetic Transaction Monitoring”, probe your applications external endpoint(s) to test the overall availability and responsiveness over time
23
-
-[GitHub or Azure DevOps integration](work-item-integration.md) – create [GitHub](/training/paths/github-administration-products/) or [Azure DevOps](/azure/devops/?view=azure-devops) work items in context of Application Insights data
23
+
-[GitHub or Azure DevOps integration](work-item-integration.md) – create [GitHub](/training/paths/github-administration-products/) or [Azure DevOps](/azure/devops/) work items in context of Application Insights data
24
24
-[Usage](usage-overview.md) – understand which features are popular with users and how users interact and use your application
25
25
-[Smart Detection](proactive-diagnostics.md) – automatic failure and anomaly detection through proactive telemetry analysis
26
26
@@ -129,9 +129,9 @@ Supported platforms and frameworks are listed here.
Copy file name to clipboardExpand all lines: articles/azure-monitor/app/javascript-feature-extensions.md
+22-21Lines changed: 22 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,19 @@
1
1
---
2
-
title: Click Analytics Auto-collection plugin for Application Insights JavaScript SDK
3
-
description: How to install and use Click Analytics Auto-collection plugin for Application Insights JavaScript SDK.
2
+
title: Feature extensions for Application Insights JavaScript SDK (Click Analytics)
3
+
description: Learn how to install and use JavaScript feature extensions (Click Analytics) for Application Insights JavaScript SDK.
4
4
services: azure-monitor
5
-
ms.workload: tbd
6
5
ms.tgt_pltfrm: ibiza
7
6
ms.topic: conceptual
8
-
ms.date: 01/14/2021
7
+
ms.date: 02/13/2023
9
8
ms.devlang: javascript
10
9
ms.reviewer: mmcc
11
10
---
12
11
13
-
# Click Analytics Auto-collection plugin for Application Insights JavaScript SDK
12
+
# Feature extensions for Application Insights JavaScript SDK (Click Analytics)
14
13
15
-
This plugin automatically tracks click events on web pages and uses data-* attributes on HTML elements to populate event telemetry.
14
+
App Insights JavaScript SDK feature extensions are extra features that can be added to the Application Insights JavaScript SDK to enhance its functionality.
15
+
16
+
In this article, we cover the Click Analytics plugin that automatically tracks click events on web pages and uses data-* attributes on HTML elements to populate event telemetry.
1. Telemetry data generated from the click events are stored as `customEvents` in the Application Insights section of the Azure portal.
89
90
2. The `name` of the customEvent is populated based on the following rules:
90
-
1. The `id` provided in the `data-*-id`will be used as the customEvent name. For example, if the clicked HTML element has the attribute "data-sample-id"="button1", then "button1" will be the customEvent name.
91
-
2. If no such attribute exists and if the `useDefaultContentNameOrId` is set to `true` in the configuration, then the clicked element's HTML attribute `id` or content name of the element will be used as the customEvent name. If both `id` and content name are present, precedence is given to `id`.
92
-
3. If `useDefaultContentNameOrId` is false, then the customEvent name will be "not_specified".
91
+
1. The `id` provided in the `data-*-id`is used as the customEvent name. For example, if the clicked HTML element has the attribute "data-sample-id"="button1", then "button1" is the customEvent name.
92
+
2. If no such attribute exists and if the `useDefaultContentNameOrId` is set to `true` in the configuration, then the clicked element's HTML attribute `id` or content name of the element is used as the customEvent name. If both `id` and content name are present, precedence is given to `id`.
93
+
3. If `useDefaultContentNameOrId` is false, then the customEvent name is "not_specified".
93
94
94
95
> [!TIP]
95
-
> Our recommendations is to set`useDefaultContentNameOrId` to true for generating meaningful data.
96
+
> We recommend settings`useDefaultContentNameOrId` to true for generating meaningful data.
96
97
3.`parentDataTag` does two things:
97
-
1. If this tag is present, the plugin will fetch the `data-*` attributes and values from all the parent HTML elements of the clicked element.
98
-
2. To improve efficiency, the plugin uses this tag as a flag, when encountered it will stop itself from further processing the DOM (Document Object Model) upwards.
98
+
1. If this tag is present, the plugin fetches the `data-*` attributes and values from all the parent HTML elements of the clicked element.
99
+
2. To improve efficiency, the plugin uses this tag as a flag, when encountered it stops itself from further processing the DOM (Document Object Model) upwards.
99
100
100
101
> [!CAUTION]
101
102
> Once `parentDataTag` is used, the SDK will begin looking for parent tags across your entire application and not just the HTML element where you used it.
102
-
4.`customDataPrefix` provided by the user should always start with `data-`, for example `data-sample-`. In HTML, the `data-*` global attributes are called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts. Older browsers (Internet Explorer, Safari) will drop attributes that it doesn't understand, unless they start with `data-`.
103
+
4.`customDataPrefix` provided by the user should always start with `data-`, for example `data-sample-`. In HTML, the `data-*` global attributes are called custom data attributes that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts. Older browsers (Internet Explorer, Safari) drop attributes that it doesn't understand, unless they start with `data-`.
103
104
104
105
The `*` in `data-*` may be replaced by any name following the [production rule of XML names](https://www.w3.org/TR/REC-xml/#NT-Name) with the following restrictions:
105
106
- The name must not start with "xml", whatever case is used for these letters.
@@ -123,7 +124,7 @@ The following are some of the key properties captured by default when the plugin
123
124
| actionType | Action type that caused the click event. Can be left or right click. | CL |
124
125
| baseTypeSource | Base Type source of the custom event. | ClickEvent |
125
126
| clickCoordinates | Coordinates where the click event is triggered. | 659X47 |
126
-
| content | Placeholder to store additional`data-*` attributes and values. |[{sample1:value1, sample2:value2}]|
127
+
| content | Placeholder to store extra`data-*` attributes and values. |[{sample1:value1, sample2:value2}]|
127
128
| pageName | Title of the page where the click event is triggered. | Sample Title |
128
129
| parentId | ID or name of the parent element | navbarContainer |
129
130
@@ -143,8 +144,8 @@ The following are some of the key properties captured by default when the plugin
143
144
| urlCollectHash | Boolean | False | Enables the logging of values after a "#" character of the URL. |
144
145
| urlCollectQuery | Boolean | False | Enables the logging of the query string of the URL. |
145
146
| behaviorValidator | Function | Null | Callback function to use for the `data-*-bhvr` value validation. For more information, go to [behaviorValidator section](#behaviorvalidator).|
146
-
| defaultRightClickBhvr | String (or) number | '' | Default Behavior value when Right Click event has occurred. This value will be overridden if the element has the `data-*-bhvr` attribute. |
147
-
| dropInvalidEvents | Boolean | False | Flag to drop events that do not have useful click data. |
147
+
| defaultRightClickBhvr | String (or) number | '' | Default Behavior value when Right Click event has occurred. This value is overridden if the element has the `data-*-bhvr` attribute. |
148
+
| dropInvalidEvents | Boolean | False | Flag to drop events that don't have useful click data. |
148
149
149
150
### IValueCallback
150
151
@@ -158,17 +159,17 @@ The following are some of the key properties captured by default when the plugin
158
159
159
160
| Name | Type | Default | Default Tag to Use in HTML | Description |
| useDefaultContentNameOrId | Boolean | False | N/A |Collects standard HTML attribute for contentName when a particular element is not tagged with default customDataPrefix or when customDataPrefix is not provided by user. |
162
+
| useDefaultContentNameOrId | Boolean | False | N/A |Collects standard HTML attribute for contentName when a particular element isn't tagged with default customDataPrefix or when customDataPrefix isn't provided by user. |
162
163
| customDataPrefix | String |`data-`|`data-*`| Automatic capture content name and value of elements that are tagged with provided prefix. For example, `data-*-id`, `data-<yourcustomattribute>` can be used in the HTML tags. |
163
164
| aiBlobAttributeTag | String |`ai-blob`|`data-ai-blob`| Plugin supports a JSON blob attribute instead of individual `data-*` attributes. |
164
165
| metaDataPrefix | String | Null | N/A | Automatic capture HTML Head's meta element name and content with provided prefix when capture. For example, `custom-` can be used in the HTML meta tag. |
165
-
| captureAllMetaDataContent | Boolean | False | N/A | Automatic capture all HTML Head's meta element names and content. Default is false. If enabled this will override provided metaDataPrefix. |
166
+
| captureAllMetaDataContent | Boolean | False | N/A | Automatic capture all HTML Head's meta element names and content. Default is false. If enabled it overrides provided metaDataPrefix. |
166
167
| parentDataTag | String | Null | N/A | Stops traversing up the DOM to capture content name and value of elements when encountered with this tag. For example, `data-<yourparentDataTag>` can be used in the HTML tags.|
167
-
| dntDataTag | String |`ai-dnt`|`data-ai-dnt`| HTML elements with this attribute will be ignored by the plugin for capturing telemetry data.|
168
+
| dntDataTag | String |`ai-dnt`|`data-ai-dnt`| HTML elements with this attribute are ignored by the plugin for capturing telemetry data.|
168
169
169
170
### behaviorValidator
170
171
171
-
The behaviorValidator functions automatically checks that tagged behaviors in code conform to a pre-defined list. This ensures tagged behaviors are consistent with your enterprise's established taxonomy. It is not required or expected that most Azure Monitor customers will use these functions, but they're available for advanced scenarios. There are three different behaviorValidator callback functions exposed as part of this extension. However, users can use their own callback functions if the exposed functions do not solve your requirement. The intent is to bring your own behaviors data structure, the plugin uses this validator function while extracting the behaviors from the data tags.
172
+
The behaviorValidator functions automatically check that tagged behaviors in code conform to a pre-defined list. It ensures tagged behaviors are consistent with your enterprise's established taxonomy. It isn't required or expected that most Azure Monitor customers use these functions, but they're available for advanced scenarios. There are three different behaviorValidator callback functions exposed as part of this extension. However, users can use their own callback functions if the exposed functions don't solve your requirement. The intent is to bring your own behaviors data structure, the plugin uses this validator function while extracting the behaviors from the data tags.
Correlation generates and sends data that enables distributed tracing and powers the [application map](../app/app-map.md), [end-to-end transaction view](../app/app-map.md#go-to-details), and other diagnostic tools.
367
368
368
-
In JavaScript correlation is turned off by default in order to minimize the telemetry we send by default. To enable correlation please reference [JavaScript client-side correlation documentation](./javascript.md#enable-distributed-tracing).
369
+
JavaScript correlation is turned off by default in order to minimize the telemetry we send by default. To enable correlation, reference [JavaScript client-side correlation documentation](./javascript.md#enable-distributed-tracing).
0 commit comments