Включить плагин автоматической коллекции click Analytics

Расширения пакета SDK для JavaScript Для Application Insights — это дополнительные функции, которые можно добавить в пакет SDK Для JavaScript Application Insights, чтобы повысить его функциональные возможности.

В этой статье мы рассмотрим плагин Click Analytics, который автоматически отслеживает кликовые события на веб-страницах и использует атрибуты data-* или настраиваемые теги для элементов HTML для сбора данных телеметрии о событиях.

Установите пакет SDK JavaScript перед включением подключаемого модуля Click Analytics.

Следующие ключевые свойства записываются по умолчанию при включении подключаемого модуля.

Пользователи могут настроить подключаемый модуль автоматической коллекции Click Analytics с помощью скрипта загрузчика пакета SDK JavaScript (Web) или npm, а затем, при необходимости, добавить расширение фреймворка.

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

Если вы хотите задать этот необязательный параметр, см. раздел "Задать контекст пользователя, прошедший проверку подлинности".

При использовании книги HEART с подключаемым модулем Click Analytics вам не нужно задавать контекст аутентифицированного пользователя, чтобы просмотреть данные телеметрии. Дополнительные сведения см. в руководстве по книге HEART.

В следующих разделах описывается использование подключаемого модуля.

Данные телеметрии, созданные из событий щелчка, хранятся в портале Azure, разделе журналов Application Insights.

Столбец name таблицы customEvent заполняется на основе следующих правил:

1. Если customDataPrefix не объявлен в расширенной конфигурации, используется id, предоставленный в data-id как имя customEvent.
2. Если customDataPrefix объявлен, id, указанный в data-*-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 заполняется на основе следующих правил:

• При клике на HTML элемент <a>, подключаемый модуль пытается собрать значение его атрибута innerText (text). Если подключаемый модуль не может найти этот атрибут, он пытается собрать значение атрибута innerHtml.

• Для HTML <img> или <area> элемента при щелчке, подключаемый модуль собирает значение его alt атрибута.

• Для всех остальных щелкнутых HTML-элементов contentName заполняется на основе следующих правил, которые перечислены в порядке приоритета.

  1. Значение атрибута value элемента
  2. Значение атрибута name элемента
  3. Значение атрибута alt элемента
  4. Значение атрибута innerText для элемента
  5. Значение атрибута id элемента

Чтобы заполнить ключ parentId в customDimensions в таблице customEvent в журналах, объявите тег 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 в расширенной конфигурации предоставляет пользователю возможность настроить префикс атрибута данных, чтобы определить, где находится сердце в базе кода отдельного пользователя. Префикс всегда должен быть строчным регистром и начинаться с data-. Например:

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

В HTML глобальные data-* атрибуты называются настраиваемыми атрибутами данных, которые позволяют обмениваться конфиденциальной информацией между HTML и его представлением DOM скриптами. Старые браузеры, такие как Internet Explorer и Safari, игнорируют атрибуты, которых они не понимают, если только они не начинаются с data-.

Звездочку (*) в data-* можно заменить любым именем в соответствии с правилами создания XML-имен с учетом следующих ограничений.

• Имя не должно начинаться с "xml" независимо от регистра букв.
• Имя не должно содержать точку с запятой (U+003A).
• имя не должно содержать заглавные буквы.

Функции behaviorValidator автоматически проверяют, соответствуют ли помеченные поведения в коде предопределенным списком. Функции обеспечивают согласованность отмеченных действий с таксономией, установленной вашим предприятием. Это не обязательно или ожидается, что большинство клиентов Azure Monitor используют эти функции, но они доступны для расширенных сценариев. Функции behaviorValidator могут помочь сделать практики более доступными.

Поведение отображается в поле customDimensions в таблице CustomEvents.

Три различных behaviorValidator функции обратного вызова предоставляются в рамках этого расширения. Вы также можете использовать собственные функции обратного вызова, если предоставляемые функции не решают ваши требования. Цель состоит в том, чтобы привести структуру данных собственного поведения. Подключаемый модуль использует эту функцию проверки при извлечении паттернов из тегов данных.

Чтобы уменьшить байты, передайте значение числа вместо полнотекстовой строки. Если стоимость не является проблемой, можно передать полную текстовую строку (например, NAVIGATIONBACK).

Вот пример того, как может выглядеть валидатор карты поведения. Ваш может выглядеть по-разному в зависимости от таксономии вашей организации и собранных событий.

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 для внедрения пользовательских свойств событий, таких как Name, и настраиваемого поведения и parentid контента. Ознакомьтесь с файлом README образца приложения для получения сведений о том, где найти данные о кликах.

В следующих примерах показано, какое значение используется в качестве parentId для разных конфигураций.

В примерах показано, что если parentDataTag определён, но подключаемый модуль не может найти этот тег в дереве DOM, он использует id самого близкого родительского элемента.

В примере 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 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 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 объявлено. Это объявление позволяет плагину проходить по текущему дереву элементов, и если сведения о родительском идентификаторе не предоставляются непосредственно в текущем элементе, будет использован идентификатор его ближайшего родителя. С установленным data-group="buttongroup1" плагин более эффективно находит parentId.

Если удалить атрибут data-group="buttongroup1", значение parentId по-прежнему будет test6parent, поскольку parentDataTag все еще объявлено.

См. специальную статью об устранении неполадок.

• Убедитесь, что данные передаются.
• См. документацию по использованию книги HEART для расширенной аналитики продуктов.
• Ознакомьтесь с репозиторием GitHub и пакетом npm для плагина Click Analytics Autocollection.
• Используйте Анализ событий в интерфейсе использования для анализа самых частых кликов и фильтрации по доступным измерениям.
• Если вы не знакомы с процессом написания запроса, ознакомьтесь с Log Analytics .
• Создайте книгу Excel или экспортируйте в Power BI для создания пользовательских визуализаций данных о кликах.