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

Статья
09/13/2024

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

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

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

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

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

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

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

Имя	Описание	Пример
Имя.	Имя пользовательского события. Дополнительные сведения о заполнении имени см. в разделе "Имя".	О программе
itemType	Тип события.	customEvent
sdkVersion	Версия пакета SDK Application Insights вместе с подключаемым модулем.	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 г. Прием ключей инструментирования будет и дальше осуществляться, но мы больше не будем предоставлять обновления или поддержку для этой функции. Перейдите на строки подключения, чтобы использовать новые возможности.

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

Скрипт загрузчика пакета SDK для JavaScript (Web)
Пакет npm

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

<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>

Сведения о добавлении или обновлении конфигурации скрипта загрузчика пакета SDK JavaScript (Web) см. в статье о настройке скрипта загрузки пакета SDK JavaScript (Web).

Установите пакет npm:

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

Совет

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

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

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

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

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

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

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

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

`name`

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

Если customDataPrefix в расширенной конфигурации не объявлен, id в качестве имени используется предоставленный в data-id качестве customEvent имени.
Если customDataPrefix объявлен, id указанный в объекте data-*-id, то есть он должен начинаться data с и заканчиваться idв качестве customEvent имени. Например, если элемент HTML с щелчком имеет атрибут "data-sample-id"="button1", то "button1" это customEvent имя.
data-id data-*-id Если атрибут не существует и useDefaultContentNameOrId если задано значениеtrue, в качестве customEvent имени используется html-атрибут id элемента или имя содержимого элемента. id Если оба и имя содержимого присутствуют, приоритет присваиваетсяid.
Если 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 ключ в customEvent customDimensions таблице в журналах, объявите тег 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 скриптами. Старые браузеры, такие как Internet Explorer и Safari, раскрывают атрибуты, которые они не понимают, если только они не начинаются.data-

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

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

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

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

IValueCallback

Имя.	Тип	По умолчанию.	Description
pageName	Function	Null	Функция для переопределения поведения записи по умолчанию `pageName` .
pageActionPageTags	Function	Null	Функция обратного вызова для расширения по умолчанию `pageTags` , собираемого `pageAction` во время события.
contentName	Function	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-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>

Для выбранного “not_specified”parentId элемента <Button> значение равно, так как в текущем элементе нет parentDataTag сведений и идентификатор родительского элемента не указан.

Пример 2

В примере 2 parentDataTag объявляется и data-parentid определяется. В этом примере показано, как собираются сведения о родительском идентификаторе.

export const clickPluginConfigWithParentDataTag = {
  dataTags : {
    customDataPrefix: "",
    parentDataTag: "group",
    ntDataTag: "ai-dnt",
    captureAllMetaDataContent:false,
    useDefaultContentNameOrId: false,
    autoCapture: true
  },
};

<div className="test2" data-group="buttongroup1" data-id="test2parent">
  <div>Test2</div>
  <div>with data-id, parentid, parent data-id defined</div>
  <Button data-id="test2id" data-parentid = "parentid2" variant="info" onClick={trackEvent}>Test2</Button>
</div>

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

Пример 3

В примере 3 parentDataTag объявляется и data-parentid data-*-parentid атрибут не определен. В этом примере показано, как объявление 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

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

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

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

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

Поделиться через

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

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

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

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

Настраиваемые аналитики

Пользовательские измерения

Добавление подключаемого модуля Click Analytics

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

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

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

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

`name`

`contentName`

`parentId` ключ

`customDataPrefix`

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

IValueCallback

ICustomDataTags

behaviorValidator

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

Передача строковых и числовых значений

Пример использования behaviorValidator

Пример приложения

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

Пример 1

Пример 2

Пример 3

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

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

Обратная связь

Дополнительные ресурсы

Поделиться через

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

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

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

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

Настраиваемые аналитики

Пользовательские измерения

Добавление подключаемого модуля Click Analytics

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

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

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

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

name

contentName

parentId ключ

customDataPrefix

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

IValueCallback

ICustomDataTags

behaviorValidator

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

Передача строковых и числовых значений

Пример использования behaviorValidator

Пример приложения

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

Пример 1

Пример 2

Пример 3

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

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

Обратная связь

Дополнительные ресурсы

`name`

`contentName`

`parentId` ключ

`customDataPrefix`

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