Ativar o plug-in Click Analytics Auto-Collection

Artigo
09/13/2024

As extensões de recursos do SDK JavaScript do Application Insights são recursos extras que podem ser adicionados ao SDK JavaScript do Application Insights para aprimorar sua funcionalidade.

Neste artigo, abordamos o plug-in Click Analytics, que rastreia automaticamente eventos de clique em páginas da Web e usa data-* atributos ou tags personalizadas em elementos HTML para preencher a telemetria de eventos.

Pré-requisitos

Instale o SDK do JavaScript antes de ativar o plug-in Click Analytics.

Que dados são recolhidos pelo plug-in?

As seguintes propriedades de chave são capturadas por padrão quando o plug-in está habilitado.

Propriedades personalizadas do evento

Nome	Descrição	Exemplo
Nome	O nome do evento personalizado. Para obter mais informações sobre como um nome é preenchido, consulte a coluna Nome.	Sobre
Tipo de item	Tipo de evento.	customEvent
sdkVersion [en]	Versão do SDK do Application Insights, juntamente com o plug-in de clique.	JavaScript:2_ClickPlugin2

Dimensões personalizadas

Nome	Descrição	Exemplo
actionType	Tipo de ação que causou o evento click. Pode ser um clique esquerdo ou direito.	CL
baseTypeSource	Origem do tipo base do evento personalizado.	ClickEvent
clickCoordenadas	Coordenadas onde o evento click é acionado.	659X47
content	Espaço reservado para armazenar atributos e valores extras `data-*` .	[{amostra1:valor1, amostra2:valor2}]
nome_página	Título da página onde o evento click é acionado.	Título da amostra
parentId	ID ou nome do elemento pai. Para obter mais informações sobre como um parentId é preenchido, consulte chave parentId.	navbarContainer

Medidas personalizadas

Nome	Descrição	Exemplo
timeToAction	Tempo gasto em milissegundos para o usuário clicar no elemento desde o carregamento inicial da página.	87407

Adicionar o plug-in Click Analytics

Os usuários podem configurar o plug-in Click Analytics Auto-Collection via JavaScript (Web), SDK Loader, Script ou npm e, opcionalmente, adicionar uma extensão de estrutura.

Nota

A 31 de março de 2025, o suporte da ingestão de chaves de instrumentação terminará. A ingestão de chaves de instrumentação continuará a funcionar, mas não forneceremos mais atualizações ou suporte para o recurso. Transição para cadeias de conexão para aproveitar os novos recursos.

Cole o JavaScript (Web) SDK Loader Script na parte superior de cada página para a qual você deseja habilitar o 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>

Para adicionar ou atualizar a configuração do JavaScript (Web) SDK Loader Script, consulte JavaScript (Web) SDK Loader Script configuration.

Instale o pacote 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();

Gorjeta

Se você quiser adicionar uma extensão de estrutura ou já tiver adicionado uma, consulte os exemplos de código React, React Native e Angular para saber como adicionar o plug-in Click Analytics.

(Opcional) Definir o contexto do usuário autenticado

Se você quiser definir essa configuração opcional, consulte Definir o contexto do usuário autenticado.

Se você estiver usando uma pasta de trabalho HEART com o plug-in Click Analytics, não precisará definir o contexto de usuário autenticado para ver dados de telemetria. Para obter mais informações, consulte a documentação da pasta de trabalho HEART.

Use o plug-in

As seções a seguir descrevem como usar o plug-in.

Armazenamento de dados de telemetria

Os dados de telemetria gerados a partir dos eventos de clique são armazenados como customEvents na seção Logs do Application Insights > do portal > do Azure.

`name`

A name coluna do customEvent é preenchida com base nas seguintes regras:

Se customDataPrefix não for declarado na configuração avançada, o id fornecido no data-id é usado como o customEvent nome.
Se customDataPrefix for declarado, o id fornecido no , o data-*-idque significa que deve começar com data e terminar com id, é usado como o customEvent nome. Por exemplo, se o elemento HTML clicado tiver o atributo "data-sample-id"="button1", então "button1" é o customEvent nome.
Se o data-id atributo or data-*-id não existir e se useDefaultContentNameOrId estiver definido como true, o atributo id HTML do elemento clicado ou o nome do conteúdo do elemento será usado como o customEvent nome. Se ambos id e o nome do conteúdo estiverem presentes, a precedência é dada a id.
Se useDefaultContentNameOrId for false, o customEvent nome é "not_specified". Recomendamos a configuração useDefaultContentNameOrId como true para gerar dados significativos.

`contentName`

Se você tiver a contentName função de retorno de chamada na configuração avançada definida, a contentName coluna do customEvent será preenchida com base nas seguintes regras:

Para um elemento HTML <a> clicado, o plug-in tenta coletar o valor de seu atributo innerText (text). Se o plug-in não conseguir encontrar esse atributo, ele tentará coletar o valor de seu atributo innerHtml.
Para um HTML <img> ou <area> elemento clicado, o plugin coleta o valor de seu alt atributo.
Para todos os outros elementos HTML clicados, contentName é preenchido com base nas seguintes regras, listadas em ordem de precedência:
1. O valor do value atributo para o elemento
2. O valor do name atributo para o elemento
3. O valor do alt atributo para o elemento
4. O valor do atributo innerText para o elemento
5. O valor do id atributo para o elemento

`parentId` chave

Para preencher a parentId customEvent chave dentro customDimensions da tabela nos logs, declare a tag parentDataTag ou defina o data-parentid atributo.

O valor para parentId é obtido com base nas seguintes regras:

Quando você declara o parentDataTag, o plug-in busca o valor de id ou data-*-id definido dentro do elemento que está mais próximo do elemento clicado como parentId.
Se ambos data-*-id forem id definidos, é dada precedência a data-*-id.
Se parentDataTag estiver definido, mas o plug-in não conseguir encontrar essa tag na árvore DOM, o plug-in usará o id ou data-*-id definido dentro do elemento mais próximo do elemento clicado como parentId. No entanto, recomendamos definir o data-{parentDataTag} atributo ou customDataPrefix-{parentDataTag} para reduzir o número de loops necessários para localizar parentId. Declarar parentDataTag é útil quando você precisa usar o plug-in com opções personalizadas.
Se não parentDataTag for definido e nenhuma parentId informação for incluída no elemento atual, nenhum parentId valor será coletado.
Se parentDataTag for definido, useDefaultContentNameOrId for definido como false, e somente um id atributo for definido dentro do elemento mais próximo do elemento clicado, o parentId preencherá como "not_specified". Para obter o valor de id, defina useDefaultContentNameOrId como true.

Quando você define o data-parentid atributo or data-*-parentid , o plug-in busca a instância desse atributo mais próxima do elemento clicado, inclusive dentro do elemento clicado, se aplicável.

Se você declarar parentDataTag e definir o data-parentid ou data-*-parentid atributo, a precedência é dada a data-parentid ou data-*-parentid.

Se o aviso de telemetria "Click Event rows with no parentId value" for exibido, consulte Corrigir o aviso "Click Event rows with no parentId value".

Para obter exemplos mostrando qual valor é buscado como o parentId para diferentes configurações, consulte Exemplos de parentid chave.

Atenção

Uma vez parentDataTag incluído em qualquer elemento HTML em seu aplicativo , o SDK começa a procurar tags pai em todo o aplicativo e não apenas no elemento HTML onde você o usou.
Se você estiver usando a pasta de trabalho HEART com o plug-in Click Analytics, para que os eventos HEART sejam registrados ou detetados, a tag parentDataTag deverá ser declarada em todas as outras partes do aplicativo de um usuário final.

`customDataPrefix`

A customDataPrefix opção na configuração avançada fornece ao usuário a capacidade de configurar um prefixo de atributo de dados para ajudar a identificar onde o coração está localizado dentro da base de código do indivíduo. O prefixo deve ser sempre minúsculo e começar com data-. Por exemplo:

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

Em HTML, os data-* atributos globais são chamados de atributos de dados personalizados que permitem que informações proprietárias sejam trocadas entre o HTML e sua representação DOM por scripts. Navegadores mais antigos, como o Internet Explorer e o Safari, soltam atributos que não entendem, a menos que comecem com data-.

Você pode substituir o asterisco (*) por data-* qualquer nome seguindo a regra de produção de nomes XML com as seguintes restrições.

O nome não deve começar com "xml", seja qual for o caso usado para as letras.
O nome não deve conter ponto e vírgula (U+003A).
O nome não deve conter letras maiúsculas.

Adicionar configuração avançada

Nome	Tipo	Predefinido	Description
captura automática	Boolean	True	Configuração de captura automática.
retorno de chamada	IValueCallback	Nulo	Configuração de retornos de chamada.
pageTags	Object	Nulo	Tags de página.
dataTags	ICustomDataTags	Nulo	Tags de dados personalizadas fornecidas para substituir as tags padrão usadas para capturar dados de clique.
urlCollectHash	Booleano	False	Permite o registro de valores após um caractere "#" da URL.
urlCollectQuery	Booleano	False	Habilita o registro em log da cadeia de caracteres de consulta da URL.
behaviorValidator	Function	Nulo	Função de retorno de chamada a ser usada para a validação do `data-*-bhvr` valor. Para obter mais informações, consulte a seção behaviorValidator.
padrãoRightClickBhvr	Número da cadeia de caracteres (ou)	''	Valor de comportamento padrão quando ocorre um evento de clique com o botão direito do mouse. Esse valor será substituído se o elemento tiver o `data-*-bhvr` atributo.
dropInvalidEvents	Booleano	False	Sinalize para descartar eventos que não tenham dados de clique úteis.

IValueCallback

Nome	Tipo	Predefinido	Description
nome_página	Function	Nulo	Função para substituir o comportamento de captura padrão `pageName` .
pageActionPageTags	Function	Nulo	Uma função de retorno de chamada para aumentar o padrão `pageTags` coletado durante um `pageAction` evento.
contentName	Function	Nulo	Uma função de retorno de chamada para preencher o arquivo `contentName`.

ICustomDataTags

Nome	Tipo	Predefinido	Tag padrão para usar em HTML	Description
useDefaultContentNameOrId	Booleano	False	N/A	If `true`, coleta o atributo `id` HTML padrão para `contentName` quando um elemento específico não é marcado com prefixo de dados padrão ou `customDataPrefix`. Caso contrário, o atributo `id` HTML padrão para `contentName` não será coletado.
customDataPrefix	String	`data-`	`data-*`	Captura automática do nome do conteúdo e valor dos elementos marcados com o prefixo fornecido. Por exemplo, `data-*-id`, `data-<yourcustomattribute>` pode ser usado nas tags HTML.
aiBlobAttributeTag	String	`ai-blob`	`data-ai-blob`	O plug-in suporta um atributo de blob JSON em vez de atributos individuais `data-*` .
metaDataPrefix	String	Nulo	N/A	Captura automática do nome do elemento meta do HTML Head e do conteúdo com o prefixo fornecido quando capturado. Por exemplo, `custom-` pode ser usado na meta tag HTML.
captureAllMetaDataContent	Booleano	False	N/A	Capture automaticamente todos os nomes e conteúdo de metaelementos do HTML Head. A predefinição é falsa. Se habilitado, ele substitui o fornecido `metaDataPrefix`.
parentDataTag	String	Nulo	N/A	Busca o `parentId` nos logs quando `data-parentid` `data-*-parentid` ou não é encontrado. Para maior eficiência, para de percorrer o DOM para capturar o nome do conteúdo e o valor dos elementos quando `data-{parentDataTag}` o atributo é `customDataPrefix-{parentDataTag}` encontrado. Para obter mais informações, consulte chave parentId.
dntDataTag	String	`ai-dnt`	`data-ai-dnt`	O plug-in para capturar dados de telemetria ignora elementos HTML com esse atributo.

behaviorValidator

As behaviorValidator funções verificam automaticamente se os comportamentos marcados no código estão em conformidade com uma lista predefinida. As funções garantem que os comportamentos marcados sejam consistentes com a taxonomia estabelecida da sua empresa. Não é necessário ou esperado que a maioria dos clientes do Azure Monitor use essas funções, mas elas estão disponíveis para cenários avançados. As funções behaviorValidator podem ajudar com práticas mais acessíveis.

Os comportamentos aparecem no campo customDimensions dentro da tabela CustomEvents.

Funções de retorno de chamada

Três funções de retorno de chamada diferentes behaviorValidator são expostas como parte desta extensão. Você também pode usar suas próprias funções de retorno de chamada se as funções expostas não resolverem sua necessidade. A intenção é trazer a estrutura de dados do seu próprio comportamento. O plug-in usa essa função de validador ao extrair os comportamentos das tags de dados.

Nome	Descrição
BehaviorValueValidator	Use essa função de retorno de chamada se a estrutura de dados do seu comportamento for uma matriz de cadeias de caracteres.
BehaviorMapValidator	Use essa função de retorno de chamada se a estrutura de dados do seu comportamento for um dicionário.
BehaviorEnumValidator	Use essa função de retorno de chamada se a estrutura de dados do seu comportamento for um Enum.

Passagem em string vs. valores numéricos

Para reduzir os bytes passados, passe o valor numérico em vez da cadeia de caracteres de texto completo. Se o custo não for um problema, você pode passar a cadeia de caracteres de texto completo (por exemplo, NAVIGATIONBACK).

Exemplo de uso com behaviorValidator

Aqui está um exemplo de como um validador de mapa de comportamento pode parecer. O seu aspeto pode ser diferente, dependendo da taxonomia da sua organização e dos eventos que recolhe.

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

Aplicativo de exemplo

Consulte um aplicativo Web simples com o plug-in de coleta automática do Click Analytics habilitado para saber como implementar propriedades de evento personalizadas, como Name e parentid comportamento e conteúdo personalizados. Consulte o Leiame do aplicativo de exemplo para obter informações sobre onde encontrar dados de cliques.

Exemplos de `parentId` chaves

Os exemplos a seguir mostram qual valor é buscado como o parentId para diferentes configurações.

Os exemplos mostram como se parentDataTag é definido, mas o plug-in não consegue encontrar essa tag na árvore DOM, o plug-in usa o id elemento pai mais próximo.

Exemplo 1

No exemplo 1, o parentDataTag não é declarado e data-parentid ou data-*-parentid não está definido em nenhum elemento. Este exemplo mostra uma configuração em que um valor para parentId não é coletado.

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>

Para o elemento <Button> clicado, o valor de é “not_specified”, porque nenhum parentDataTag detalhe é definido e nenhum ID de parentId elemento pai é fornecido dentro do elemento atual.

Exemplo 2

No exemplo 2, parentDataTag é declarado e data-parentid é definido. Este exemplo mostra como os detalhes da ID pai são coletados.

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>

Para o elemento <Button>clicado , o valor de parentId é parentid2. Mesmo que parentDataTag seja declarado, o data-parentid é diretamente definido dentro do elemento . Portanto, esse valor tem precedência sobre todos os outros IDs pai ou detalhes de ID definidos em seus elementos pai.

Exemplo 3

No exemplo 3, parentDataTag é declarado e o data-parentid atributo ou data-*-parentid não está definido. Este exemplo mostra como a parentDataTag declaração pode ser útil para coletar um valor para casos em parentId que os elementos dinâmicos não têm um id ou 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>

Para o elemento <Button>clicado , o valor de parentId é test6parent, porque parentDataTag é declarado. Essa declaração permite que o plug-in percorra a árvore de elementos atual e, portanto, o ID de seu pai mais próximo será usado quando os detalhes do ID pai não forem fornecidos diretamente no elemento atual. Com o data-group="buttongroup1" definido, o plug-in encontra o parentId mais eficiente.

Se você remover o data-group="buttongroup1" atributo, o valor de parentId ainda test6parenté , porque parentDataTag ainda é declarado.

Resolução de Problemas

Consulte o artigo dedicado à resolução de problemas.

Próximos passos

Confirme se os dados estão fluindo.
Consulte a documentação sobre a utilização da pasta de trabalho HEART para análise expandida do produto.
Consulte o repositório GitHub e o pacote npm para obter o plug-in Click Analytics Autocollection.
Use a Análise de Eventos na experiência de Uso para analisar os principais cliques e fatias por dimensões disponíveis.
Consulte Log Analytics se não estiver familiarizado com o processo de escrever uma consulta.
Crie uma pasta de trabalho ou exporte para o Power BI para criar visualizações personalizadas de dados de clique.

Partilhar via

Ativar o plug-in Click Analytics Auto-Collection

Pré-requisitos

Que dados são recolhidos pelo plug-in?

Propriedades personalizadas do evento

Dimensões personalizadas

Medidas personalizadas

Adicionar o plug-in Click Analytics

Adicionar o código

(Opcional) Definir o contexto do usuário autenticado

Use o plug-in

Armazenamento de dados de telemetria

`name`

`contentName`

`parentId` chave

`customDataPrefix`

Adicionar configuração avançada

IValueCallback

ICustomDataTags

behaviorValidator

Funções de retorno de chamada

Passagem em string vs. valores numéricos

Exemplo de uso com behaviorValidator

Aplicativo de exemplo

Exemplos de `parentId` chaves

Exemplo 1

Exemplo 2

Exemplo 3

Resolução de Problemas

Próximos passos

Comentários

Recursos adicionais

Partilhar via

Ativar o plug-in Click Analytics Auto-Collection

Pré-requisitos

Que dados são recolhidos pelo plug-in?

Propriedades personalizadas do evento

Dimensões personalizadas

Medidas personalizadas

Adicionar o plug-in Click Analytics

Adicionar o código

(Opcional) Definir o contexto do usuário autenticado

Use o plug-in

Armazenamento de dados de telemetria

name

contentName

parentId chave

customDataPrefix

Adicionar configuração avançada

IValueCallback

ICustomDataTags

behaviorValidator

Funções de retorno de chamada

Passagem em string vs. valores numéricos

Exemplo de uso com behaviorValidator

Aplicativo de exemplo

Exemplos de parentId chaves

Exemplo 1

Exemplo 2

Exemplo 3

Resolução de Problemas

Próximos passos

Comentários

Recursos adicionais

`name`

`contentName`

`parentId` chave

`customDataPrefix`

Exemplos de `parentId` chaves