Abilitare il plug-in Di raccolta automatica di Analisi clic

  • Articolo

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

In questo articolo viene illustrato il plug-in Click Analytics, che tiene traccia automaticamente degli eventi clic sulle pagine Web e usa data-* attributi 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 sul 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 e quindi aggiungere facoltativamente un'estensione del framework.

Nota

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

Aggiunta del codice

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

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

Suggerimento

Per aggiungere un'estensione del framework o se ne è già stata aggiunta una, vedere gli 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 la documentazione della cartella di lavoro HEART.

Usare il plug-in

Le sezioni seguenti descrivono come usare 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 > portale di Azure>.

name

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

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

contentName

Se è stata definita la contentName funzione di callback nella configurazione avanzata, la contentName colonna 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 (text). Se il plug-in non riesce a trovare questo attributo, tenta di raccogliere il valore dell'attributo innerHtml.

  • Per un elemento o HTML <img> selezionato, il plug-in raccoglie il valore del relativo alt<area> attributo.

  • 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

parentId Chiave

Per popolare la parentId chiave all'interno customDimensions della customEvent tabella 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 o data-*-id definito all'interno dell'elemento id più vicino all'elemento selezionato come parentId.
  • data-*-idid Se e sono definiti, 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 parentDataTag è utile quando è necessario usare il plug-in con opzioni personalizzate.
  • Se non è definito alcun valore e nessuna parentDataTagparentId informazione viene inclusa nell'elemento corrente, non viene raccolto alcun parentId valore.
  • Se parentDataTag è definito, useDefaultContentNameOrId è impostato su falsee solo un id attributo viene definito all'interno dell'elemento più vicino all'elemento selezionato, il parentId popola come "not_specified". Per recuperare il valore di id, impostare su useDefaultContentNameOrIdtrue.

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 telemetria "Click Event rows with no parentId value", vedere Correggere l'avviso "Click Event rows with no parentId value".

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

Attenzione

  • Una volta parentDataTag incluso 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 data-* attributi globali 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 una configurazione avanzata

Nome Tipo Default Descrizione
autoCapture Boolean Vero Configurazione automatica dell'acquisizione.
callback IValueCallback Null Configurazione dei callback.
pageTags Oggetto 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 callback da usare per la convalida del data-*-bhvr valore. Per altre informazioni, vedere la sezione behaviorValidator.
defaultRightClickBhvr Numero stringa (o) '' 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 Tipo Default Descrizione
pageName Funzione Null Funzione per eseguire l'override del comportamento di acquisizione predefinito pageName .
pageActionPageTags Funzione Null Funzione di callback per aumentare il valore predefinito pageTags raccolto durante un pageAction evento.
contentName Funzione Null Funzione di callback per popolare l'oggetto personalizzato contentName.

ICustomDataTags

Nome Tipo Default 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 Stringa data- data-* Nome e valore del contenuto di acquisizione automatica degli elementi contrassegnati con il prefisso specificato. Ad esempio, data-*-id, data-<yourcustomattribute> può essere usato nei tag HTML.
aiBlobAttributeTag Stringa ai-blob data-ai-blob Il plug-in supporta un attributo BLOB JSON anziché singoli data-* attributi.
metaDataPrefix Stringa Null N/D Acquisizione automatica del nome e del contenuto del metaelemento html head con il prefisso specificato durante l'acquisizione. Ad esempio, custom- può essere usato nel meta tag HTML.
captureAllMetaDataContent Boolean Falso N/D Acquisizione automatica di tutti i nomi e il contenuto dei metaelementi della head HTML. Il valore predefinito è false. Se abilitata, esegue l'override di metaDataPrefix.
parentDataTag Stringa 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 data-{parentDataTag} viene rilevato o customDataPrefix-{parentDataTag} attributo. Per altre informazioni, vedere chiave parentId.
dntDataTag Stringa ai-dnt data-ai-dnt Il plug-in per l'acquisizione dei dati di telemetria ignora gli elementi HTML con questo attributo.

behaviorValidator

Le behaviorValidator funzioni controllano automaticamente che i comportamenti contrassegnati 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 callback

Tre diverse behaviorValidator funzioni di callback vengono esposte come parte di questa estensione. È anche possibile usare funzioni di callback 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 callback se la struttura dei dati del comportamento è una matrice di stringhe.
BehaviorMapValidator Usare questa funzione di callback se la struttura dei dati del comportamento è un dizionario.
BehaviorEnumValidator Usare questa funzione di callback 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 diverso, 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, Name ad esempio e comportamento e parentid contenuto personalizzato. Vedere il file leggimi dell'app di esempio per informazioni su dove trovare i dati di clic.

Esempi di parentId chiave

Negli esempi seguenti viene illustrato quale valore viene recuperato come parentId per configurazioni diverse.

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

Esempio 1

Nell'esempio 1, l'oggetto parentDataTag non viene 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 parentDataTag sono definiti dettagli e non viene fornito alcun ID elemento padre all'interno dell'elemento corrente.

Esempio 2

Nell'esempio 2, parentDataTag viene dichiarato ed 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 viene dichiarato, l'oggetto data-parentid viene 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 viene 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 i casi in cui gli elementi dinamici non hanno o iddata-*-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 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 dedicato sulla risoluzione dei problemi.

Passaggi successivi