你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

启用 Click Analytics 自动收集插件

项目
10/15/2024

Application Insights JavaScript SDK 功能扩展是附加功能，可以添加到 Application Insights JavaScript SDK 以增强其功能。

本文介绍了“点击分析”插件，该插件可自动跟踪网页上的点击事件，并使用 HTML 元素上的 data-* 属性或自定义标记来填充事件遥测数据。

先决条件

请在启用 Click Analytics 插件之前安装 JavaScript SDK。

插件会收集哪些数据？

以下是启用插件后默认捕获的关键属性。

自定义事件属性

名称	描述	示例
名称	自定义事件的名称。若要详细了解如何填充名称，请查看 Name 列。	关于
itemType	事件类型。	customEvent
sdkVersion	Application Insights SDK 的版本以及点击插件。	JavaScript：2_ClickPlugin2

自定义维度

名称	描述	示例
actionType	导致 click 事件的操作类型。可以是左击或右击。	CL
baseTypeSource	自定义事件的基类型源。	ClickEvent
clickCoordinates	触发 click 事件的坐标。	659X47
内容	用于存储其他 `data-*` 属性和值的占位符。	[{sample1:value1, sample2:value2}]
pageName	触发 click 事件的页面的标题。	标题示例
parentId	父元素的 ID 或名称若要详细了解如何填充 parentId，请查看 parentId 键。	navbarContainer

自定义度量值

名称	描述	示例
timeToAction	自初始页面加载以来用户点击元素花费的时间（毫秒）。	87407

添加 Click Analytics 插件

用户可以通过 JavaScript (Web) SDK 加载程序脚本或 npm 设置 Click Analytics 自动收集插件，然后选择性地添加框架扩展。

注意

对检测密钥引入的支持将于 2025 年 3 月 31 日结束。检测密钥引入功能将会继续工作，但我们将不再为该功能提供更新或支持。转换为连接字符串，以利用新功能。

将 JavaScript (Web) SDK 加载程序脚本粘贴到每个要为其启用 Application Insights 的页面的顶部。

<script type="text/javascript" src="https://js.monitor.azure.com/scripts/b/ext/ai.clck.2.min.js"></script>
<script type="text/javascript">
var clickPluginInstance = new Microsoft.ApplicationInsights.ClickAnalyticsPlugin();
  // Click Analytics configuration
var clickPluginConfig = {
    autoCapture : true,
    dataTags: {
        useDefaultContentNameOrId: true
    }
}
// Application Insights configuration
var configObj = {
    connectionString: "YOUR_CONNECTION_STRING",
    // Alternatively, you can pass in the instrumentation key,
    // but support for instrumentation key ingestion will end on March 31, 2025.
    // instrumentationKey: "YOUR INSTRUMENTATION KEY",
    extensions: [
        clickPluginInstance
    ],
    extensionConfig: {
        [clickPluginInstance.identifier] : clickPluginConfig
    },
};
// Application Insights JavaScript (Web) SDK Loader Script code
!(function (cfg){function e(){cfg.onInit&&cfg.onInit(n)}var x,w,D,t,E,n,C=window,O=document,b=C.location,q="script",I="ingestionendpoint",L="disableExceptionTracking",j="ai.device.";"instrumentationKey"[x="toLowerCase"](),w="crossOrigin",D="POST",t="appInsightsSDK",E=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=E),n=C[E]||function(g){var f=!1,m=!1,h={initialize:!0,queue:[],sv:"8",version:2,config:g};function v(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[j+"id"]=i[x](),n[j+"type"]=i,n["ai.operation.name"]=b&&b.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(h.sv||h.version),{time:(i=new Date).getUTCFullYear()+"-"+a(1+i.getUTCMonth())+"-"+a(i.getUTCDate())+"T"+a(i.getUTCHours())+":"+a(i.getUTCMinutes())+":"+a(i.getUTCSeconds())+"."+(i.getUTCMilliseconds()/1e3).toFixed(3).slice(2,5)+"Z",iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}},ver:undefined,seq:"1",aiDataContract:undefined}}var n,i,t,a,y=-1,T=0,S=["js.monitor.azure.com","js.cdn.applicationinsights.io","js.cdn.monitor.azure.com","js0.cdn.applicationinsights.io","js0.cdn.monitor.azure.com","js2.cdn.applicationinsights.io","js2.cdn.monitor.azure.com","az416426.vo.msecnd.net"],o=g.url||cfg.src,r=function(){return s(o,null)};function s(d,t){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~d.indexOf("ai.3")&&(d=d.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<S.length;e++)if(0<d.indexOf(S[e])){y=e;break}var n,i=function(e){var a,t,n,i,o,r,s,c,u,l;h.queue=[],m||(0<=y&&T+1<S.length?(a=(y+T+1)%S.length,p(d.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+S[a]+i})),T+=1):(f=m=!0,s=d,!0!==cfg.dle&&(c=(t=function(){var e,t={},n=g.connectionString;if(n)for(var i=n.split(";"),a=0;a<i.length;a++){var o=i[a].split("=");2===o.length&&(t[o[0][x]()]=o[1])}return t[I]||(e=(n=t.endpointsuffix)?t.location:null,t[I]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||g.instrumentationKey||"",t=(t=(t=t[I])&&"/"===t.slice(-1)?t.slice(0,-1):t)?t+"/v2/track":g.endpointUrl,t=g.userOverrideEndpointUrl||t,(n=[]).push((i="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",o=s,u=t,(l=(r=v(c,"Exception")).data).baseType="ExceptionData",l.baseData.exceptions=[{typeName:"SDKLoadFailed",message:i.replace(/\./g,"-"),hasFullStack:!1,stack:i+"\nSnippet failed to load ["+o+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(b&&b.pathname||"_unknown_")+"\nEndpoint: "+u,parsedStack:[]}],r)),n.push((l=s,i=t,(u=(o=v(c,"Message")).data).baseType="MessageData",(r=u.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+l+")").replace(/\"/g,"")+'"',r.properties={endpoint:i},o)),s=n,c=t,JSON&&((u=C.fetch)&&!cfg.useXhr?u(c,{method:D,body:JSON.stringify(s),mode:"cors"}):XMLHttpRequest&&((l=new XMLHttpRequest).open(D,c),l.setRequestHeader("Content-type","application/json"),l.send(JSON.stringify(s)))))))},a=function(e,t){m||setTimeout(function(){!t&&h.core||i()},500),f=!1},p=function(e){var n=O.createElement(q),e=(n.src=e,t&&(n.integrity=t),n.setAttribute("data-ai-name",E),cfg[w]);return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=a,n.onerror=i,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||a(0,t)},cfg.ld&&cfg.ld<0?O.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){O.getElementsByTagName(q)[0].parentNode.appendChild(n)},cfg.ld||0),n};p(d)}cfg.sri&&(n=o.match(/^((http[s]?:\/\/.*\/)\w+(\.\d+){1,5})\.(([\w]+\.){0,2}js)$/))&&6===n.length?(d="".concat(n[1],".integrity.json"),i="@".concat(n[4]),l=window.fetch,t=function(e){if(!e.ext||!e.ext[i]||!e.ext[i].file)throw Error("Error Loading JSON response");var t=e.ext[i].integrity||null;s(o=n[2]+e.ext[i].file,t)},l&&!cfg.useXhr?l(d,{method:"GET",mode:"cors"}).then(function(e){return e.json()["catch"](function(){return{}})}).then(t)["catch"](r):XMLHttpRequest&&((a=new XMLHttpRequest).open("GET",d),a.onreadystatechange=function(){if(a.readyState===XMLHttpRequest.DONE)if(200===a.status)try{t(JSON.parse(a.responseText))}catch(e){r()}else r()},a.send())):o&&r();try{h.cookie=O.cookie}catch(k){}function e(e){for(;e.length;)!function(t){h[t]=function(){var e=arguments;f||h.queue.push(function(){h[t].apply(h,e)})}}(e.pop())}var c,u,l="track",d="TrackPage",p="TrackEvent",l=(e([l+"Event",l+"PageView",l+"Exception",l+"Trace",l+"DependencyData",l+"Metric",l+"PageViewPerformance","start"+d,"stop"+d,"start"+p,"stop"+p,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),h.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(g.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==g[L]&&!0!==l[L]&&(e(["_"+(c="onerror")]),u=C[c],C[c]=function(e,t,n,i,a){var o=u&&u(e,t,n,i,a);return!0!==o&&h["_"+c]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},g.autoExceptionInstrumented=!0),h}(cfg.cfg),(C[E]=n).queue&&0===n.queue.length?(n.queue.push(e),n.trackPageView({})):e();})({                
  src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
  crossOrigin: "anonymous",
  // sri: false, // Custom optional value to specify whether fetching the snippet from integrity file and do integrity check
  cfg: configObj // configObj is defined above.
});
</script>

若要添加或更新 JavaScript (Web) SDK 加载程序脚本配置，请参阅 JavaScript (Web) SDK 加载程序脚本配置。

安装 npm 包：

npm install --save @microsoft/applicationinsights-clickanalytics-js @microsoft/applicationinsights-web


import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js';

const clickPluginInstance = new ClickAnalyticsPlugin();
// Click Analytics configuration
const clickPluginConfig = {
  autoCapture: true
};
// Application Insights Configuration
const configObj = {
  connectionString: "YOUR_CONNECTION_STRING", 
  // Alternatively, you can pass in the instrumentation key,
  // but support for instrumentation key ingestion will end on March 31, 2025.  
  // instrumentationKey: "YOUR INSTRUMENTATION KEY",
  extensions: [clickPluginInstance],
  extensionConfig: {
    [clickPluginInstance.identifier]: clickPluginConfig
  },
};

const appInsights = new ApplicationInsights({ config: configObj });
appInsights.loadAppInsights();

提示

如果要添加框架扩展或已添加框架扩展，请参阅 React、React Native 和 Angular 代码示例，了解如何添加 Click Analytics 插件。

（可选）设置经过身份验证的用户上下文

若要设置此可选设置，请参阅设置经过身份验证的用户上下文。

如果将 HEART 工作簿与 Click Analytics 插件一起使用，则无需设置经过身份验证的用户上下文来查看遥测数据。有关详细信息，请参阅 HEART 工作簿文档。

使用插件

下面各部分描述了如何使用该插件。

遥测数据存储

从点击事件生成的遥测数据将作为 customEvents 存储在 Azure 门户 >“Application Insights”>“日志”部分。

`name`

根据以下规则填充 customEvent 的 name 列：

如果未在高级配置中声明 customDataPrefix，data-id 中提供的 id 将用作 customEvent 名称。
如果声明了 customDataPrefix，则 data-*-id 中提供的 id（这意味着它必须以 data 开头且以 id 结尾）用作 customEvent 名称。例如，如果点击的 HTML 元素具有属性 "data-sample-id"="button1"，则 "button1" 是customEvent 名称。
如果 data-id 或 data-*-id 属性不存在并且 useDefaultContentNameOrId 设置为 true，则所点击元素的 HTML 属性 id 或该元素的内容名称会用作 customEvent 名称。如果 id 和内容名称都存在，优先考虑 id。
如果 useDefaultContentNameOrId 为 false，则 customEvent 名称为 "not_specified"。建议将 useDefaultContentNameOrId 设置为 true 以生成有意义的数据。

`contentName`

如果在高级配置中定义了 contentName 回调函数，则会根据以下规则填充 customEvent 的 contentName 列：

对于所点击的 HTML <a> 元素，插件会尝试收集其 innerText（文本）属性的值。如果插件找不到此属性，它会尝试收集其 innerHtml 属性的值。
对于所点击的 HTML <img> 或 <area> 元素，插件会尝试收集其 alt 属性的值。
对于所有其他点击的 HTML 元素，将根据以下规则填充 contentName，这些规则按优先级顺序列出：
1. 元素的 value 属性的值
2. 元素的 name 属性的值
3. 元素的 alt 属性的值
4. 元素的 innerText 属性的值
5. 元素的 id 属性的值

`parentId` 键

若要在日志中 customEvent 的 customDimensions 中填充 parentId 键，请声明 parentDataTag 标记或定义 data-parentid 属性。

根据以下规则提取 parentId 的值：

声明 parentDataTag 时，该插件会提取在最靠近点击元素的元素中定义的 id 或 data-*-id 的值作为 parentId。
如果同时定义了 data-*-id 和 id，优先采用 data-*-id。
如果定义了 parentDataTag，但插件在 DOM 树下找不到此标记，那么插件使用在最靠近点击元素的元素中定义的 id 或 data-*-id 作为 parentId。不过，建议定义 data-{parentDataTag} 或 customDataPrefix-{parentDataTag} 属性来减少查找 parentId 所需的循环数。需要将插件与自定义选项配合使用时，声明 parentDataTag 非常有用。
如果未定义 parentDataTag，并且当前元素中未包含 parentId 信息，则不会收集任何 parentId 值。
如果定义了 parentDataTag，useDefaultContentNameOrId 设置为 false，并且仅在最靠近点击元素的元素中定义了 id 属性，则 parentId 填充为 "not_specified"。若要提取 id 的值，请将 useDefaultContentNameOrId 设置为 true。

定义 data-parentid 或 data-*-parentid 属性时，插件会提取此属性最靠近点击元素的实例（若适用，则包含点击元素中的实例）。

如果声明 parentDataTag，并定义 data-parentid 或 data-*-parentid 属性，则优先采用 data-parentid 或 data-*-parentid。

如果出现“没有 parentId 值的点击事件行”遥测警告，请参阅修复“没有 parentId 值的点击事件行”警告。

有关针对不同配置提取哪个值作为 parentId 的示例，请查看 parentid 键的示例。

注意

一旦 parentDataTag 包含在应用程序的任何 HTML 元素中，SDK 就会开始在整个应用程序中查找父级标记，而不仅仅是使用它的 HTML 元素。
如果将 HEART 工作簿与“点击分析”插件一起使用，那么对于要记录或检测的 HEART 事件，必须在最终用户应用程序的所有其他部分中声明标记 parentDataTag。

`customDataPrefix`

高级配置中的 customDataPrefix 选项让用户能够配置数据属性前缀，来帮助确定 HEART 在个人代码库中的位置。前缀必须始终为小写，以 data- 开头。例如：

data-heart-
data-team-name-
data-example-

在 HTML 中，data-* 全局属性允许通过脚本在 HTML 及其 DOM 表示形式之间交换专有信息，称为“自定义数据属性”。旧版浏览器（例如 Internet Explorer 和 Safari）会删除不理解的属性，除非属性以 data- 开头。

可以将 data-* 中的星号(*)替换为遵循 XML 名称生成规则的任意名称，但有以下限制。

无论字母使用大写还是小写，名称都不能以 "xml" 开头。
名称不能包含任何分号(U+003A)。
名称不能包含大写字母。

添加高级配置

名称	类型	默认	说明
autoCapture	布尔	True	自动捕获配置。
回调 (callback)	IValueCallback	Null	回调配置。
pageTags	Object	Null	页标记。
dataTags	ICustomDataTags	Null	提供的自定义数据标记用于替代捕获单击数据的默认标记。
urlCollectHash	布尔	False	启用 URL中“#”字符后的值的日志记录。
urlCollectQuery	布尔	False	启用 URL 查询字符串的日志记录。
behaviorValidator	功能	Null	用于验证 `data-*-bhvr` 值的回调函数。有关详细信息，请参阅 behaviorValidator 部分。
defaultRightClickBhvr	字符串或数字	''	发生“右击”事件时的默认行为值。如果元素具有 `data-*-bhvr` 属性，则将替代此值。
dropInvalidEvents	布尔	False	用于删除无有用单击数据的事件的标志。

IValueCallback

名称	类型	默认	说明
pageName	功能	Null	用于替代默认 `pageName` 捕获行为的函数。
pageActionPageTags	功能	Null	用于增加 `pageAction` 事件期间收集的默认 `pageTags` 的回调函数。
contentName	功能	Null	用于填充自定义 `contentName` 的回调函数。

ICustomDataTags

名称	类型	默认	要在 HTML 中使用的默认标记	说明
useDefaultContentNameOrId	布尔	False	空值	如果为 `true`，则当特定元素未使用默认数据前缀或 `customDataPrefix` 进行标记时，会收集 `contentName` 的标准 HTML 属性 `id`。否则，不会收集 `contentName` 的标准 HTML 属性 `id`。
customDataPrefix	字符串	`data-`	`data-*`	自动捕获使用所提供的前缀标记的元素的内容名称和值。例如，可以在 HTML 标记中使用 `data-*-id`、`data-<yourcustomattribute>`。
aiBlobAttributeTag	字符串	`ai-blob`	`data-ai-blob`	插件支持 JSON blob 属性（而非单个 `data-*` 属性）。
metaDataPrefix	字符串	Null	不适用	捕获时，自动捕获 HTML 标头的 meta 元素名称和带有提供的前缀的内容。例如，可以在 HTML meta 标记中使用 `custom-`。
captureAllMetaDataContent	布尔	False	空值	自动捕获所有 HTML 标头的 meta 元素名称和内容。默认值为 false。如果启用，它会替代提供的 `metaDataPrefix`。
parentDataTag	字符串	Null	不适用	如果没有遇到 `data-parentid` 或 `data-*-parentid`，会在日志中提取 `parentId`。为了提高效率，在遇到 `data-{parentDataTag}` 或 `customDataPrefix-{parentDataTag}` 属性时，会停止遍历 DOM，不再捕获元素的内容名称和值。有关详细信息，请查看 parentId 键。
dntDataTag	字符串	`ai-dnt`	`data-ai-dnt`	用于捕获遥测数据的插件会忽略具有此属性的 HTML 元素。

behaviorValidator

behaviorValidator 函数自动检查代码中标记的行为是否符合预定义列表。这些函数可确保标记的行为与企业建立的分类一致。大多数 Azure Monitor 客户不需要使用，预计也不会使用这些函数，但它们可以用于高级场景。 behaviorValidator 函数可帮助实现更容易访问的做法。

行为显示在 CustomEvents 表的 customDimensions 字段中。

回调函数

三个不同的 behaviorValidator 回调函数作为此扩展的一部分公开。如果公开的函数不能满足需求，也可以使用自己的回调函数。目的是自带行为的数据结构。插件在从数据标记中提取行为时使用此验证器函数。

名称	说明
BehaviorValueValidator	如果行为的数据结构是字符串数组，请使用此回调函数。
BehaviorMapValidator	如果行为的数据结构是字典，请使用此回调函数。
BehaviorEnumValidator	如果行为的数据结构是枚举，请使用此回调函数。

传入字符串与数值

要减少传递的字节数，请传入数值而不是全文字符串。如果成本不是问题，可以传入完整的文本字符串（例如，NAVIGATIONBACK）。

behaviorValidator 的示例用法

下面是行为映射验证程序可能的外观示例。你的程序可能看起来有所不同，具体取决于组织的分类和收集的事件。

var clickPlugin = Microsoft.ApplicationInsights.ClickAnalyticsPlugin;
var clickPluginInstance = new clickPlugin();

// Behavior enum values
var behaviorMap = {
  UNDEFINED: 0, // default, Undefined

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Page Experience [1-19]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  NAVIGATIONBACK: 1, // Advancing to the previous index position within a webpage
  NAVIGATION: 2, // Advancing to a specific index position within a webpage
  NAVIGATIONFORWARD: 3, // Advancing to the next index position within a webpage
  APPLY: 4, // Applying filter(s) or making selections
  REMOVE: 5, // Applying filter(s) or removing selections
  SORT: 6, // Sorting content
  EXPAND: 7, // Expanding content or content container
  REDUCE: 8, // Sorting content
  CONTEXTMENU: 9, // Context menu
  TAB: 10, // Tab control
  COPY: 11, // Copy the contents of a page
  EXPERIMENTATION: 12, // Used to identify a third-party experimentation event
  PRINT: 13, // User printed page
  SHOW: 14, // Displaying an overlay
  HIDE: 15, // Hiding an overlay
  MAXIMIZE: 16, // Maximizing an overlay
  MINIMIZE: 17, // Minimizing an overlay
  BACKBUTTON: 18, // Clicking the back button

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Scenario Process [20-39]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  STARTPROCESS: 20, // Initiate a web process unique to adopter
  PROCESSCHECKPOINT: 21, // Represents a checkpoint in a web process unique to adopter
  COMPLETEPROCESS: 22, // Page Actions that complete a web process unique to adopter
  SCENARIOCANCEL: 23, // Actions resulting from cancelling a process/scenario

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Download [40-59]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  DOWNLOADCOMMIT: 40, // Initiating an unmeasurable off-network download
  DOWNLOAD: 41, // Initiating a download

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Search [60-79]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  SEARCHAUTOCOMPLETE: 60, // Auto-completing a search query during user input
  SEARCH: 61, // Submitting a search query
  SEARCHINITIATE: 62, // Initiating a search query
  TEXTBOXINPUT: 63, // Typing or entering text in the text box

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Commerce [80-99]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  VIEWCART: 82, // Viewing the cart
  ADDWISHLIST: 83, // Adding a physical or digital good or services to a wishlist
  FINDSTORE: 84, // Finding a physical store
  CHECKOUT: 85, // Before you fill in credit card info
  REMOVEFROMCART: 86, // Remove an item from the cart
  PURCHASECOMPLETE: 87, // Used to track the pageView event that happens when the CongratsPage or Thank You page loads after a successful purchase
  VIEWCHECKOUTPAGE: 88, // View the checkout page
  VIEWCARTPAGE: 89, // View the cart page
  VIEWPDP: 90, // View a PDP
  UPDATEITEMQUANTITY: 91, // Update an item's quantity
  INTENTTOBUY: 92, // User has the intent to buy an item
  PUSHTOINSTALL: 93, // User has selected the push to install option

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Authentication [100-119]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  SIGNIN: 100, // User sign-in
  SIGNOUT: 101, // User sign-out

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Social [120-139]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  SOCIALSHARE: 120, // "Sharing" content for a specific social channel
  SOCIALLIKE: 121, // "Liking" content for a specific social channel
  SOCIALREPLY: 122, // "Replying" content for a specific social channel
  CALL: 123, // Click on a "call" link
  EMAIL: 124, // Click on an "email" link
  COMMUNITY: 125, // Click on a "community" link

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Feedback [140-159]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  VOTE: 140, // Rating content or voting for content
  SURVEYCHECKPOINT: 145, // Reaching the survey page/form

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Registration, Contact [160-179]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  REGISTRATIONINITIATE: 161, // Initiating a registration process
  REGISTRATIONCOMPLETE: 162, // Completing a registration process
  CANCELSUBSCRIPTION: 163, // Canceling a subscription
  RENEWSUBSCRIPTION: 164, // Renewing a subscription
  CHANGESUBSCRIPTION: 165, // Changing a subscription
  REGISTRATIONCHECKPOINT: 166, // Reaching the registration page/form

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Chat [180-199]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  CHATINITIATE: 180, // Initiating a chat experience
  CHATEND: 181, // Ending a chat experience

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Trial [200-209]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  TRIALSIGNUP: 200, // Signing up for a trial
  TRIALINITIATE: 201, // Initiating a trial

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Signup [210-219]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  SIGNUP: 210, // Signing up for a notification or service
  FREESIGNUP: 211, // Signing up for a free service

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Referrals [220-229]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  PARTNERREFERRAL: 220, // Navigating to a partner's web property

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Intents [230-239]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  LEARNLOWFUNNEL: 230, // Engaging in learning behavior on a commerce page (for example, "Learn more click")
  LEARNHIGHFUNNEL: 231, // Engaging in learning behavior on a non-commerce page (for example, "Learn more click")
  SHOPPINGINTENT: 232, // Shopping behavior prior to landing on a commerce page

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Video [240-259]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  VIDEOSTART: 240, // Initiating a video
  VIDEOPAUSE: 241, // Pausing a video
  VIDEOCONTINUE: 242, // Pausing or resuming a video
  VIDEOCHECKPOINT: 243, // Capturing predetermined video percentage complete
  VIDEOJUMP: 244, // Jumping to a new video location
  VIDEOCOMPLETE: 245, // Completing a video (or % proxy)
  VIDEOBUFFERING: 246, // Capturing a video buffer event
  VIDEOERROR: 247, // Capturing a video error
  VIDEOMUTE: 248, // Muting a video
  VIDEOUNMUTE: 249, // Unmuting a video
  VIDEOFULLSCREEN: 250, // Making a video full screen
  VIDEOUNFULLSCREEN: 251, // Making a video return from full screen to original size
  VIDEOREPLAY: 252, // Making a video replay
  VIDEOPLAYERLOAD: 253, // Loading the video player
  VIDEOPLAYERCLICK: 254, // Click on a button within the interactive player
  VIDEOVOLUMECONTROL: 255, // Click on video volume control
  VIDEOAUDIOTRACKCONTROL: 256, // Click on audio control within a video
  VIDEOCLOSEDCAPTIONCONTROL: 257, // Click on the closed-caption control
  VIDEOCLOSEDCAPTIONSTYLE: 258, // Click to change closed-caption style
  VIDEORESOLUTIONCONTROL: 259, // Click to change resolution

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // 	Advertisement Engagement [280-299]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  ADBUFFERING: 283, // Ad is buffering
  ADERROR: 284, // Ad error
  ADSTART: 285, // Ad start
  ADCOMPLETE: 286, // Ad complete
  ADSKIP: 287, // Ad skipped
  ADTIMEOUT: 288, // Ad timed out
  OTHER: 300 // Other
};

// Application Insights Configuration
var configObj = {
  connectionString: "YOUR_CONNECTION_STRING", 
  // Alternatively, you can pass in the instrumentation key,
  // but support for instrumentation key ingestion will end on March 31, 2025. 
  // instrumentationKey: "YOUR INSTRUMENTATION KEY",
  extensions: [clickPluginInstance],
  extensionConfig: {
    [clickPluginInstance.identifier]: {
      behaviorValidator: Microsoft.ApplicationInsights.BehaviorMapValidator(behaviorMap),
      defaultRightClickBhvr: 9
    },
  },
};
var appInsights = new Microsoft.ApplicationInsights.ApplicationInsights({
  config: configObj
});
appInsights.loadAppInsights();

示例应用

请参阅启用了 Click Analytics 自动收集插件的简单 Web 应用，了解如何实现自定义事件属性（如 Name 和 parentid）以及自定义行为和内容。有关在何处查找点击数据的信息，请参阅示例应用自述文件。

`parentId` 键的示例

下面的示例显示了针对不同的配置提取哪个值作为 parentId。

这些示例展示了如果定义了 parentDataTag，但插件在 DOM 树下找不到此标记，则插件如何使用其最接近的父元素的 id。

示例 1

在示例 1 中，未声明 parentDataTag，或未在任何元素中定义 data-parentid 或 data-*-parentid。此示例显示未收集 parentId 值的配置。

export const clickPluginConfigWithUseDefaultContentNameOrId = {
  dataTags : {
    customDataPrefix: "",
    parentDataTag: "",
    dntDataTag: "ai-dnt",
    captureAllMetaDataContent:false,
    useDefaultContentNameOrId: true,
    autoCapture: true
  },
}; 

<div className="test1" data-id="test1parent">
  <div>Test1</div>
  <div>with id, data-id, parent data-id defined</div>
  <Button id="id1" data-id="test1id" variant="info" onClick={trackEvent}>Test1</Button>
</div>

对于被单击的元素 <Button>，parentId 的值为 “not_specified”，因为没有定义 parentDataTag 详细信息，并且当前元素中没有提供父元素 ID。

示例 2

在示例 2 中，声明了 parentDataTag 并定义了 data-parentid。此示例演示如何收集父 ID 详细信息。

export const clickPluginConfigWithParentDataTag = {
  dataTags : {
    customDataPrefix: "",
    parentDataTag: "group",
    ntDataTag: "ai-dnt",
    captureAllMetaDataContent:false,
    useDefaultContentNameOrId: false,
    autoCapture: true
  },
};

<div className="test2" data-group="buttongroup1" data-id="test2parent">
  <div>Test2</div>
  <div>with data-id, parentid, parent data-id defined</div>
  <Button data-id="test2id" data-parentid = "parentid2" variant="info" onClick={trackEvent}>Test2</Button>
</div>

对于点击元素 <Button>，parentId 的值为 parentid2。即使声明了 parentDataTag，也会直接在元素中定义 data-parentid。因此，该值优先于其父元素中定义的所有其他父 ID 或 ID 详细信息。

示例 3

在示例 3 中，声明了 parentDataTag，并且未定义 data-parentid 或 data-*-parentid 属性。此示例展示了在动态元素没有 id 或 data-*-id 的情况下，声明 parentDataTag 如何有助于收集 parentId 的值。

export const clickPluginConfigWithParentDataTag = {
  dataTags : {
    customDataPrefix: "",
    parentDataTag: "group",
    dntDataTag: "ai-dnt",
    captureAllMetaDataContent:false,
    useDefaultContentNameOrId: false,
    autoCapture: true
  },
};

<div className="test6" data-group="buttongroup1" data-id="test6grandparent">
  <div>Test6</div>
  <div>with data-id, grandparent data-group defined, parent data-id defined</div>
  <div data-id="test6parent">
    <Button data-id="test6id" variant="info" onClick={trackEvent}>Test6</Button>
  </div>
</div>

对于单击的元素 <Button>，parentId 的值为 test6parent，因为声明了 parentDataTag。此声明允许插件遍历当前元素树，因此，当当前元素中未直接提供父元素 ID 详细信息时，将使用其最接近父项的 ID。定义 data-group="buttongroup1" 后，插件可以更高效地查找 parentId。

如果移除 data-group="buttongroup1" 属性，则 parentId 的值仍为 test6parent，因为仍然声明了 parentDataTag。

故障排除

请参阅专用疑难解答文章。

后续步骤

确认有数据流。
请参阅 HEART 工作簿使用文档，了解扩展的产品分析。
查看“点击分析自动收集插件”的 GitHub 存储库和 npm 包。
通过使用体验中的事件分析，按可用维度分析热门点击和切片。
如果你不熟悉编写查询的过程，请参阅 Log Analytics。
生成工作簿或导出到 Power BI，从而创建点击数据的自定义可视化效果。

通过

启用 Click Analytics 自动收集插件

先决条件

插件会收集哪些数据？

自定义事件属性

自定义维度

自定义度量值

添加 Click Analytics 插件

添加代码

（可选）设置经过身份验证的用户上下文

使用插件

遥测数据存储

`name`

`contentName`

`parentId` 键

`customDataPrefix`

添加高级配置

IValueCallback

ICustomDataTags

behaviorValidator

回调函数

传入字符串与数值

behaviorValidator 的示例用法

示例应用

`parentId` 键的示例

示例 1

示例 2

示例 3

故障排除

后续步骤

反馈

其他资源

通过

启用 Click Analytics 自动收集插件

先决条件

插件会收集哪些数据？

自定义事件属性

自定义维度

自定义度量值

添加 Click Analytics 插件

添加代码

（可选）设置经过身份验证的用户上下文

使用插件

遥测数据存储

name

contentName

parentId 键

customDataPrefix

添加高级配置

IValueCallback

ICustomDataTags

behaviorValidator

回调函数

传入字符串与数值

behaviorValidator 的示例用法

示例应用

parentId 键的示例

示例 1

示例 2

示例 3

故障排除

后续步骤

反馈

其他资源

`name`

`contentName`

`parentId` 键

`customDataPrefix`

`parentId` 键的示例