启用 Click Analytics 自动收集插件

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

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

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

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

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

<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.cn","js0.cdn.applicationinsights.io","js0.cdn.monitor.azure.cn","js2.cdn.applicationinsights.io","js2.cdn.monitor.azure.cn","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>

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();

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

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

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

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

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

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

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

• 对于所点击的 HTML <a> 元素，插件会尝试收集其 innerText（文本）属性的值。 如果插件找不到此属性，它会尝试收集其 innerHtml 属性的值。

• 对于所点击的 HTML <img> 或 <area> 元素，插件会尝试收集其 alt 属性的值。

• 对于所有其他点击的 HTML 元素，将根据以下规则填充 contentName，这些规则按优先级顺序列出：

  1. 元素的 value 属性的值
  2. 元素的 name 属性的值
  3. 元素的 alt 属性的值
  4. 元素的 innerText 属性的值
  5. 元素的 id 属性的值

若要在日志中 parentId 的 customDimensions 中填充 customEvent 键，请声明 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 键的示例。

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

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

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

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

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

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

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

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

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

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

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。

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

在示例 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 中，声明了 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 中，声明了 parentDataTag，但未定义 data-parentid 或 data-*-parentid 属性。 此示例展示了在动态元素没有 parentDataTag 或 parentId 的情况下，声明 id 如何有助于收集 data-*-id 的值。

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，从而创建点击数据的自定义可视化效果。