啟用 Click Analytics 自動收集外掛程式

文章
10/15/2024

Application Insights JavaScript SDK 功能延伸模組是可新增至 Application Insights JavaScript SDK 以增強其功能的額外功能。

在本文中，我們會討論 Click Analytics 外掛程式，其會自動追蹤網頁上的點擊事件，並使用 HTML 元素上的 data-* 屬性或自訂標籤來填入事件遙測。

必要條件

啟用 Click Analytics 外掛程式之前，請先安裝 JavaScript SDK。

外掛程式會收集哪些資料？

啟用外掛程式時，預設會擷取下列重要屬性。

自訂事件屬性

名稱	描述	範例
名稱	自訂事件的名稱。如需如何填入名稱的詳細資訊，請參閱名稱資料行。	關於
itemType	事件類別。	customEvent
sdkVersion	Application Insights SDK 版本及點擊外掛程式。	JavaScript:2_ClickPlugin2

自訂維度

名稱	描述	範例
actionType	導致點按事件的動作類型。它可以是滑鼠左鍵或右鍵。	CL
baseTypeSource	自訂事件的基底類型來源。	ClickEvent
clickCoordinates	觸發點按事件的座標。	659X47
content	用來儲存額外 `data-*` 屬性和值的預留位置。	[{sample1:value1, sample2:value2}]
pageName	點按事件觸發頁面的標題。	範例標題
parentId	父元素的識別碼或名稱。如需如何填入 parentId 的詳細資訊，請參閱 parentId 索引鍵。	navbarContainer

自訂度量

名稱	描述	範例
timeToAction	從初始頁面載入以來使用者點擊元素所花費的時間 (以毫秒為單位)。	87407

新增 Click Analytics 外掛程式

使用者可以透過 JavaScript (Web) SDK 載入器指令碼或 npm 設定 Click Analytics 自動收集外掛程式，然後選擇性地新增架構延伸模組。

注意

針對檢測金鑰擷取的支援將在 2025 年 3 月 31 日結束。檢測金鑰擷取將會繼續運作，但我們不再提供該功能的更新或支援。轉換至連接字串以利用新功能。

在您想要啟用 Application Insights 的每個頁面頂端貼上 JavaScript (Web) SDK 載入器指令碼。

<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 Loader 指令碼設定，請參閱 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 活頁簿文件。

使用外掛程式

下列各節說明如何使用外掛程式。

遙測資料儲存體

點擊事件所產生的遙測資料會在 Azure 入口網站 > Application Insights > [記錄] 區段儲存為 customEvents。

`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 (text) 屬性的值。如果外掛程式找不到這個屬性，它會嘗試收集其 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 活頁簿搭配 Click Analytics 外掛程式，若要記錄或偵測 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	自動擷取設定。
回撥	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	N/A	如果為 `true`，當特定元素未加上預設資料前置詞或 `customDataPrefix` 標籤時，會收集 `contentName` 的標準 HTML 屬性 `id`。否則，不會收集 `contentName` 的標準 HTML 屬性 `id`。
customDataPrefix	String	`data-`	`data-*`	自動擷取以所提供前置詞標記的專案內容名稱和值。例如，`data-*-id`、`data-<yourcustomattribute>` 可以在 HTML 標籤中使用。
aiBlobAttributeTag	String	`ai-blob`	`data-ai-blob`	外掛程式支援 JSON Blob 屬性，而不是個別的 `data-*` 屬性。
metaDataPrefix	String	Null	N/A	擷取時，自動擷取具有所提供前置詞的 HTML 標頭中繼元素名稱和內容。例如，`custom-` 可以在 HTML 中繼標記中使用。
captureAllMetaDataContent	布林值	False	N/A	自動擷取所有 HTML 標頭中繼元素名稱和內容。預設為 False。如果啟用，則會覆寫提供的 `metaDataPrefix`。
parentDataTag	String	Null	N/A	未遇到 `data-parentid` 或 `data-*-parentid` 時，擷取記錄中的 `parentId`。為了提高效率，停止周遊 DOM，以在遇到 `data-{parentDataTag}` 或 `customDataPrefix-{parentDataTag}` 屬性時擷取元素的內容名稱和值。如需詳細資訊，請參閱 parentId 索引鍵。
dntDataTag	String	`ai-dnt`	`data-ai-dnt`	擷取遙測資料的外掛程式會忽略具有此屬性的 HTML 元素。

behaviorValidator

behaviorValidator 函式會自動檢查程式碼中標記的行為是否符合預先定義的清單。函式可確保標記的行為與企業的已建立分類一致。大部分的 Azure 監視器客戶並不需要或不預期會使用這些函式，但可在進階案例中使用這些函式。 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 Autocollection 外掛程式的簡單 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 詳細資料，且目前元素內沒有提供父元素識別碼。

範例 2

在範例 2 中，宣告 parentDataTag 並定義 data-parentid。此範例示範如何收集父識別碼詳細資料。

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。因此，這個值優先於其父元素中定義的所有其他父識別碼或識別碼詳細資料。

範例 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 已宣告。此宣告可讓外掛程式周遊目前的元素樹狀結構，因此當目前元素內未直接提供父識別碼詳細資料時，將會使用其最接近父系的識別碼。透過定義 data-group="buttongroup1"，外掛程式可更有效率地尋找 parentId。

如果您移除 data-group="buttongroup1" 屬性，則 parentId 的值仍然為 test6parent，因為 parentDataTag 仍然會宣告。

疑難排解

請參閱專用的疑難排解文章。

下一步

確認資料正在流動。
請參閱使用 HEART 活頁簿文件來進行擴充的產品分析。
請參閱 Click Analytics 自動收集外掛程式的 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` 索引鍵的範例