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

  • 아티클

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

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

필수 조건

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

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

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

사용자 지정 이벤트 속성

이름 설명 예제
이름 사용자 지정 이벤트의 이름입니다. 이름이 채워지는 방법에 대한 자세한 내용은 이름 열을 참조하세요. 정보
itemType 이벤트 유형입니다. customEvent
sdkVersion 클릭 플러그 인과 함께 사용하는 Application Insights SDK 버전입니다. JavaScript:2_ClickPlugin2

사용자 지정 차원

이름 설명 예제
actionType 클릭 이벤트를 발생시킨 동작 유형입니다. 마우스 왼쪽 클릭 또는 오른쪽 단추 클릭 모두 가능합니다. CL
baseTypeSource 사용자 지정 이벤트의 기본 유형 원본입니다. ClickEvent
clickCoordinates 클릭 이벤트가 트리거되는 위치를 조정합니다. 659X47
콘텐츠 추가 data-* 특성 및 값을 저장하는 자리 표시자입니다. [{sample1:value1, sample2:value2}]
pageName 클릭 이벤트가 트리거되는 페이지의 제목입니다. 샘플 제목
parentId 부모 요소의 ID 또는 이름입니다. parentId가 채워지는 방법에 대한 자세한 내용은 parentId 키를 참조하세요. navbarContainer

사용자 지정 측정

이름 설명 예제
timeToAction 초기 페이지 로드 이후 사용자가 요소를 클릭하는 데 걸린 시간(밀리초)입니다. 87407

Click Analytics 플러그 인 추가

사용자는 JavaScript(웹) SDK 로더 스크립트 또는 npm을 통해 Click Analytics 자동 수집 플러그 인을 설정한 다음 필요에 따라 프레임워크 확장을 추가할 수 있습니다.

참고 항목

2025년 3월 31일에 계측 키 수집에 대한 지원이 종료됩니다. 계측 키 수집은 계속 작동하지만 더 이상 기능에 대한 업데이트 또는 지원을 제공하지 않습니다. 연결 문자열로 전환하여 새로운 기능을 활용합니다.

코드 추가

  1. Application Insights를 활성화할 각 페이지의 맨 위에 JavaScript(웹) 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>

  2. JavaScript(웹) SDK 로더 스크립트 구성을 추가하거나 업데이트하려면 JavaScript(웹) SDK 로더 스크립트 구성을 참조하세요.

팁

프레임워크 확장을 추가하거나 이미 추가한 경우 Click Analytics 플러그 인을 추가하는 방법은 React, React Native 및 Angular 코드 샘플을 참조하세요.

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

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

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 키예제를 참조하세요.

주의

  • parentDataTag이(가) 애플리케이션의 HTML 요소 중 ‘하나’에 포함되면 이것을 사용한 HTML 요소뿐만 아니라 ‘SDK는 전체 애플리케이션에서 부모 태그를 검색하기 시작’합니다.
  • Click Analytics 플러그 인과 함께 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)이 없어야 합니다.
  • 이름에 대문자가 없어야 합니다.

고급 구성 추가

이름 Type 기본값 설명
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

이름 Type 기본값 설명
pageName 함수 Null 기본 pageName 캡처 동작을 재정의하는 함수입니다.
pageActionPageTags 함수 Null pageTags 이벤트 중에 수집되는 기본 pageAction을(를) 늘리는 콜백 함수입니다.
contentName 함수 Null 사용자 지정된 contentName을(를) 채우는 콜백 함수입니다.

ICustomDataTags

이름 Type 기본값 HTML에 사용할 기본 태그 설명
useDefaultContentNameOrId 부울 False 해당 없음 true의 경우 특정 요소가 기본 데이터 접두사 또는 customDataPrefix(으)로 태그가 지정되지 않은 경우 contentName에 대해 id 표준 HTML 특성을 수집합니다. 그렇지 않으면 id에 대한 표준 HTML 특성 contentName이(가) 수집되지 않습니다.
customDataPrefix 문자열 data- data-* 제공된 접두사로 태그 지정된 요소의 콘텐츠 이름과 값을 자동으로 캡처합니다. 예를 들어 data-*-id, data-<yourcustomattribute>가 HTML 태그에 사용될 수 있습니다.
aiBlobAttributeTag 문자열 ai-blob data-ai-blob 플러그 인이 개별 data-* 특성 대신 JSON BLOB 특성을 지원합니다.
metaDataPrefix 문자열 Null 해당 없음 캡처 시 제공된 접두사를 사용하여 HTML 헤드의 메타 요소 이름 및 콘텐츠를 자동으로 캡처합니다. 예를 들어 custom-가 HTML Meta 태그에 사용될 수 있습니다.
captureAllMetaDataContent 부울 False 해당 없음 모든 HTML 헤드의 메타 요소 이름 및 콘텐츠를 자동으로 캡처합니다. 기본값은 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();

샘플 앱

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입니다.

문제 해결

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

다음 단계