启用 Click Analytics 自动收集插件
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 自动收集插件,然后选择性地添加框架扩展。
添加代码
将 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.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>
若要添加或更新 JavaScript (Web) SDK 加载程序脚本配置,请参阅 JavaScript (Web) SDK 加载程序脚本配置。
提示
如果要添加框架扩展或已添加框架扩展,请参阅 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
,这些规则按优先级顺序列出:- 元素的
value
属性的值 - 元素的
name
属性的值 - 元素的
alt
属性的值 - 元素的 innerText 属性的值
- 元素的
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,从而创建点击数据的自定义可视化效果。