Partilhar via

Ativar o plug-in Click Analytics Recolha Automática

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. evento personalizado
Versão do SDK Versão do SDK do Application Insights, juntamente com o plug-in de cliques. JavaScript:2_ClickPlugin2

Dimensões personalizadas

Nome Descrição Exemplo
tipo de ação Tipo de ação que causou o evento click. Pode ser um clique esquerdo ou direito. CL
baseTypeSource Tipo base de origem do evento personalizado. ClickEvent
clicarCoordenadas Coordenadas onde o evento click é acionado. 659X47
conteúdo 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 utilizadores podem configurar o plug-in Click Analytics Auto-Collection via o Script do Carregador do SDK JavaScript (Web) ou através do npm e, opcionalmente, adicionar uma extensão da framework.

Nota

A 31 de março de 2025, terminará o suporte para a ingestão de chaves de instrumentação. 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 as novas capacidades.

Adicionar o código

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",
    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.

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 a extensão

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 id fornecido no data-id é usado como o customEvent nome.
  2. Se customDataPrefix for declarado, o id fornecido no data-*-id, que significa que deve começar com data e terminar com id, é usado como nome customEvent. Por exemplo, se o elemento HTML clicado tiver o atributo "data-sample-id"="button1", então "button1" é o customEvent nome.
  3. 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á usado como nome customEvent. Se ambos id e o nome do conteúdo estiverem presentes, a precedência é dada a id.
  4. Se useDefaultContentNameOrId for false, o nome customEvent é o "not_specified". Recomendamos a configuração useDefaultContentNameOrId como true para gerar dados significativos.

contentName

Se tiveres a contentName função de callback definida na configuração avançada, a contentName coluna do customEvent é preenchida com base nas seguintes regras:

  • Para um elemento HTML <a> clicado, o plugin tenta recolher o valor do seu atributo innerText (texto). 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 chave parentId dentro de customDimensions da tabela customEvent nos logs, declare a tag parentDataTag ou defina o atributo data-parentid.

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 data-*-id e id estiverem ambos 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 estiver definido, useDefaultContentNameOrId estiver definido como false, e somente um id atributo for definido dentro do elemento mais próximo do elemento clicado, o parentId preencherá "not_specified". Para obter o valor de id, defina useDefaultContentNameOrId como true.

Quando define o atributo data-parentid ou data-*-parentid, o plug-in busca a instância desse atributo mais próxima do elemento em que clicou, inclusive dentro desse elemento, 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 na sua aplicação , o SDK começa a procurar tags de pais em toda a aplicação e não apenas no elemento HTML onde o utilizou.
  • 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 oferece ao utilizador a capacidade de configurar um prefixo de atributo de dados para ajudar a identificar a localização do coração 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 (*) em data-* por qualquer nome seguindo as regras de produção de nomes no 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 Descrição
captura automática booleano Verdadeiro Configuração de captura automática.
chamada de retorno IValueCallback Nulo Configuração de retornos de chamada.
etiquetas de página Objeto Nulo Tags de página.
etiquetas de dados ICustomDataTags Nulo Tags de dados personalizadas fornecidas para substituir as tags padrão usadas para capturar dados de clique.
urlCollectHash booleano Falso Permite o registro de valores após um caractere "#" da URL.
urlCollectQuery booleano Falso Habilita o registro em log da cadeia de caracteres de consulta da URL.
validador de comportamento Função Nulo Função de callback a ser usada para a validação do valor data-*-bhvr. Para obter mais informações, consulte a secção behaviorValidator.
comportamento padrão para RightClickBhvr Cadeia de caracteres (ou) número '' 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.
eliminarEventosInválidos booleano Falso Sinalize para descartar eventos que não tenham dados de clique úteis.

IValueCallback

Nome Tipo Predefinido Descrição
nome_página Função Nulo Função para substituir o comportamento de captura padrão pageName .
etiquetasDePáginaDeAção Função Nulo Uma função para expandir o pageTags padrão coletado durante um evento pageAction.
nomeDoConteúdo Função Nulo Uma função de retorno de chamada para preencher o contentName personalizado.

ICustomDataTags

Nome Tipo Predefinido Tag padrão para usar em HTML Descrição
useDefaultContentNameOrId booleano Falso N/A Quando um elemento específico não é marcado com o prefixo de dados padrão ou true, se id, coleta o atributo HTML padrão contentName para customDataPrefix. Caso contrário, o atributo id HTML padrão para contentName não será coletado.
customDataPrefix cadeia de caracteres 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 cadeia de caracteres ai-blob data-ai-blob O plug-in suporta um atributo JSON em forma de blob em vez de atributos individuais data-*.
metaDataPrefix cadeia de caracteres Nulo N/A Captura automática do nome e do conteúdo do elemento meta do HTML Head com o prefixo fornecido durante o processo de captura. Por exemplo, custom- pode ser usado na meta tag HTML.
captureAllMetaDataContent booleano Falso N/A Capture automaticamente todos os nomes e conteúdo de metaelementos do HTML Head. A predefinição é falsa. Se ativado, substitui o valor fornecido metaDataPrefix.
parentDataTag cadeia de caracteres Nulo N/A Busca o parentId nos registos quando data-parentid ou data-*-parentid não é encontrado. Para maior eficiência, para de percorrer o DOM para capturar o nome e valor do conteúdo dos elementos quando o atributo data-{parentDataTag} ou customDataPrefix-{parentDataTag} é encontrado. Para obter mais informações, consulte chave parentId.
dntDataTag cadeia de caracteres ai-dnt data-ai-dnt O plug-in para capturar dados de telemetria ignora elementos HTML com esse atributo.

validador de comportamento

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 callback

Três funções de 'callback' diferentes behaviorValidator são expostas como parte desta extensão. Você também pode usar as suas próprias funções de 'callback' se as funções expostas não atenderem às suas necessidades. A intenção é incorporar a estrutura de dados relativa ao seu próprio comportamento. O plug-in usa essa função de validador ao extrair os comportamentos das tags de dados.

Nome Descrição
ValidadorDeValorDeComportamento Use essa função de retorno de chamada se a estrutura de dados do seu comportamento for uma matriz de cadeias de caracteres.
ValidadorDeMapaDeComportamento Utilize esta função de callback se a estrutura de dados do comportamento for um dicionário.
BehaviorEnumValidator Use esta função callback caso a estrutura de dados do seu comportamento seja 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 aspecto 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", 
  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 leia-me da aplicação de exemplo para obter informações sobre onde encontrar dados de cliques.

Exemplos de chaves parentId

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 do 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 parentId é not_specified, porque nenhum detalhe de parentDataTag é definido e nenhum ID de elemento pai é fornecido dentro do elemento atual.

Exemplo 2

No exemplo 2, parentDataTag é declarado e data-parentid é definido. Este exemplo mostra como os detalhes do identificador do pai são recolhidos.

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

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

Resolução de Problemas

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

Próximos passos

  • Last updated on