Abilitare il plug-in Click Analytics Auto-Collection

Articolo
10/15/2024

Le estensioni delle funzionalità JavaScript SDK di Application Insights sono funzionalità aggiuntive che possono essere aggiunte a JavaScript SDK di Application Insights per migliorarne le funzionalità.

In questo articolo viene illustrato il plug-in Click Analytics, che tiene traccia automaticamente degli eventi click nelle pagine Web e usa attributi data-* o tag personalizzati negli elementi HTML per popolare i dati di telemetria degli eventi.

Prerequisiti

Installare JavaScript SDK prima di abilitare il plug-in Click Analytics.

Quali dati vengono raccolti dal plug-in?

Le proprietà chiave seguenti vengono acquisite per impostazione predefinita quando il plug-in è abilitato.

Proprietà evento personalizzate

Nome	Descrizione	Esempio
Nome	Nome dell'evento personalizzato. Per altre informazioni sulla modalità di popolamento di un nome, vedere Colonna Nome.	Informazioni su
itemType	Tipo di evento.	customEvent
sdkVersion	Versione di Application Insights SDK insieme al plug-in fare clic su Plug-in.	JavaScript:2_ClickPlugin2

Dimensioni personalizzate

Nome	Descrizione	Esempio
actionType	Tipo di azione che ha causato l'evento Click. Può essere un clic sinistro o destro.	CL
baseTypeSource	Origine tipo di base dell'evento personalizzato.	ClickEvent
clickCoordinates	Coordinate in cui viene attivato l'evento Click.	659X47
content	Segnaposto per archiviare attributi e valori aggiuntivi `data-*`.	[{sample1:value1, sample2:value2}]
pageName	Titolo della pagina in cui viene attivato l'evento Click.	Titolo di esempio
parentId	ID o nome dell'elemento padre. Per altre informazioni sulla modalità di popolamento di un parentId, vedere Chiave parentId.	navbarContainer

Misure personalizzate

Nome	Descrizione	Esempio
timeToAction	Tempo impiegato in millisecondi per fare clic sull'elemento dal caricamento iniziale della pagina.	87407

Aggiungere il plug-in Click Analytics

Gli utenti possono configurare il plug-in Click Analytics Auto-Collection tramite Script del caricatore SDK JavaScript (Web) o npm quindi aggiungere facoltativamente un'estensione del framework.

Nota

Il 31 marzo 2025, il supporto per l'inserimento delle chiavi di strumentazione terminerà. L'inserimento delle chiavi di strumentazione continuerà a funzionare, ma non saranno più garantiti aggiornamenti o supporto per la funzionalità. Eseguire la transizione alle stringhe di connessione per sfruttare le nuove funzionalità.

Aggiunta del codice

Script del caricatore SDK JavaScript (Web)
Pacchetto npm

Incollare lo Script del caricatore SDK JavaScript (Web) nella parte superiore di ogni pagina per cui si desidera abilitare Application Insights.

<script type="text/javascript" src="https://js.monitor.azure.com/scripts/b/ext/ai.clck.2.min.js"></script>
<script type="text/javascript">
var clickPluginInstance = new Microsoft.ApplicationInsights.ClickAnalyticsPlugin();
  // Click Analytics configuration
var clickPluginConfig = {
    autoCapture : true,
    dataTags: {
        useDefaultContentNameOrId: true
    }
}
// Application Insights configuration
var configObj = {
    connectionString: "YOUR_CONNECTION_STRING",
    // Alternatively, you can pass in the instrumentation key,
    // but support for instrumentation key ingestion will end on March 31, 2025.
    // instrumentationKey: "YOUR INSTRUMENTATION KEY",
    extensions: [
        clickPluginInstance
    ],
    extensionConfig: {
        [clickPluginInstance.identifier] : clickPluginConfig
    },
};
// Application Insights JavaScript (Web) SDK Loader Script code
!(function (cfg){function e(){cfg.onInit&&cfg.onInit(n)}var x,w,D,t,E,n,C=window,O=document,b=C.location,q="script",I="ingestionendpoint",L="disableExceptionTracking",j="ai.device.";"instrumentationKey"[x="toLowerCase"](),w="crossOrigin",D="POST",t="appInsightsSDK",E=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=E),n=C[E]||function(g){var f=!1,m=!1,h={initialize:!0,queue:[],sv:"8",version:2,config:g};function v(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[j+"id"]=i[x](),n[j+"type"]=i,n["ai.operation.name"]=b&&b.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(h.sv||h.version),{time:(i=new Date).getUTCFullYear()+"-"+a(1+i.getUTCMonth())+"-"+a(i.getUTCDate())+"T"+a(i.getUTCHours())+":"+a(i.getUTCMinutes())+":"+a(i.getUTCSeconds())+"."+(i.getUTCMilliseconds()/1e3).toFixed(3).slice(2,5)+"Z",iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}},ver:undefined,seq:"1",aiDataContract:undefined}}var n,i,t,a,y=-1,T=0,S=["js.monitor.azure.com","js.cdn.applicationinsights.io","js.cdn.monitor.azure.com","js0.cdn.applicationinsights.io","js0.cdn.monitor.azure.com","js2.cdn.applicationinsights.io","js2.cdn.monitor.azure.com","az416426.vo.msecnd.net"],o=g.url||cfg.src,r=function(){return s(o,null)};function s(d,t){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~d.indexOf("ai.3")&&(d=d.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<S.length;e++)if(0<d.indexOf(S[e])){y=e;break}var n,i=function(e){var a,t,n,i,o,r,s,c,u,l;h.queue=[],m||(0<=y&&T+1<S.length?(a=(y+T+1)%S.length,p(d.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+S[a]+i})),T+=1):(f=m=!0,s=d,!0!==cfg.dle&&(c=(t=function(){var e,t={},n=g.connectionString;if(n)for(var i=n.split(";"),a=0;a<i.length;a++){var o=i[a].split("=");2===o.length&&(t[o[0][x]()]=o[1])}return t[I]||(e=(n=t.endpointsuffix)?t.location:null,t[I]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||g.instrumentationKey||"",t=(t=(t=t[I])&&"/"===t.slice(-1)?t.slice(0,-1):t)?t+"/v2/track":g.endpointUrl,t=g.userOverrideEndpointUrl||t,(n=[]).push((i="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",o=s,u=t,(l=(r=v(c,"Exception")).data).baseType="ExceptionData",l.baseData.exceptions=[{typeName:"SDKLoadFailed",message:i.replace(/\./g,"-"),hasFullStack:!1,stack:i+"\nSnippet failed to load ["+o+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(b&&b.pathname||"_unknown_")+"\nEndpoint: "+u,parsedStack:[]}],r)),n.push((l=s,i=t,(u=(o=v(c,"Message")).data).baseType="MessageData",(r=u.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+l+")").replace(/\"/g,"")+'"',r.properties={endpoint:i},o)),s=n,c=t,JSON&&((u=C.fetch)&&!cfg.useXhr?u(c,{method:D,body:JSON.stringify(s),mode:"cors"}):XMLHttpRequest&&((l=new XMLHttpRequest).open(D,c),l.setRequestHeader("Content-type","application/json"),l.send(JSON.stringify(s)))))))},a=function(e,t){m||setTimeout(function(){!t&&h.core||i()},500),f=!1},p=function(e){var n=O.createElement(q),e=(n.src=e,t&&(n.integrity=t),n.setAttribute("data-ai-name",E),cfg[w]);return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=a,n.onerror=i,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||a(0,t)},cfg.ld&&cfg.ld<0?O.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){O.getElementsByTagName(q)[0].parentNode.appendChild(n)},cfg.ld||0),n};p(d)}cfg.sri&&(n=o.match(/^((http[s]?:\/\/.*\/)\w+(\.\d+){1,5})\.(([\w]+\.){0,2}js)$/))&&6===n.length?(d="".concat(n[1],".integrity.json"),i="@".concat(n[4]),l=window.fetch,t=function(e){if(!e.ext||!e.ext[i]||!e.ext[i].file)throw Error("Error Loading JSON response");var t=e.ext[i].integrity||null;s(o=n[2]+e.ext[i].file,t)},l&&!cfg.useXhr?l(d,{method:"GET",mode:"cors"}).then(function(e){return e.json()["catch"](function(){return{}})}).then(t)["catch"](r):XMLHttpRequest&&((a=new XMLHttpRequest).open("GET",d),a.onreadystatechange=function(){if(a.readyState===XMLHttpRequest.DONE)if(200===a.status)try{t(JSON.parse(a.responseText))}catch(e){r()}else r()},a.send())):o&&r();try{h.cookie=O.cookie}catch(k){}function e(e){for(;e.length;)!function(t){h[t]=function(){var e=arguments;f||h.queue.push(function(){h[t].apply(h,e)})}}(e.pop())}var c,u,l="track",d="TrackPage",p="TrackEvent",l=(e([l+"Event",l+"PageView",l+"Exception",l+"Trace",l+"DependencyData",l+"Metric",l+"PageViewPerformance","start"+d,"stop"+d,"start"+p,"stop"+p,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),h.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(g.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==g[L]&&!0!==l[L]&&(e(["_"+(c="onerror")]),u=C[c],C[c]=function(e,t,n,i,a){var o=u&&u(e,t,n,i,a);return!0!==o&&h["_"+c]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},g.autoExceptionInstrumented=!0),h}(cfg.cfg),(C[E]=n).queue&&0===n.queue.length?(n.queue.push(e),n.trackPageView({})):e();})({                
  src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
  crossOrigin: "anonymous",
  // sri: false, // Custom optional value to specify whether fetching the snippet from integrity file and do integrity check
  cfg: configObj // configObj is defined above.
});
</script>

Per aggiungere o aggiornare la configurazione dello script del caricatore SDK JavaScript (Web), vedere Configurazione dello script del caricatore SDK JavaScript (Web).

Installare il pacchetto npm :

npm install --save @microsoft/applicationinsights-clickanalytics-js @microsoft/applicationinsights-web


import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js';

const clickPluginInstance = new ClickAnalyticsPlugin();
// Click Analytics configuration
const clickPluginConfig = {
  autoCapture: true
};
// Application Insights Configuration
const configObj = {
  connectionString: "YOUR_CONNECTION_STRING", 
  // Alternatively, you can pass in the instrumentation key,
  // but support for instrumentation key ingestion will end on March 31, 2025.  
  // instrumentationKey: "YOUR INSTRUMENTATION KEY",
  extensions: [clickPluginInstance],
  extensionConfig: {
    [clickPluginInstance.identifier]: clickPluginConfig
  },
};

const appInsights = new ApplicationInsights({ config: configObj });
appInsights.loadAppInsights();

Suggerimento

Per aggiungere un'estensione del framework o se ne è già stata aggiunta una, vedere Esempi di codice React, React Native e Angular per informazioni su come aggiungere il plug-in Click Analytics.

(Facoltativo) Impostare il contesto utente autenticato

Per impostare questa impostazione facoltativa, vedere Impostare il contesto utente autenticato.

Se si usa una cartella di lavoro HEART con il plug-in Click Analytics, non è necessario impostare il contesto utente autenticato per visualizzare i dati di telemetria. Per altre informazioni, vedere Documentazione della cartella di lavoro HEART.

Usare il plug-in

Nelle sezioni seguenti viene descritto come utilizzare il plug-in.

Archiviazione dei dati di telemetria

I dati di telemetria generati dagli eventi click vengono archiviati come customEvents nella sezione Log di >Application Insights> del portale di Azure.

`name`

La name colonna di customEvent viene popolata in base alle regole seguenti:

Se customDataPrefix non è dichiarato nella configurazione avanzata, l'oggetto id fornito in data-id viene usato come nome customEvent.
Se customDataPrefix è dichiarato, l'oggetto id fornito in data-*-id, il che significa che deve iniziare con data e terminare con id, viene usato come nome customEvent. Ad esempio, se l'elemento HTML selezionato ha l'attributo "data-sample-id"="button1", "button1" è il nome customEvent.
Se l'attributo data-id o data-*-id non esiste e se useDefaultContentNameOrId è impostato su true, l'attributo HTML id dell'elemento su cui si ha fatto clic o il nome del contenuto dell'elemento viene usato come nome customEvent. Se sono presenti sia id che il nome del contenuto, la precedenza viene assegnata a id.
Se useDefaultContentNameOrId è false, il nome customEvent è "not_specified". È consigliabile impostare useDefaultContentNameOrId su true per la generazione di dati significativi.

`contentName`

Se è stata definita la contentNamefunzione di richiamata nella configurazione avanzata, la colonna contentName di customEvent viene popolata in base alle regole seguenti:

Per un elemento HTML <a> selezionato, il plug-in tenta di raccogliere il valore dell'attributo innerText (testo). Se il plug-in non riesce a trovare questo attributo, tenta di raccogliere il valore dell'attributo innerHtml.
Per un elemento <img> o <area> HTML selezionato, il plug-in raccoglie il valore del relativo attributo alt.
Per tutti gli altri elementi HTML su cui si fa clic, contentName viene popolato in base alle regole seguenti, elencate in ordine di precedenza:
1. Valore dell'attributo value per l'elemento
2. Valore dell'attributo name per l'elemento
3. Valore dell'attributo alt per l'elemento
4. Valore dell'attributo innerText per l'elemento
5. Valore dell'attributo id per l'elemento

Chiave `parentId`

Per popolare la chiave parentId all'interno di customDimensions della tabella customEvent nei log, dichiarare il tag parentDataTag o definire l'attributo data-parentid.

Il valore per parentId viene recuperato in base alle regole seguenti:

Quando si dichiara parentDataTag, il plug-in recupera il valore di id o data-*-id definito all'interno dell'elemento più vicino all'elemento selezionato come parentId.
Se sono definiti sia data-*-id che id, la precedenza viene assegnata a data-*-id.
Se parentDataTag è definito ma il plug-in non riesce a trovare questo tag nell'albero DOM, il plug-in usa id o data-*-id definito all'interno dell'elemento più vicino all'elemento selezionato come parentId. È tuttavia consigliabile definire l'attributo data-{parentDataTag} o customDataPrefix-{parentDataTag} per ridurre il numero di cicli necessari per trovare parentId. La dichiarazione di parentDataTag è utile quando è necessario usare il plug-in con opzioni personalizzate.
Se non è definito alcun parentDataTag e nessuna informazione parentId viene inclusa nell'elemento corrente, non viene raccolto alcun valore parentId.
Se parentDataTag è definito, useDefaultContentNameOrId è impostato su false e solo un attributo id viene definito all'interno dell'elemento più vicino all'elemento selezionato, parentId popola come "not_specified". Per recuperare il valore di id, impostare useDefaultContentNameOrId su true.

Quando si definisce l'attributo data-parentid o data-*-parentid, il plug-in recupera l'istanza di questo attributo più vicina all'elemento selezionato, incluso all'interno dell'elemento selezionato, se applicabile.

Se si dichiara parentDataTag e si definisce l'attributo data-parentid o data-*-parentid, la precedenza viene assegnata a data-parentid o data-*-parentid.

Se viene visualizzato l'avviso di dati di telemetria "Fare clic sulle righe Evento prive di valore parentId", vedere Correggere l'avviso "Fare clic sulle righe Evento prive di valore parentId".

Per esempi che mostrano quale valore viene recuperato come parentId per configurazioni differenti, vedere Esempi di chiave parentid.

Attenzione

Una volta incluso parentDataTag in qualsiasi elemento HTML nell'applicazione , l'SDK inizia a cercare i tag padre nell'intera applicazione e non solo l'elemento HTML in cui è stato usato.
Se si usa la cartella di lavoro HEART con il plug-in Click Analytics, per registrare o rilevare gli eventi HEART, il tag parentDataTag deve essere dichiarato in tutte le altre parti dell'applicazione dell'utente finale.

`customDataPrefix`

L'opzione customDataPrefix nella configurazione avanzata offre all'utente la possibilità di configurare un prefisso dell'attributo di dati per identificare dove si trova il cuore all'interno della codebase dell'utente. Il prefisso deve sempre essere minuscolo e iniziare con data-. Ad esempio:

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

In HTML, gli attributi globali data-* sono denominati attributi di dati personalizzati che consentono lo scambio di informazioni proprietarie tra il codice HTML e la relativa rappresentazione DOM da parte degli script. I browser meno recenti come Internet Explorer e Safari rilasciano attributi che non capiscono, a meno che non inizino con data-.

È possibile sostituire l'asterisco (*) in data-* con qualsiasi nome che segue la regola di produzione dei nomi XML con le restrizioni seguenti.

Il nome non deve iniziare con "xml", indipendentemente dalla distinzione tra maiuscole e minuscole per le lettere.
Il nome non deve contenere un punto e virgola (U+003A).
Il nome non deve contenere lettere maiuscole.

Aggiungere configurazione avanzata

Nome	Type	Default	Descrizione
autoCapture	Booleano	Vero	Configurazione automatica dell'acquisizione.
callback	IValueCallback	Null	Configurazione delle richiamate.
pageTags	Object	Null	Tag di pagina.
dataTags	ICustomDataTags	Null	Tag dati personalizzati forniti per eseguire l'override dei tag predefiniti usati per acquisire i dati di clic.
urlCollectHash	Boolean	Falso	Abilita la registrazione dei valori dopo un carattere "#" dell'URL.
urlCollectQuery	Boolean	Falso	Abilita la registrazione della stringa di query dell'URL.
behaviorValidator	Funzione	Null	Funzione di richiamata da usare per la convalida del valore `data-*-bhvr`. Per altre informazioni, vedere la sezione behaviorValidator.
defaultRightClickBhvr	Stringa (o) numero	''	Valore di comportamento predefinito quando si è verificato un evento di clic con il pulsante destro del mouse. Questo valore viene sottoposto a override se l'elemento ha l'attributo `data-*-bhvr`.
dropInvalidEvents	Boolean	Falso	Contrassegnare per eliminare gli eventi che non dispongono di dati di clic utili.

IValueCallback

Nome	Type	Default	Descrizione
pageName	Funzione	Null	Funzione per eseguire l'override del comportamento di acquisizione predefinito `pageName`.
pageActionPageTags	Funzione	Null	Funzione di richiamata per aumentare il valore predefinito `pageTags` raccolto durante un evento `pageAction`.
contentName	Funzione	Null	Funzione di richiamata per popolare l'oggetto personalizzato `contentName`.

ICustomDataTags

Nome	Type	Predefiniti	Tag predefinito da usare in HTML	Descrizione
useDefaultContentNameOrId	Boolean	Falso	N/D	Se `true`, raccoglie l'attributo `id` HTML standard per `contentName` quando un particolare elemento non viene contrassegnato con il prefisso dati predefinito o `customDataPrefix`. In caso contrario, l'attributo `id` HTML standard per `contentName` non viene raccolto.
customDataPrefix	String	`data-`	`data-*`	Nome e valore del contenuto di acquisizione automatica degli elementi contrassegnati con il prefisso specificato. Ad esempio, è possibile usare `data-*-id`, `data-<yourcustomattribute>` nei tag HTML.
aiBlobAttributeTag	String	`ai-blob`	`data-ai-blob`	Il plug-in supporta un attributo BLOB JSON anziché singoli attributi `data-*`.
metaDataPrefix	String	Null	N/D	Acquisizione automatica del nome e del contenuto del meta-elemento HTML head con il prefisso specificato durante l'acquisizione. Ad esempio, è possibile usare `custom-` nel meta tag HTML.
captureAllMetaDataContent	Boolean	Falso	N/D	Acquisizione automatica di tutti i nomi e il contenuto dei meta-elementi della head HTML. Il valore predefinito è false. Se abilitata, esegue l'override di `metaDataPrefix`.
parentDataTag	String	Null	N/D	Recupera l'oggetto `parentId` nei log quando `data-parentid` o `data-*-parentid` non viene rilevato. Per un'efficienza, interrompe l'attraversamento del DOM per acquisire il nome del contenuto e il valore degli elementi quando viene rilevato l'attributo `data-{parentDataTag}` o `customDataPrefix-{parentDataTag}`. Per altre informazioni, vedere chiave parentId.
dntDataTag	String	`ai-dnt`	`data-ai-dnt`	Il plug-in per l'acquisizione dei dati di telemetria ignora gli elementi HTML con questo attributo.

behaviorValidator

Le funzioni behaviorValidator controllano automaticamente che i comportamenti con tag nel codice siano conformi a un elenco predefinito. Le funzioni assicurano che i comportamenti contrassegnati siano coerenti con la tassonomia stabilita dall'azienda. Non è necessario o previsto che la maggior parte dei clienti di Monitoraggio di Azure usi queste funzioni, ma che sono disponibili per scenari avanzati. Le funzioni behaviorValidator possono essere utili per procedure più accessibili.

I comportamenti sono visualizzati nel campo customDimensions all'interno della tabella CustomEvents.

Funzioni di richiamata

Tre differenti funzioni di richiamata behaviorValidator vengono esposte come parte di questa estensione. È anche possibile usare funzioni di richiamata personalizzate se le funzioni esposte non risolvono le esigenze. Lo scopo è quello di portare la struttura dei dati del proprio comportamento. Il plug-in usa questa funzione validator durante l'estrazione dei comportamenti dai tag di dati.

Nome	Descrizione
BehaviorValueValidator	Usare questa funzione di richiamata se la struttura dei dati del comportamento è un array di stringhe.
BehaviorMapValidator	Usare questa funzione di richiamata se la struttura dei dati del comportamento è un dizionario.
BehaviorEnumValidator	Usare questa funzione di richiamata se la struttura dei dati del comportamento è un'enumerazione.

Passaggio di valori stringa e numerici

Per ridurre i byte passati, passare il valore numerico anziché la stringa full-text. Se il costo non è un problema, è possibile passare la stringa full-text, ad esempio NAVIGATIONBACK.

Utilizzo di esempio con behaviorValidator

Di seguito è riportato un esempio dell'aspetto di un validator della mappa del comportamento. I dati potrebbero avere un aspetto differente, a seconda della tassonomia dell'organizzazione e degli eventi raccolti.

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

Esempio di app

Vedere una semplice app Web con il plug-in Click Analytics Autocollection abilitato per l'implementazione di proprietà di eventi personalizzate, ad esempio Name e parentid e comportamenti e contenuti personalizzati. Vedere il file leggimi dell'app di esempio per informazioni su dove trovare i dati di clic.

Esempi di chiave `parentId`

Gli esempi seguenti mostrano quale valore viene recuperato come parentId per configurazioni differenti.

Gli esempi mostrano come, se parentDataTag è definito ma il plug-in non riesce a trovare questo tag nell'albero DOM, il plug-in usa id dell'elemento padre più vicino.

Esempio 1

Nell'esempio 1, l'oggetto parentDataTag non è dichiarato e data-parentid o data-*-parentid non è definito in alcun elemento. Questo esempio mostra una configurazione in cui non viene raccolto un valore per parentId.

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>

Per l'elemento <Button> selezionato il valore di parentId è “not_specified”, perché non sono definiti dettagli parentDataTag e non viene fornito alcun ID elemento padre all'interno dell'elemento corrente.

Esempio 2

Nell'esempio 2, parentDataTag è dichiarato e data-parentid è definito. In questo esempio viene illustrato come vengono raccolti i dettagli dell'ID padre.

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>

Per l'elemento <Button>selezionato, il valore di parentId è parentid2. Anche se parentDataTag è dichiarato, l'oggetto data-parentid è definito direttamente all'interno dell'elemento. Pertanto, questo valore ha la precedenza su tutti gli altri ID padre o dettagli ID definiti nei relativi elementi padre.

Esempio 3

Nell'esempio 3, parentDataTag è dichiarato e l'attributo data-parentid o data-*-parentid non è definito. Questo esempio mostra come la dichiarazione parentDataTag può essere utile per raccogliere un valore per parentId per i casi in cui gli elementi dinamici non hanno id o 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>

Per l'elemento <Button>selezionato, il valore di parentId è test6parent, perché parentDataTag è dichiarato. Questa dichiarazione consente al plug-in di attraversare l'albero degli elementi corrente e pertanto l'ID del padre più vicino verrà usato quando i dettagli dell'ID padre non vengono forniti direttamente all'interno dell'elemento corrente. Con l'oggetto data-group="buttongroup1" definito, il plug-in trova il parentId in modo più efficiente.

Se si rimuove l'attributo data-group="buttongroup1", il valore di parentId è ancora test6parent, perché parentDataTag è ancora dichiarato.

Risoluzione dei problemi

Vedere l'articolo sulla risoluzione dei problemi dedicato.

Passaggi successivi

Verificare che i dati vengano trasmessi.
Vedere la documentazione sull'uso della cartella di lavoro HEART per l'analisi dei prodotti espansa.
Vedere il repository GitHub e il pacchetto npm per il plug-in Click Analytics Autocollection.
Usare Analisi degli eventi nell'esperienza di utilizzo per analizzare i principali clic e la sezione in base alle dimensioni disponibili.
Vedere Log Analytics se non si ha familiarità con il processo di scrittura di una query.
Compilare una cartella di lavoro o esportarla in Power BI per creare visualizzazioni personalizzate dei dati di clic.

Condividi tramite

Abilitare il plug-in Click Analytics Auto-Collection

Prerequisiti

Quali dati vengono raccolti dal plug-in?

Proprietà evento personalizzate

Dimensioni personalizzate

Misure personalizzate

Aggiungere il plug-in Click Analytics

Aggiunta del codice

(Facoltativo) Impostare il contesto utente autenticato

Usare il plug-in

Archiviazione dei dati di telemetria

`name`

`contentName`

Chiave `parentId`

`customDataPrefix`

Aggiungere configurazione avanzata

IValueCallback

ICustomDataTags

behaviorValidator

Funzioni di richiamata

Passaggio di valori stringa e numerici

Utilizzo di esempio con behaviorValidator

Esempio di app

Esempi di chiave `parentId`

Esempio 1

Esempio 2

Esempio 3

Risoluzione dei problemi

Passaggi successivi

Commenti e suggerimenti

Risorse aggiuntive

Condividi tramite

Abilitare il plug-in Click Analytics Auto-Collection

Prerequisiti

Quali dati vengono raccolti dal plug-in?

Proprietà evento personalizzate

Dimensioni personalizzate

Misure personalizzate

Aggiungere il plug-in Click Analytics

Aggiunta del codice

(Facoltativo) Impostare il contesto utente autenticato

Usare il plug-in

Archiviazione dei dati di telemetria

name

contentName

Chiave parentId

customDataPrefix

Aggiungere configurazione avanzata

IValueCallback

ICustomDataTags

behaviorValidator

Funzioni di richiamata

Passaggio di valori stringa e numerici

Utilizzo di esempio con behaviorValidator

Esempio di app

Esempi di chiave parentId

Esempio 1

Esempio 2

Esempio 3

Risoluzione dei problemi

Passaggi successivi

Commenti e suggerimenti

Risorse aggiuntive

`name`

`contentName`

Chiave `parentId`

`customDataPrefix`

Esempi di chiave `parentId`