Click Analytics Auto-Collection-invoegtoepassing inschakelen

  • Artikel

Application Insights JavaScript SDK-functieuitbreidingen zijn extra functies die kunnen worden toegevoegd aan de Application Insights JavaScript SDK om de functionaliteit ervan te verbeteren.

In dit artikel behandelen we de invoegtoepassing Click Analytics, waarmee klikgebeurtenissen automatisch worden bijgehouden op webpagina's en kenmerken of aangepaste tags op HTML-elementen worden gebruikt data-* om telemetrie van gebeurtenissen te vullen.

Vereisten

Installeer de JavaScript SDK voordat u de Click Analytics-invoegtoepassing inschakelt.

Welke gegevens verzamelt de invoegtoepassing?

De volgende sleuteleigenschappen worden standaard vastgelegd wanneer de invoegtoepassing is ingeschakeld.

Eigenschappen van aangepaste gebeurtenissen

Naam Beschrijving Voorbeeld
Naam De naam van de aangepaste gebeurtenis. Zie de kolom Naam voor meer informatie over hoe een naam wordt ingevuld. Info
itemType Type gebeurtenis. customEvent
sdkVersion Versie van Application Insights SDK en klik op invoegtoepassing. JavaScript:2_ClickPlugin2

Aangepaste dimensies

Naam Beschrijving Voorbeeld
actionType Actietype dat de klik-gebeurtenis heeft veroorzaakt. Dit kan een linker- of rechtermuisknop zijn. CL
baseTypeSource Bron van het basistype van de aangepaste gebeurtenis. ClickEvent
clickCoördinaten Coördinaten waarbij de klikgebeurtenis wordt geactiveerd. 659X47
content Tijdelijke aanduiding voor het opslaan van extra data-* kenmerken en waarden. [{sample1:value1, sample2:value2}]
pageName Titel van de pagina waarop de klikgebeurtenis wordt geactiveerd. Voorbeeldtitel
parentId Id of naam van het bovenliggende element. Zie parentId-sleutel voor meer informatie over hoe een parentId wordt ingevuld. navbarContainer

Aangepaste metingen

Naam Beschrijving Voorbeeld
timeToAction De tijd die de gebruiker in milliseconden nodig heeft om op het element te klikken sinds de eerste pagina wordt geladen. 87407

De invoegtoepassing Click Analytics toevoegen

Gebruikers kunnen de invoegtoepassing Click Analytics Auto-Collection instellen via JavaScript (Web) SDK Loader Script of npm en vervolgens eventueel een frameworkextensie toevoegen.

Notitie

Op 31 maart 2025 eindigt de ondersteuning voor opname van instrumentatiesleutels. Opname van instrumentatiesleutels blijft werken, maar we bieden geen updates of ondersteuning meer voor de functie. Overgang naar verbindingsreeks s om te profiteren van nieuwe mogelijkheden.

Code toevoegen

  1. Plak het JavaScript (Web) SDK Loader Script boven aan elke pagina waarvoor u Application Insights wilt inschakelen.

     <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. Als u de configuratie van JavaScript (Web) SDK Loader Script wilt toevoegen of bijwerken, raadpleegt u de configuratie van javaScript (Web) SDK Loader Script.

Fooi

Als u een frameworkextensie wilt toevoegen of als u er al een hebt toegevoegd, raadpleegt u de codevoorbeelden React, React Native en Angular voor het toevoegen van de Click Analytics-invoegtoepassing.

(Optioneel) De geverifieerde gebruikerscontext instellen

Zie De geverifieerde gebruikerscontext instellen als u deze optionele instelling wilt instellen.

Als u een HEART-werkmap gebruikt met de invoegtoepassing Click Analytics, hoeft u de geverifieerde gebruikerscontext niet in te stellen om telemetriegegevens weer te geven. Zie de documentatie van de HEART-werkmap voor meer informatie.

De invoegtoepassing gebruiken

In de volgende secties wordt beschreven hoe u de invoegtoepassing gebruikt.

Telemetriegegevensopslag

Telemetriegegevens die zijn gegenereerd op basis van de klik-gebeurtenissen, worden opgeslagen in customEvents de sectie Application Insights-logboeken > van Azure Portal>.

name

De name kolom van de customEvent kolom wordt ingevuld op basis van de volgende regels:

  1. Als customDataPrefix deze niet is gedeclareerd in de geavanceerde configuratie, wordt de id opgegeven in de data-id configuratie gebruikt als de customEvent naam.
  2. Als customDataPrefix dit wordt gedeclareerd, wordt de id opgegeven in de data-*-id, wat betekent dat deze moet beginnen data met en eindigen met id, wordt gebruikt als de customEvent naam. Als het opgegeven HTML-element bijvoorbeeld het kenmerk "data-sample-id"="button1"heeft, is dit "button1" de customEvent naam.
  3. Als het kenmerk of het kenmerk niet bestaat en useDefaultContentNameOrId als dit is ingesteld trueop, wordt het HTML-kenmerk of de naam van de inhoud van het element gebruikt als de customEvent naam van het elementid.data-iddata-*-id Als zowel id als de inhoudsnaam aanwezig zijn, krijgt u voorrang op id.
  4. Als useDefaultContentNameOrId dat het isfalse, is "not_specified"de customEvent naam . U wordt aangeraden useDefaultContentNameOrId om zinvolle gegevens te true genereren.

contentName

Als u de contentName callback-functie hebt gedefinieerd in een geavanceerde configuratie, wordt de contentName kolom van de customEvent functie ingevuld op basis van de volgende regels:

  • Voor een geklikt HTML-element <a> probeert de invoegtoepassing de waarde van het kenmerk innerText (tekst) te verzamelen. Als de invoegtoepassing dit kenmerk niet kan vinden, probeert deze de waarde van het innerHtml-kenmerk te verzamelen.

  • Voor een klik op HTML <img> of <area> element verzamelt de invoegtoepassing de waarde van het alt kenmerk.

  • Voor alle andere op HTML-elementen geklikt, contentName wordt deze ingevuld op basis van de volgende regels, die worden vermeld in volgorde van prioriteit:

    1. De waarde van het value kenmerk voor het element
    2. De waarde van het name kenmerk voor het element
    3. De waarde van het alt kenmerk voor het element
    4. De waarde van het kenmerk innerText voor het element
    5. De waarde van het id kenmerk voor het element

parentId Sleutel

Als u de parentId sleutel customDimensions in de tabel in de customEvent logboeken wilt vullen, declareert u de tag parentDataTag of definieert u het data-parentid kenmerk.

De waarde voor parentId wordt opgehaald op basis van de volgende regels:

  • Wanneer u de parentDataTaginvoegtoepassing declareert, wordt de waarde opgehaald van id of data-*-id gedefinieerd binnen het element dat zich het dichtst bij het geklikte element bevindt, als parentId.
  • Als beide data-*-id en id zijn gedefinieerd, wordt prioriteit gegeven aan data-*-id.
  • Als parentDataTag deze is gedefinieerd maar de invoegtoepassing deze tag niet kan vinden onder de DOM-structuur, gebruikt de invoegtoepassing het id of data-*-id gedefinieerde element dat zich het dichtst bij het geklikt element bevindt als parentId. We raden u echter aan om het data-{parentDataTag} of customDataPrefix-{parentDataTag} kenmerk te definiëren om het aantal lussen te verminderen dat nodig is om te zoeken parentId. Declareren parentDataTag is handig wanneer u de invoegtoepassing met aangepaste opties moet gebruiken.
  • Als er geen gegevens parentDataTag zijn gedefinieerd en er geen parentId informatie wordt opgenomen in het huidige element, wordt er geen parentId waarde verzameld.
  • Als parentDataTag dit is gedefinieerd, useDefaultContentNameOrId is ingesteld op false, en alleen een id kenmerk wordt gedefinieerd binnen het element dat het dichtst bij het geklikte element ligt, wordt het parentId ingevuld als "not_specified". Als u de waarde van id, ingesteld useDefaultContentNameOrId op true.

Wanneer u de data-parentid of data-*-parentid het kenmerk definieert, haalt de invoegtoepassing het exemplaar van dit kenmerk op dat het dichtst bij het geklikte element ligt, inclusief in het desbetreffende element, indien van toepassing.

Als u het data-parentid kenmerk declareert parentDataTag en definieert, krijgt u prioriteit aan data-parentid of data-*-parentiddata-*-parentid .

Als de telemetriewaarschuwing 'Klik op gebeurtenisrijen zonder parentId-waarde' wordt weergegeven, raadpleegt u de waarschuwing 'Klik op gebeurtenisrijen zonder parentId-waarde'.

Zie Voorbeelden van de sleutel voor voorbeelden die worden opgehaald als de parentId waarde voor verschillende configuraties.parentid

Let op

  • Zodra parentDataTag deze is opgenomen in een HTML-element in uw toepassing, begint de SDK te zoeken naar boven-boven-tags in uw hele toepassing en niet alleen het HTML-element waar u het hebt gebruikt.
  • Als u de HEART-werkmap gebruikt met de invoegtoepassing Click Analytics, moeten HEART-gebeurtenissen worden geregistreerd of gedetecteerd, moet de tag parentDataTag worden gedeclareerd in alle andere onderdelen van de toepassing van een eindgebruiker.

customDataPrefix

De customDataPrefix optie in geavanceerde configuratie biedt de gebruiker de mogelijkheid om een gegevenskenmerkvoorvoegsel te configureren om te bepalen waar het hart zich in de codebasis van de persoon bevindt. Het voorvoegsel moet altijd kleine letters zijn en beginnen met data-. Bijvoorbeeld:

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

In HTML worden de data-* globale kenmerken aangepaste gegevenskenmerken genoemd waarmee eigendomsinformatie kan worden uitgewisseld tussen de HTML en de DOM-weergave ervan door scripts. Oudere browsers zoals Internet Explorer en Safari verwijderen kenmerken die ze niet begrijpen, tenzij ze beginnen met data-.

U kunt het sterretje (*) data-* vervangen door elke naam die volgt op de productieregel van XML-namen door de volgende beperkingen.

  • De naam mag niet beginnen met 'xml', ongeacht het geval dat voor de letters wordt gebruikt.
  • De naam mag geen puntkomma (U+003A) bevatten.
  • De naam mag geen hoofdletters bevatten.

Geavanceerde configuratie toevoegen

Naam Type Standaard Omschrijving
autoCapture Booleaanse waarde Waar Configuratie automatisch vastleggen.
Callback IValueCallback Nul Configuratie van callbacks.
pageTags Object Nul Paginatags.
dataTags ICustomDataTags Nul Aangepaste gegevenstags die worden opgegeven om standaardtags te overschrijven die worden gebruikt om klikgegevens vast te leggen.
urlCollectHash Booleaanse waarde Onwaar Hiermee schakelt u de logboekregistratie van waarden in na een #-teken van de URL.
urlCollectQuery Booleaanse waarde Onwaar Hiermee schakelt u de logboekregistratie van de querytekenreeks van de URL in.
behaviorValidator Function Nul Callback-functie die moet worden gebruikt voor de data-*-bhvr waardevalidatie. Zie de sectie behaviorValidator voor meer informatie.
defaultRightClickBhvr Tekenreeksnummer (of) '' Standaardgedragswaarde wanneer er een gebeurtenis met de rechtermuisknop is opgetreden. Deze waarde wordt overschreven als het element het data-*-bhvr kenmerk heeft.
dropInvalidEvents Booleaanse waarde Onwaar Vlag om gebeurtenissen te verwijderen die geen nuttige klikgegevens hebben.

IValueCallback

Naam Type Standaard Omschrijving
pageName Function Nul Functie om het standaardgedrag pageName voor vastleggen te overschrijven.
pageActionPageTags Function Nul Een callback-functie voor het uitbreiden van de standaardwaarde pageTags die tijdens een pageAction gebeurtenis wordt verzameld.
contentName Function Nul Een callback-functie om aangepast te contentNamevullen.

ICustomDataTags

Naam Type Standaardinstelling Standaardtag die moet worden gebruikt in HTML Omschrijving
useDefaultContentNameOrId Booleaanse waarde Onwaar N.v.t. Als true, verzamelt standaard HTML-kenmerk id voor contentName wanneer een bepaald element niet wordt gelabeld met standaardgegevensvoorvoegsel of customDataPrefix. Anders wordt het standaard HTML-kenmerk id voor contentName niet verzameld.
customDataPrefix String data- data-* Automatisch de inhoudsnaam en -waarde vastleggen van elementen die zijn gelabeld met het opgegeven voorvoegsel. Kan data-*-iddata-<yourcustomattribute> bijvoorbeeld worden gebruikt in de HTML-tags.
aiBlobAttributeTag String ai-blob data-ai-blob Invoegtoepassing ondersteunt een JSON-blobkenmerk in plaats van afzonderlijke data-* kenmerken.
metaDataPrefix String Nul N.v.t. Automatisch vastleggen van de naam en inhoud van het meta-element van HTML Head met het opgegeven voorvoegsel wanneer deze worden vastgelegd. Kan bijvoorbeeld custom- worden gebruikt in de HTML-metatag.
captureAllMetaDataContent Booleaanse waarde Onwaar N.v.t. Alle meta-elementnamen en inhoud van HTML Head automatisch vastleggen. Standaard ingesteld op onwaar. Indien ingeschakeld, worden de opgegeven onderdrukkingen overschreven metaDataPrefix.
parentDataTag String Nul N.v.t. Haalt de parentId logboeken op wanneer data-parentid of data-*-parentid niet wordt aangetroffen. Voor efficiëntie stopt u met het doorlopen van de DOM om de inhoudsnaam en -waarde van elementen vast te leggen wanneer data-{parentDataTag} of customDataPrefix-{parentDataTag} kenmerk wordt aangetroffen. Zie parentId-sleutel voor meer informatie.
dntDataTag String ai-dnt data-ai-dnt De invoegtoepassing voor het vastleggen van telemetriegegevens negeert HTML-elementen met dit kenmerk.

behaviorValidator

De behaviorValidator functies controleren automatisch of getagd gedrag in code voldoet aan een vooraf gedefinieerde lijst. De functies zorgen ervoor dat gelabeld gedrag consistent is met de gevestigde taxonomie van uw onderneming. Het is niet vereist of verwacht dat de meeste Azure Monitor-klanten deze functies gebruiken, maar ze zijn beschikbaar voor geavanceerde scenario's. De behaviorValidator-functies kunnen helpen bij meer toegankelijke procedures.

Gedrag wordt weergegeven in het veld customDimensions in de tabel CustomEvents.

Callback-functies

Drie verschillende behaviorValidator callback-functies worden weergegeven als onderdeel van deze extensie. U kunt ook uw eigen callback-functies gebruiken als de blootgestelde functies uw behoeften niet oplossen. De bedoeling is om de gegevensstructuur van uw eigen gedrag te gebruiken. De invoegtoepassing maakt gebruik van deze validatiefunctie tijdens het extraheren van het gedrag van de gegevenstags.

Naam Beschrijving
BehaviorValueValidator Gebruik deze callback-functie als de gegevensstructuur van uw gedrag een matrix met tekenreeksen is.
BehaviorMapValidator Gebruik deze callback-functie als de gegevensstructuur van uw gedrag een woordenlijst is.
BehaviorEnumValidator Gebruik deze callback-functie als de gegevensstructuur van uw gedrag een Enum is.

Het doorgeven van tekenreeks versus numerieke waarden

Als u het aantal bytes wilt verminderen dat u doorgeeft, geeft u de getalwaarde door in plaats van de tekenreeks voor volledige tekst. Als de kosten geen probleem zijn, kunt u de tekenreeks voor volledige tekst doorgeven (bijvoorbeeld NAVIGATIONBACK).

Voorbeeldgebruik met behaviorValidator

Hier volgt een voorbeeld van hoe een gedragstoewijzingsvalidator eruit kan zien. Uw gegevens kunnen er anders uitzien, afhankelijk van de taxonomie van uw organisatie en de gebeurtenissen die u verzamelt.

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

Voorbeeld-app

Bekijk een eenvoudige web-app met de invoegtoepassing Click Analytics Autocollection ingeschakeld voor het implementeren van aangepaste gebeurteniseigenschappen, zoals Name en parentid aangepast gedrag en inhoud. Zie het leesmij-bestand voor de voorbeeld-app voor informatie over waar u klikgegevens kunt vinden.

Voorbeelden van parentId sleutel

In de volgende voorbeelden ziet u welke waarde wordt opgehaald als voor parentId verschillende configuraties.

In de voorbeelden ziet u hoe als parentDataTag deze is gedefinieerd, maar de invoegtoepassing deze tag niet kan vinden onder de DOM-structuur. De invoegtoepassing maakt gebruik van het id dichtstbijzijnde bovenliggende element.

Voorbeeld 1

In voorbeeld 1 is het parentDataTag niet gedeclareerd en data-parentid of data-*-parentid niet gedefinieerd in een element. In dit voorbeeld ziet u een configuratie waarvoor geen waarde parentId wordt verzameld.

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>

Voor een aangeklikt element <Button> is de waarde parentId , “not_specified”omdat er geen parentDataTag details zijn gedefinieerd en er geen bovenliggende element-id wordt opgegeven in het huidige element.

Voorbeeld 2

In voorbeeld 2 parentDataTag wordt gedeclareerd en data-parentid gedefinieerd. In dit voorbeeld ziet u hoe de details van de bovenliggende id worden verzameld.

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>

De waarde van parentId het element is parentid2voor het klikken op een element<Button>. parentDataTag Hoewel dit wordt gedeclareerd, wordt het data-parentid rechtstreeks gedefinieerd binnen het element. Daarom heeft deze waarde voorrang op alle andere bovenliggende id's of id-details die zijn gedefinieerd in de bovenliggende elementen.

Voorbeeld 3

In voorbeeld 3 parentDataTag wordt gedeclareerd en is het data-parentid of data-*-parentid kenmerk niet gedefinieerd. In dit voorbeeld ziet u hoe het declareren parentDataTag nuttig kan zijn om een waarde te verzamelen voor parentId gevallen waarin dynamische elementen geen id of 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>

De waarde van parentIdtest6parenthet element is voor het klikken op een element<Button>, omdat parentDataTag deze is gedeclareerd. Met deze declaratie kan de invoegtoepassing de huidige elementstructuur doorlopen en daarom wordt de id van de dichtstbijzijnde bovenliggende site gebruikt wanneer de details van de bovenliggende id niet rechtstreeks in het huidige element worden opgegeven. Met de data-group="buttongroup1" gedefinieerde vindt de invoegtoepassing des parentId te efficiënter.

Als u het data-group="buttongroup1" kenmerk verwijdert, is de waarde parentId nog steeds test6parent, omdat parentDataTag deze nog steeds is gedeclareerd.

Problemen oplossen

Zie het speciale artikel over probleemoplossing.

Volgende stappen