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

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

Dimensões Personalizadas

Medidas personalizadas

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.

Adicionar o código

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

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

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

1. Se customDataPrefix não for declarado na configuração avançada, o id fornecido no data-id será utilizado como o nome customEvent.
2. 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.
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á utilizado como o nome customEvent. Se id e o nome do conteúdo estiverem presentes, a precedência será dada a id.
4. 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.

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

IValueCallback

ICustomDataTags

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.

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.