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

  • Статья

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

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

Необходимые компоненты

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

Какие данные собирают подключаемый модуль?

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

Настраиваемые свойства события

Имя Описание Пример
Имя Имя пользовательского события. Дополнительные сведения о заполнении имени см. в разделе "Имя". О программе
itemType Тип события. customEvent
sdkVersion Версия пакета 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

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

Примечание.

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

Добавление кода

  1. Вставьте скрипт загрузчика пакета SDK JavaScript (Web) в верхней части каждой страницы, для которой требуется включить Аналитика приложения.

     <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. Сведения о добавлении или обновлении конфигурации скрипта загрузчика пакета SDK JavaScript (Web) см. в статье о настройке скрипта загрузки пакета SDK JavaScript (Web).

Совет

Если вы хотите добавить расширение платформы или вы уже добавили его, ознакомьтесь с примерами кода React, React Native и Angular, чтобы добавить подключаемый модуль Click Analytics.

(Необязательно) Настройка контекста пользователя, прошедшего проверку подлинности

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

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

Использование подключаемого модуля

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

Хранилище данных телеметрии

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

name

Столбец 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-iddata-*-id Если атрибут не существует и useDefaultContentNameOrId если задано значениеtrue, в качестве customEvent имени используется html-атрибут id элемента или имя содержимого элемента. id Если оба и имя содержимого присутствуют, приоритет присваиваетсяid.
  4. Если useDefaultContentNameOrId имеет значение false, customEvent то имя равно "not_specified". Рекомендуется true настроить useDefaultContentNameOrId создание значимых данных.

contentName

Если у вас есть функция обратного вызова в расширенной contentName конфигурации, contentName столбец customEvent заполняется на основе следующих правил:

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

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

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

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

parentId Ключ

Чтобы заполнить parentId ключ в customEventcustomDimensions таблице в журналах, объявите тег parentDataTag или определите data-parentid атрибут.

Значение для parentId этого извлекается на основе следующих правил:

  • При объявлении parentDataTagподключаемого модуля извлекается значение id или data-*-id определяется в элементе, который ближе всего к элементу, который находится ближе всего к элементу.parentId
  • Если оба data-*-id и id определены, приоритет присваивается data-*-id.
  • Если parentDataTag определен, но подключаемый модуль не может найти этот тег в дереве DOM, подключаемый модуль использует id или data-*-id определяется в элементе, который ближе всего к элементу, который находится ближе всего к элементу, который находится в виде щелчка parentId. Однако мы рекомендуем определить или customDataPrefix-{parentDataTag} атрибутdata-{parentDataTag}, чтобы уменьшить количество циклов, необходимых для поискаparentId. parentDataTag Объявление полезно, если необходимо использовать подключаемый модуль с настраиваемыми параметрами.
  • Если в текущий элемент нет parentDataTag определенного значения, а parentId сведения не включаются в текущий элемент, не parentId собираются.
  • Если parentDataTag задано значение, задано falseзначение , useDefaultContentNameOrId а только 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 в расширенной конфигурации предоставляет пользователю возможность настроить префикс атрибута данных, чтобы определить, где находится сердце в базе кода отдельного пользователя. Префикс всегда должен быть строчным регистром и начинаться с data-. Например:

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

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

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

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

Добавление расширенной конфигурации

Имя. Тип По умолчанию. Description
autoCapture Логическое значение Истина Настройка автоматической регистрации.
обратный вызов IValueCallback Null; Настройка обратных вызовов.
pageTags Объект Null; Теги страницы.
dataTags ICustomDataTags Null; Пользовательские теги данных, переопределяющие теги по умолчанию, используемые для регистрации данных о щелчках.
urlCollectHash Логический False Включает регистрацию значений, следующих после символа # в URL-адресе.
urlCollectQuery Логический False Включает регистрацию строки запроса в URL-адресе.
behaviorValidator Функция Null; Функция обратного вызова, используемая для проверки значения data-*-bhvr. Дополнительные сведения см. в разделе "ПоведениеValidator".
defaultRightClickBhvr строка или число '' Значение поведения по умолчанию при возникновении события правой кнопкой мыши. Это значение переопределяется, если элемент имеет data-*-bhvr атрибут.
dropInvalidEvents Логический False Пометка для удаления событий, которые не имеют полезных данных щелчка.

IValueCallback

Имя. Тип По умолчанию. Description
pageName Функция Null; Функция для переопределения поведения записи по умолчанию pageName .
pageActionPageTags Функция Null; Функция обратного вызова для расширения по умолчанию pageTags , собираемого pageAction во время события.
contentName Функция Null; Функция обратного вызова для заполнения настраиваемой contentNameнастройки.

ICustomDataTags

Имя. Тип По умолчанию Тег по умолчанию для использования в HTML Description
useDefaultContentNameOrId Логический False Н/П Если trueпараметр собирает стандартный HTML-атрибут id , если contentName определенный элемент не помечен префиксом данных по умолчанию или customDataPrefix. В противном случае стандартный HTML-атрибут id для contentName не собирается.
customDataPrefix Строка data- data-* Автоматическая регистрация имени содержимого и значений элементов, которые отмечены указанным префиксом. Например, data-*-id, data-<yourcustomattribute> можно использовать в тегах HTML.
aiBlobAttributeTag Строка ai-blob data-ai-blob Подключаемый модуль поддерживает атрибут БОЛЬШОго двоичного объекта JSON вместо отдельных data-* атрибутов.
metaDataPrefix Строка Null; Н/П Автоматическое запись метаэлеза HTML Head и содержимое с предоставленным префиксом при захвате. Например, custom- можно использовать в HTML-теге meta.
captureAllMetaDataContent Логический False Н/П Автоматическая регистрация всех имен и всего содержимого элементов meta заголовка HTML. По умолчанию — false. Если этот параметр включен, он переопределяет предоставленные metaDataPrefix.
parentDataTag Строка Null; Н/П Извлекает parentId данные из журналов при data-parentid обнаружении или data-*-parentid не обнаружении. Для повышения эффективности останавливает обход DOM для записи имени содержимого и значения элементов при data-{parentDataTag} обнаружении или customDataPrefix-{parentDataTag} атрибута. Дополнительные сведения см. в разделе parentId key.
dntDataTag Строка ai-dnt data-ai-dnt Подключаемый модуль для записи данных телеметрии игнорирует элементы HTML с этим атрибутом.

behaviorValidator

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

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

Функции обратного вызова

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

Примеры parentId ключа

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

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

Пример 1

В примере 1 parentDataTag не объявлен data-parentiddata-*-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>

Для выбранного parentId элемента <Button> значение имеет значение“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>имеет значение parentIdparentid2. parentDataTag Несмотря на то, что он объявлен, data-parentid он определяется непосредственно в элементе. Поэтому это значение имеет приоритет над всеми другими родительскими идентификаторами или сведениями об идентификаторах, определенных в его родительских элементах.

Пример 3

В примере 3 parentDataTag объявляется и data-parentiddata-*-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" равно, так как parentDataTag оно по-прежнему test6parentобъявлено.parentId

Устранение неполадок

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

Следующие шаги