啟用 Click Analytics 自動收集外掛程式
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 自動收集外掛程式,然後選擇性地新增架構延伸模組。
新增程式碼
在您想要啟用 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(i)}var S,u,D,t,n,i,C=window,x=document,w=C.location,I="script",b="ingestionendpoint",E="disableExceptionTracking",A="ai.device.";"instrumentationKey"[S="toLowerCase"](),u="crossOrigin",D="POST",t="appInsightsSDK",n=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=n),i=C[n]||function(l){var d=!1,g=!1,f={initialize:!0,queue:[],sv:"7",version:2,config:l};function m(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[A+"id"]=i[S](),n[A+"type"]=i,n["ai.operation.name"]=w&&w.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(f.sv||f.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:4,seq:"1",aiDataContract:undefined}}var h=-1,v=0,y=["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"],k=l.url||cfg.src;if(k){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~k.indexOf("ai.3")&&(k=k.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<y.length;e++)if(0<k.indexOf(y[e])){h=e;break}var i=function(e){var a,t,n,i,o,r,s,c,p,u;f.queue=[],g||(0<=h&&v+1<y.length?(a=(h+v+1)%y.length,T(k.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+y[a]+i})),v+=1):(d=g=!0,o=k,c=(p=function(){var e,t={},n=l.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][S]()]=o[1])}return t[b]||(e=(n=t.endpointsuffix)?t.location:null,t[b]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||l.instrumentationKey||"",p=(p=p[b])?p+"/v2/track":l.endpointUrl,(u=[]).push((t="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",n=o,r=p,(s=(i=m(c,"Exception")).data).baseType="ExceptionData",s.baseData.exceptions=[{typeName:"SDKLoadFailed",message:t.replace(/\./g,"-"),hasFullStack:!1,stack:t+"\nSnippet failed to load ["+n+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(w&&w.pathname||"_unknown_")+"\nEndpoint: "+r,parsedStack:[]}],i)),u.push((s=o,t=p,(r=(n=m(c,"Message")).data).baseType="MessageData",(i=r.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+s+")").replace(/\"/g,"")+'"',i.properties={endpoint:t},n)),o=u,c=p,JSON&&((r=C.fetch)&&!cfg.useXhr?r(c,{method:D,body:JSON.stringify(o),mode:"cors"}):XMLHttpRequest&&((s=new XMLHttpRequest).open(D,c),s.setRequestHeader("Content-type","application/json"),s.send(JSON.stringify(o))))))},a=function(e,t){g||setTimeout(function(){!t&&f.core||i()},500),d=!1},T=function(e){var n=x.createElement(I),e=(n.src=e,cfg[u]);return!e&&""!==e||"undefined"==n[u]||(n[u]=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?x.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){x.getElementsByTagName(I)[0].parentNode.appendChild(n)},cfg.ld||0),n};T(k)}try{f.cookie=x.cookie}catch(p){}function t(e){for(;e.length;)!function(t){f[t]=function(){var e=arguments;d||f.queue.push(function(){f[t].apply(f,e)})}}(e.pop())}var r,s,n="track",o="TrackPage",c="TrackEvent",n=(t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+o,"stop"+o,"start"+c,"stop"+c,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),f.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(l.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==l[E]&&!0!==n[E]&&(t(["_"+(r="onerror")]),s=C[r],C[r]=function(e,t,n,i,a){var o=s&&s(e,t,n,i,a);return!0!==o&&f["_"+r]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},l.autoExceptionInstrumented=!0),f}(cfg.cfg),(C[n]=i).queue&&0===i.queue.length?(i.queue.push(e),i.trackPageView({})):e();})({ src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js", crossOrigin: "anonymous", cfg: configObj // configObj is defined above. }); </script>
若要新增或更新 JavaScript (Web) SDK Loader 指令碼設定,請參閱 JavaScript (Web) SDK 載入器指令碼設定。
提示
如果您想要新增架構延伸模組或已新增架構延伸模組,請參閱 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
會根據下列規則填入,這些規則會依優先順序列出:- 元素
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 活頁簿搭配 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,以建立點擊資料的自訂視覺效果。