Ativar o plug-in de recolha automática do Click Analytics

  • Artigo

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

Name Description 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 junto com o plug-in de clique. JavaScript:2_ClickPlugin2

Dimensões personalizadas

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

Name Description 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.

Adicionar o código

  1. 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(i)}var S,u,D,t,n,i,C=window,x=document,w=C.location,I="script",b="ingestionendpoint",E="disableExceptionTracking",A="ai.device.";"instrumentationKey"[S="toLowerCase"](),u="crossOrigin",D="POST",t="appInsightsSDK",n=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=n),i=C[n]||function(l){var d=!1,g=!1,f={initialize:!0,queue:[],sv:"7",version:2,config:l};function m(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[A+"id"]=i[S](),n[A+"type"]=i,n["ai.operation.name"]=w&&w.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(f.sv||f.version),{time:(i=new Date).getUTCFullYear()+"-"+a(1+i.getUTCMonth())+"-"+a(i.getUTCDate())+"T"+a(i.getUTCHours())+":"+a(i.getUTCMinutes())+":"+a(i.getUTCSeconds())+"."+(i.getUTCMilliseconds()/1e3).toFixed(3).slice(2,5)+"Z",iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}},ver:4,seq:"1",aiDataContract:undefined}}var h=-1,v=0,y=["js.monitor.azure.com","js.cdn.applicationinsights.io","js.cdn.monitor.azure.com","js0.cdn.applicationinsights.io","js0.cdn.monitor.azure.com","js2.cdn.applicationinsights.io","js2.cdn.monitor.azure.com","az416426.vo.msecnd.net"],k=l.url||cfg.src;if(k){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~k.indexOf("ai.3")&&(k=k.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<y.length;e++)if(0<k.indexOf(y[e])){h=e;break}var i=function(e){var a,t,n,i,o,r,s,c,p,u;f.queue=[],g||(0<=h&&v+1<y.length?(a=(h+v+1)%y.length,T(k.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+y[a]+i})),v+=1):(d=g=!0,o=k,c=(p=function(){var e,t={},n=l.connectionString;if(n)for(var i=n.split(";"),a=0;a<i.length;a++){var o=i[a].split("=");2===o.length&&(t[o[0][S]()]=o[1])}return t[b]||(e=(n=t.endpointsuffix)?t.location:null,t[b]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||l.instrumentationKey||"",p=(p=p[b])?p+"/v2/track":l.endpointUrl,(u=[]).push((t="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",n=o,r=p,(s=(i=m(c,"Exception")).data).baseType="ExceptionData",s.baseData.exceptions=[{typeName:"SDKLoadFailed",message:t.replace(/\./g,"-"),hasFullStack:!1,stack:t+"\nSnippet failed to load ["+n+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(w&&w.pathname||"_unknown_")+"\nEndpoint: "+r,parsedStack:[]}],i)),u.push((s=o,t=p,(r=(n=m(c,"Message")).data).baseType="MessageData",(i=r.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+s+")").replace(/\"/g,"")+'"',i.properties={endpoint:t},n)),o=u,c=p,JSON&&((r=C.fetch)&&!cfg.useXhr?r(c,{method:D,body:JSON.stringify(o),mode:"cors"}):XMLHttpRequest&&((s=new XMLHttpRequest).open(D,c),s.setRequestHeader("Content-type","application/json"),s.send(JSON.stringify(o))))))},a=function(e,t){g||setTimeout(function(){!t&&f.core||i()},500),d=!1},T=function(e){var n=x.createElement(I),e=(n.src=e,cfg[u]);return!e&&""!==e||"undefined"==n[u]||(n[u]=e),n.onload=a,n.onerror=i,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||a(0,t)},cfg.ld&&cfg.ld<0?x.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){x.getElementsByTagName(I)[0].parentNode.appendChild(n)},cfg.ld||0),n};T(k)}try{f.cookie=x.cookie}catch(p){}function t(e){for(;e.length;)!function(t){f[t]=function(){var e=arguments;d||f.queue.push(function(){f[t].apply(f,e)})}}(e.pop())}var r,s,n="track",o="TrackPage",c="TrackEvent",n=(t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+o,"stop"+o,"start"+c,"stop"+c,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),f.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(l.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==l[E]&&!0!==n[E]&&(t(["_"+(r="onerror")]),s=C[r],C[r]=function(e,t,n,i,a){var o=s&&s(e,t,n,i,a);return!0!==o&&f["_"+r]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},l.autoExceptionInstrumented=!0),f}(cfg.cfg),(C[n]=i).queue&&0===i.queue.length?(i.queue.push(e),i.trackPageView({})):e();})({
 				src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
 				crossOrigin: "anonymous",
 				cfg: configObj // configObj is defined above.
 		});
 </script>

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

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 do usuário autenticado para ver os 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:

  1. Se customDataPrefix não for declarado na configuração avançada, o fornecido no data-id é usado como o idcustomEvent nome.
  2. Se customDataPrefix for declarado, o fornecido no , o data-*-idid que significa que deve começar com e terminar com dataid, é 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.
  3. Se o atributo or data-*-id não existir e se useDefaultContentNameOrId estiver definido como , o atributo id HTML do elemento clicado ou o nome do conteúdo do elemento será usado como trueo data-idcustomEvent nome. Se ambos id e o nome do conteúdo estiverem presentes, a precedência é dada a id.
  4. 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 função de retorno de chamada na configuração avançada definida, a contentNamecontentNamecoluna 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, é preenchido com base nas seguintes regras, contentName 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 parentIdcustomEvent 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 , o plug-in busca o parentDataTagvalor 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 atributo ou customDataPrefix-{parentDataTag} para reduzir o data-{parentDataTag} 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 estiver definido, for definido como , e somente um id atributo for definido dentro do elemento mais próximo do elemento clicado, useDefaultContentNameOrId o parentId preencherá como false"not_specified". Para obter o valor de id, defina useDefaultContentNameOrId como true.

Quando você define o atributo ordata-*-parentid, o data-parentid 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 Type Predefinido Descrição
captura automática Boolean True Configuração de captura automática.
retorno de chamada IValueCallback Nulo Configuração de retornos de chamada.
pageTags Objeto 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 Type Predefinido Descrição
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 Type Predefinição Tag padrão para usar em HTML Descrição
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-*-iddata-<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-parentiddata-*-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.

Name Description
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 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 clicado, o valor de é , porque nenhum detalhe é definido e nenhum parentDataTag id de parentId elemento pai é “not_specified”fornecido dentro do elemento <Button> 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 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 é , porque parentDataTag é test6parentdeclaradoparentId. Esta 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 dentro do elemento atual. Com o definido, o plug-in encontra o data-group="buttongroup1"parentId mais eficiente.

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

Resolução de problemas

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

Próximos passos