Click Analytics 자동 수집 플러그 인 사용

Application Insights JavaScript SDK 기능 확장은 Application Insights JavaScript SDK에 추가하여 기능을 향상시킬 수 있는 추가 기능입니다.

이 문서에서는 웹 페이지에서 클릭 이벤트를 자동으로 추적하고 HTML 요소에서 data-* 특성 또는 사용자 지정된 태그를 사용하여 이벤트 원격 분석을 채우는 Click Analytics 플러그 인을 다룹니다.

필수 조건

Click Analytics 플러그 인을 사용하도록 설정하기 전에 JavaScript SDK를 설치합니다.

플러그 인에서는 어떤 데이터를 수집하나요?

플러그 인을 사용하는 경우 기본값으로 캡처되는 주요 속성 중 몇 가지는 다음과 같습니다.

사용자 지정 이벤트 속성

사용자 지정 차원

사용자 지정 측정

Click Analytics 플러그 인 추가

사용자는 JavaScript(웹) 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.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>

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

(선택 사항) 인증된 사용자 컨텍스트 설정

이 선택 사항을 설정하려면 인증된 사용자 컨텍스트 설정을 참조하세요.

Click Analytics 플러그 인과 함께 HEART 통합 문서를 사용하는 경우 인증된 사용자 컨텍스트를 설정하지 않아도 원격 분석 데이터를 볼 수 있습니다. 자세한 내용은 HEART 통합 문서 설명서를 참조하세요.

플러그 인 사용

다음 섹션에서는 플러그 인의 사용 방법을 설명합니다.

원격 분석 데이터 스토리지

클릭 이벤트에서 생성된 원격 분석 데이터는 Azure Portal의 >Application Insights > 로그 섹션에 customEvents(으)로 저장됩니다.

name

다음 규칙에 따라 customEvent의 name 열이 채워집니다.

1. 고급 구성에서 customDataPrefix이(가) 선언되지 않은 경우 data-id에 제공된 id이(가) customEvent 이름으로 사용됩니다.
2. customDataPrefix이(가) 선언된 경우 data-*-id에 제공된 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의 contentName 열은 다음 규칙에 따라 채워집니다.

• 클릭한 HTML <a> 요소의 경우 플러그 인은 innerText(텍스트) 특성의 값을 수집하려고 시도합니다. 이 특성을 찾을 수 없는 경우 플러그 인은 innerHtml 특성의 값을 수집하려고 시도합니다.

• 클릭한 HTML <img> 또는 <area> 요소의 경우 플러그 인은 해당 alt 특성의 값을 수집합니다.

• 클릭한 다른 모든 HTML 요소의 경우 contentName은(는) 우선 순위에 따라 나열되는 다음 규칙에 따라 채워집니다.

  1. 요소에 대한 value 특성의 값
  2. 요소에 대한 name 특성의 값
  3. 요소에 대한 alt 특성의 값
  4. 요소에 대한 innerText 특성의 값
  5. 요소에 대한 id 특성의 값

parentId 키

로그의 customEvent 테이블의 customDimensions 내부에 parentId 키를 채우려면 parentDataTag 태그를 선언하거나 data-parentid 특성을 정의합니다.

parentId에 대한 값은 다음 규칙에 따라 페치됩니다.

• parentDataTag을(를) 선언하면 플러그 인은 클릭한 요소에 가장 가까운 요소 내에 정의된 id 또는 data-*-id 값을 parentId으(로) 가져옵니다.
• data-*-id 및 id이(가) 모두 정의된 경우 data-*-id이(가) 우선됩니다.
• parentDataTag이(가) 정의되었지만 플러그 인이 DOM 트리에서 이 태그를 찾을 수 없는 경우 플러그 인은 클릭한 요소에 가장 가까운 요소 내에 정의된 id 또는 data-*-id을(를) parentId(으)로 사용합니다. 그러나 data-{parentDataTag} 또는 customDataPrefix-{parentDataTag} 특성을 정의하여 parentId을(를) 찾는 데 필요한 루프 수를 줄이는 것이 좋습니다. parentDataTag 선언은 사용자 지정된 옵션과 함께 플러그 인을 사용해야 하는 경우 유용합니다.
• parentDataTag이(가) 정의되지 않고 parentId 정보가 현재 요소에 포함되지 않은 경우 parentId 값은 수집되지 않습니다.
• parentDataTag이(가) 정의된 경우 useDefaultContentNameOrId은(는) false(으)로 정의되고, id 특성만 클릭한 요소에 가장 가까운 요소 내에서 정의되며, parentId은(는) "not_specified"(으)로 채웁니다. id 값을 가져오려면 useDefaultContentNameOrId을(를) true(으)로 설정합니다.

data-parentid 또는 data-*-parentid 특성을 정의하는 경우 플러그 인은 클릭한 요소(해당하는 경우 클릭한 요소 내부 포함)에 가장 가까운 이 특성의 인스턴스를 가져옵니다.

parentDataTag을(를) 선언하고 data-parentid 또는 data-*-parentid 특성을 정의하는 경우 data-parentid 또는 data-*-parentid가 우선됩니다.

"parentId 값이 없는 이벤트 행 클릭" 원격 분석 경고가 나타나면 "parentId 값이 없는 이벤트 행 클릭" 경고 수정을 참조하세요.

다른 구성에 대해 parentId(으)로 페치되는 값을 보여 주는 예제는 parentid 키예제를 참조하세요.

customDataPrefix

고급 구성의 customDataPrefix 옵션은 사용자에게 데이터 특성 접두사를 구성하는 기능을 제공하여 개인의 코드베이스 내에서 HEART의 위치를 식별할 수 있도록 지원합니다. 접두사는 항상 소문자여야 하며 data-(으)로 시작해야 합니다. 예시:

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

HTML에서 data-* 전역 특성은 사용자 지정 데이터 특성이라고 하는 특성 클래스를 구성합니다. 이 특성을 통해 HTML과 스크립트의 DOM 표시 간에 독점 정보를 교환할 수 있습니다. Internet Explorer 및 Safari와 같은 이전 브라우저는 data-(으)로 시작하지 않는 한 이해하지 못하는 특성을 삭제합니다.

data-*의 별표(*)는 XML 이름 생성 규칙에 따라 임의의 이름으로 바꿀 수 있으며 다음과 같은 제한 사항이 있습니다.

• 이름은 대문자인지 소문자인지에 관계없이 "xml"로 시작하지 않아야 합니다.
• 이름에 세미콜론(U+003A)이 없어야 합니다.
• 이름에 대문자가 없어야 합니다.

고급 구성 추가

IValueCallback

ICustomDataTags

behaviorValidator

behaviorValidator 함수는 코드의 태그 지정된 동작이 미리 정의된 목록에 부합하는지 자동으로 확인합니다. 이 함수는 태그 지정된 동작이 기업에서 설정한 분류와 일관성을 가지도록 할 수 있습니다. 대부분의 Azure Monitor 고객에게는 이 함수 사용이 필수가 아니거나 필요하지 않지만 고급 시나리오의 경우 사용할 수 있습니다. behaviorValidator 함수는 접근성이 더 큰 사례에 도움이 될 수 있습니다.

동작은 CustomEvents 테이블 내의 customDimensions 필드에 표시됩니다.

콜백 함수

세 가지 behaviorValidator 콜백 함수가 이 확장의 일부로 노출됩니다. 노출된 함수가 요구 사항을 해결하지 못하는 경우 사용자가 고유한 콜백 함수를 사용할 수도 있습니다. 고유한 동작의 데이터 구조를 가져오는 것이 의도입니다. 플러그 인은 데이터 태그에서 동작을 추출하는 동안 이 유효성 검사기 함수를 사용합니다.

문자열 값 및 숫자 값 전달 비교

전달하는 바이트를 줄이려면 전체 텍스트 문자열 대신 숫자 값을 전달합니다. 비용이 문제가 되지 않는다면 전체 텍스트 문자열(예: 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();

샘플 앱

Name 및 parentid과(와) 같은 사용자 지정 이벤트 속성과 사용자 지정 동작 및 콘텐츠를 구현하는 방법은 Click Analytics 자동 수집 플러그 인을 사용하도록 설정된 간단한 웹앱을 참조하세요. 클릭 데이터를 찾을 수 있는 위치에 대한 자세한 내용은 샘플 앱 추가 정보를 참조하세요.

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 특성이 정의되지 않았습니다. 이 예제에서는 동적 요소에 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" 특성을 제거해도 parentDataTag이(가) 여전히 선언되어 있기 때문에 parentId 값은 여전히 test6parent입니다.

문제 해결

전용 문제 해결 문서를 참조하세요.

다음 단계

• 데이터가 흐르는지 확인합니다.
• 확장된 제품 분석의 경우 HEART 통합 문서 활용에 대한 설명서를 확인하세요.
• 분석 자동 수집 플러그 인 클릭 관련 GitHub 리포지토리와 npm 패키지를 확인하세요.
• 사용 환경의 이벤트 분석을 사용하여 사용 가능한 차원별 상위 클릭 및 슬라이스를 분석합니다.
• 쿼리 작성 프로세스에 익숙하지 않은 경우 Log Analytics를 참조하세요.
• 통합 문서를 빌드하거나 Power BI로 내보내서 클릭 데이터에 대한 사용자 지정 시각화를 만듭니다.