Habilitar o plug-in de Coleta Automática do Click Analytics

Artigo
10/15/2024

As extensões de recursos do SDK para JavaScript do Application Insights são recursos extras que podem ser adicionados ao SDK para 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 utiliza atributos data-* 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 de Análise de Cliques.

Quais dados o plug-in coleta?

As principais propriedades a seguir são capturadas por padrão quando o plug-in está habilitado.

Propriedades personalizadas do evento

Nome	Descrição	Amostra
Nome	O nome do evento personalizado. Para obter mais informações sobre como um nome é preenchido, consulte Coluna Nome.	Sobre
itemType	Tipo de evento.	customEvent
sdkVersion	Versão do SDK do Application Insights junto com o plug-in de clique.	JavaScript:2_ClickPlugin2

Dimensões Personalizadas

Nome	Descrição	Amostra
actionType	Tipo de ação que causou o evento de clique. Pode ser um clique esquerdo ou direito.	CL
baseTypeSource	Origem do tipo base do evento personalizado.	ClickEvent
clickCoordinates	Coordena onde o evento de clique é disparado.	659X47
conteúdo	Espaço reservado para armazenar atributos e valores `data-*` adicionais.	[{sample1:value1, sample2:value2}]
pageName	Título da página em que o evento de clique é disparado.	Titulo do Exemplo
parentId	ID ou nome do elemento pai. Para obter mais informações sobre como um parentId é preenchido, consulte parentId key.	navbarContainer

Medidas personalizadas

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

Adicionar o plug-in do Click Analytics

Os usuários podem configurar o plug-in Coleção Automática do Click Analytics por meio do Script do Carregador do SDK do JavaScript (Web) ou npm e, opcionalmente, adicionar uma extensão de estrutura.

Observação

Em 31 de março de 31, 2025, o suporte à ingestão de chave de instrumentação será encerrado. A ingestão de chave de instrumentação continuará funcionando, mas não forneceremos mais atualizações ou suporte para o recurso. Transição para cadeias de conexão para aproveitar as novas funcionalidades.

Adicionar o código

Script do Carregador do SDK do JavaScript (Web)
Pacote npm

Cole o Script do Carregador de SDK do JavaScript (Web) 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 as configurações do Script do Carregador do SDK do JavaScript (Web), consulte configuração do Script do Carregador do SDK do JavaScript (Web).

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

Dica

Se você quiser adicionar uma extensão de estrutura ou já tiver adicionado uma, consulte os exemplos de código do React, React Native e Angular para saber como adicionar o plug-in do 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 será necessário definir o contexto do usuário autenticado para ver os dados de telemetria. Para obter mais informações, consulte a Documentação da pasta de trabalho HEART.

Usar o plug-in

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

Armazenamento de dados de telemetria

Os dados de telemetria gerados com base nos eventos de clique são armazenados como customEvents na seção > Application Insights > do portal do Azure.

`name`

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

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

`contentName`

Se você tiver definido a função contentNamede retorno de chamada na configuração avançada, a coluna contentName 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 (texto). Se o plug-in não conseguir encontrar esse atributo, ele tentará coletar o valor do seu atributo innerHtml.
Para um elemento HTML <img> ou <area> clicado, o plug-in coleta o valor do seu atributo alt.
Para todos os outros elementos HTML clicados, contentName é preenchido com base nas seguintes regras, que estão listadas em ordem de precedência:
1. O valor do atributo value do elemento
2. O valor do atributo name do elemento
3. O valor do atributo alt do elemento
4. O valor do atributo innerText do elemento
5. O valor do atributo id do elemento

chave `parentId`

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

O valor de parentId é buscado 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 mais próximo do elemento clicado como parentId.
Se data-*-id e id estão definidos, a precedência é dada para data-*-id.
Se parentDataTag for definido, mas o plug-in não puder encontrar essa marca 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 atributo data-{parentDataTag} 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 informação parentId estiver incluída no elemento atual, nenhum valor parentId será coletado.
Se parentDataTag for definido, useDefaultContentNameOrId será definido como false e apenas um atributo id será definido dentro do elemento mais próximo do elemento clicado, o parentId preencherá como "not_specified". Para buscar o valor de id, defina useDefaultContentNameOrId como true.

Quando você define o atributo data-parentid ou 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 atributo data-parentid ou data-*-parentid, a precedência será dada a data-parentid ou data-*-parentid.

Se o aviso de telemetria “Clique em linhas de evento sem valor de parentId”, consulte Corrigir o aviso “Clique em linhas de evento sem valor de parentId”.

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

Cuidado

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

`customDataPrefix`

A opção customDataPrefix na configuração avançada fornece ao usuário a capacidade de configurar um prefixo de atributo de dados para ajudar a identificar em que local o coração está localizado na 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 atributos globais data-* são chamados atributos de dados personalizados, que permitem que informações proprietárias sejam trocadas entre o HTML e a representação do DOM dele por scripts. Navegadores mais antigos, como o Internet Explorer e o Safari, removem atributos que não entendem, a menos que comecem com data-.

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

O nome não deve começar com "xml", seja qual for a maiúscula e minúscula usada 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	Padrão	Descrição
autoCapture	Booliano	verdadeiro	Configuração de captura automática.
retorno de chamada	IValueCallback	Nulo	Configuração de retornos de chamada.
pageTags	Objeto	Null	Marcas da página.
dataTags	ICustomDataTags	Nulo	Marcas de dados personalizadas fornecidas para substituir as marcas padrão usadas para capturar dados de clique.
urlCollectHash	Booliano	Falso	Habilita o registro em log de valores após um caractere "#" da URL.
urlCollectQuery	Booliano	Falso	Habilita o registro em log da cadeia de caracteres de consulta da URL.
behaviorValidator	Função	Nulo	Função de retorno de chamada a ser usada para a validação do valor `data-*-bhvr`. Para obter mais informações, confira a seção behaviorValidator.
defaultRightClickBhvr	Cadeia de caracteres (ou) número	''	Valor do comportamento padrão quando um evento de clique com o botão direito do mouse ocorreu. Esse valor será substituído se o elemento tiver o atributo `data-*-bhvr`.
dropInvalidEvents	Booliano	Falso	Sinalizador para remover eventos que não têm dados de clique úteis.

IValueCallback

Nome	Tipo	Padrão	Descrição
pageName	Função	Nulo	Função para substituir o comportamento de captura `pageName` padrão.
pageActionPageTags	Função	Nulo	Uma função de retorno de chamada para aumentar o padrão `pageTags` coletado durante um evento `pageAction`.
contentName	Função	Nulo	Uma função de retorno de chamada para preencher o `contentName` personalizado.

ICustomDataTags

Nome	Tipo	Padrão	Marca padrão para ser usada no HTML	Descrição
useDefaultContentNameOrId	Booliano	Falso	N/D	Se `true`, coletará o atributo HTML padrão `id` para `contentName` quando um elemento específico não for marcado com o prefixo de dados padrão ou `customDataPrefix`. Caso contrário, o atributo HTML padrão `id` para `contentName` não será coletado.
customDataPrefix	Cadeia de caracteres	`data-`	`data-*`	Nome e valor do conteúdo da captura automática dos elementos marcados com o prefixo fornecido. Por exemplo, `data-*-id`, `data-<yourcustomattribute>` podem ser usados nas marcas HTML.
aiBlobAttributeTag	Cadeia de caracteres	`ai-blob`	`data-ai-blob`	O plug-in suporta um atributo blob JSON em vez de atributos individuais `data-*`.
metaDataPrefix	Cadeia de caracteres	Null	N/D	Captura automática do nome e do conteúdo do metaelemento HTML Head com o prefixo fornecido quando capturado. Por exemplo, `custom-` pode ser usado na marca meta HTML.
captureAllMetaDataContent	Booliano	Falso	N/D	Captura automaticamente todos os nomes e o conteúdo do elemento meta do cabeçalho HTML. O padrão é false. Se ativado, substitui o fornecido `metaDataPrefix`.
parentDataTag	Cadeia de caracteres	Null	N/D	Busca o `parentId` nos logs quando `data-parentid` ou `data-*-parentid` não é encontrado. Para obter eficiência, para de percorrer o DOM para capturar o nome do conteúdo e o valor dos elementos quando o atributo `data-{parentDataTag}` ou `customDataPrefix-{parentDataTag}` é encontrado. Para obter mais informações, consulte parentId key.
dntDataTag	Cadeia de caracteres	`ai-dnt`	`data-ai-dnt`	O plug-in para capturar dados de telemetria ignora os elementos HTML com esse atributo.

behaviorValidator

As funções behaviorValidator 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 pela sua empresa. Não é preciso nem esperado que a maioria dos Azure Monitor clientes 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 behaviorValidator diferentes estã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 utiliza essa função de validação enquanto extrai os comportamentos das marcas 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 cadeia de caracteres.
BehaviorMapValidator	Use essa função de retorno de chamada se a estrutura de dados de seu comportamento for um dicionário.
BehaviorEnumValidator	Use esta função de retorno de chamada se a estrutura de dados de seu comportamento for uma Enumeração.

Passando valores de cadeia de caracteres versus numéricos

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

Uso de exemplo com behaviorValidator

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

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 Coleção automática do Click Analytics habilitado para saber como implementar propriedades de evento personalizadas, como Name e parentid e comportamento e conteúdo personalizados. Consulte o leiame do aplicativo de exemplo para obter informações sobre onde encontrar dados de clique.

Exemplos de `parentId` chave

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

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

Exemplo 1

No exemplo 1, o parentDataTag não é declarado e data-parentid ou data-*-parentid não é definido em nenhum elemento. Esse 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 parentId é “not_specified”, porque nenhum detalhe parentDataTag está definido e nenhuma ID de elemento pai é fornecida dentro do elemento atual.

Exemplo 2

No exemplo 2, parentDataTag é declarado e data-parentid é definido. Esse 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 clicado <Button>, o valor de parentId é parentid2. Embora parentDataTag seja declarado, o data-parentid é definido diretamente dentro do elemento. Portanto, esse valor tem precedência sobre todas as outras IDs pai ou detalhes de ID definidos em seus elementos pai.

Exemplo 3

No exemplo 3, parentDataTag é declarado e o atributo data-parentid ou data-*-parentid não é definido. Esse exemplo mostra como declarar parentDataTag pode ser útil para coletar um valor para parentId em casos em que 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, a ID de seu pai mais próximo será usada quando os detalhes da ID pai não forem fornecidos diretamente dentro do elemento atual. Como data-group="buttongroup1" está definido, o plug-in localiza o parentId com mais eficiência.

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

Solução de problemas

Confira o artigo de solução de problemas dedicado.

Próximas etapas

Confirmar que os dados estão fluindo.
Consulte a documentação sobre como utilizar a pasta de trabalho HEART para obter análises de produtos expandidas.
Consulte o repositório do GitHub e o pacote npm para o plug-in de Coleção Automática do Clique Analytics.
Use a Análise de Eventos na experiência de Uso para analisar os principais cliques e dividir pelas dimensões disponíveis.
Consulte Log Analytics se você 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 dos dados de cliques.

Compartilhar via

Habilitar o plug-in de Coleta Automática do Click Analytics

Pré-requisitos

Quais dados o plug-in coleta?

Propriedades personalizadas do evento

Dimensões Personalizadas

Medidas personalizadas

Adicionar o plug-in do Click Analytics

Adicionar o código

(Opcional) Definir o contexto do usuário autenticado

Usar o plug-in

Armazenamento de dados de telemetria

`name`

`contentName`

chave `parentId`

`customDataPrefix`

Adicionar configuração avançada

IValueCallback

ICustomDataTags

behaviorValidator

Funções de retorno de chamada

Passando valores de cadeia de caracteres versus numéricos

Uso de exemplo com behaviorValidator

Aplicativo de exemplo

Exemplos de `parentId` chave

Exemplo 1

Exemplo 2

Exemplo 3

Solução de problemas

Próximas etapas

Comentários

Recursos adicionais

Compartilhar via

Habilitar o plug-in de Coleta Automática do Click Analytics

Pré-requisitos

Quais dados o plug-in coleta?

Propriedades personalizadas do evento

Dimensões Personalizadas

Medidas personalizadas

Adicionar o plug-in do Click Analytics

Adicionar o código

(Opcional) Definir o contexto do usuário autenticado

Usar o plug-in

Armazenamento de dados de telemetria

name

contentName

chave parentId

customDataPrefix

Adicionar configuração avançada

IValueCallback

ICustomDataTags

behaviorValidator

Funções de retorno de chamada

Passando valores de cadeia de caracteres versus numéricos

Uso de exemplo com behaviorValidator

Aplicativo de exemplo

Exemplos de parentId chave

Exemplo 1

Exemplo 2

Exemplo 3

Solução de problemas

Próximas etapas

Comentários

Recursos adicionais

`name`

`contentName`

chave `parentId`

`customDataPrefix`

Exemplos de `parentId` chave