Delen via

Click Analytics Auto-Collection-plug-in inschakelen

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.

Aangepaste gebeurtenis-eigenschappen

Naam Beschrijving Voorbeeld
Naam De naam van de aangepaste gebeurtenis. Zie de kolom Naam voor meer informatie over hoe een naam wordt ingevuld. Over
artikeltype Type gebeurtenis. customEvent
sdkVersie Versie van Application Insights SDK samen met klik-plug-in. JavaScript:2_ClickPlugin2

Aangepaste dimensies

Naam Beschrijving Voorbeeld
actietype 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
klikCoördinaten Coördinaten waarbij de klikgebeurtenis wordt geactiveerd. 659X47
inhoud Plaatshouder om extra data-* kenmerken en waarden op te slaan. [{sample1:value1, sample2:value2}]
paginanaam Titel van de pagina waarop de klikgebeurtenis wordt geactiveerd. Voorbeeldtitel
ouder-ID 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
tijd om te handelen 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 verwerking van instrumentatiesleutels. Instrumentatiesleutelverwerking zal blijven werken, maar we bieden geen updates of ondersteuning meer voor de functionaliteit. Overgang naar verbindingsreeksen om te profiteren van nieuwe mogelijkheden.

Code toevoegen

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

Als u de configuratie van JavaScript (Web) SDK Loader Script wilt toevoegen of bijwerken, raadpleegt u de configuratie van javaScript (Web) SDK Loader Script.

Aanbeveling

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 niet is gedeclareerd in de geavanceerde configuratie, wordt de id opgegeven in de data-id gebruikt als de customEvent naam.
  2. Als customDataPrefix wordt gedeclareerd, wordt de id die in de data-*-id is opgegeven, gebruikt als de data-naam, wat betekent dat het moet beginnen met id en eindigen met customEvent. Als het aangeklikte HTML-element bijvoorbeeld het kenmerk "data-sample-id"="button1" heeft, dan is "button1" de customEvent naam.
  3. Als het data-id of data-*-id kenmerk niet bestaat en useDefaultContentNameOrId is ingesteld op true, wordt het HTML-kenmerk id of de inhoudsnaam van het element gebruikt als de customEvent naam. Als zowel id als de inhoudsnaam aanwezig zijn, krijgt u voorrang op id.
  4. Als useDefaultContentNameOrIdfalse is, is de customEvent naam "not_specified". We raden aan om useDefaultContentNameOrId in te stellen op true om zinvolle gegevens te 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 aangeklikte HTML-elementen, wordt contentName ingevuld op basis van de volgende regels, die in volgorde van prioriteit worden vermeld.

    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

Om de parentId sleutel binnen customDimensions van de customEvent tabel in de logboeken te populeren, declareert u de tag parentDataTag of definieert u het data-parentid attribuut.

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

  • Wanneer u de parentDataTag plug-in declareert, wordt de waarde opgehaald van id of data-*-id gedefinieerd binnen het element dat zich het dichtst bij het geklikte element bevindt, in de vorm van parentId.
  • Als beide data-*-id en id zijn gedefinieerd, wordt prioriteit gegeven aan data-*-id.
  • Als parentDataTag is gedefinieerd maar kan de invoegtoepassing deze tag niet vinden onder de DOM-structuur, dan gebruikt de invoegtoepassing het id of data-*-id dat is gedefinieerd binnen het element dat zich het dichtst bij het aangeklikte 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 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". Om de waarde van id op te halen, stel 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 parentDataTag kenmerk declareert en het data-parentid of data-*-parentid attribuut definieert, wordt prioriteit gegeven aan data-parentid of data-*-parentid.

Als de telemetriewaarschuwing "Klik op gebeurtenisrijen zonder parentId-waarde" verschijnt, zie Het oplossen van de waarschuwing "Klik op gebeurtenisrijen zonder parentId-waarde".

Zie parentId voor voorbeelden die laten zien welke waarde als parentid wordt opgehaald voor verschillende configuraties.

Let op

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

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-. Voorbeeld:

  • 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 (*) in data-* vervangen door elke naam die voldoet aan de productieregel van XML-namen onder 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 Soort Standaard Beschrijving
automatisch vastleggen Booleaans Waar Configuratie automatisch vastleggen.
Terugbelverzoek IValueCallback Nul Configuratie van callbacks.
paginatags Voorwerp Nul Paginatags.
datatags ICustomDataTags Nul Aangepaste datatags die worden verstrekt om de standaardtags die worden gebruikt voor het vastleggen van klikgegevens te overschrijven.
urlCollectHash Booleaans Onwaar Hiermee schakelt u de logboekregistratie van waarden in na een #-teken van de URL.
urlCollectQuery Booleaans Onwaar Hiermee wordt de logboekregistratie van de queryreeks van de URL ingeschakeld.
gedragsvalidator Functie Nul Callback-functie die moet worden gebruikt voor de data-*-bhvr waardevalidatie. Zie de behaviorValidator-sectie voor meer informatie.
standaardrechtermuisknopgedrag Tekenreeks (of) nummer '' Standaardwaarde voor gedrag bij een rechtermuisklik. Deze waarde wordt overschreven als het element het data-*-bhvr kenmerk heeft.
verwijderOngeldigeEvenementen Booleaans Onwaar Vlag om gebeurtenissen te verwijderen die geen nuttige klikgegevens hebben.

IValueCallback

Naam Soort Standaard Beschrijving
paginanaam Functie Nul Functie om het standaardgedrag pageName voor het opnemen te overschrijven.
paginaActiePaginaTags Functie Nul Een callback-functie voor het uitbreiden van de standaardwaarde pageTags die tijdens een pageAction gebeurtenis wordt verzameld.
contentNaam Functie Nul Een callback-functie om aangepaste contentName aan te passen.

ICustomDataTags

Naam Soort Standaard Standaardtag die moet worden gebruikt in HTML Beschrijving
useDefaultContentNameOrId Booleaans Onwaar N.v.t. Als true, verzamelt het standaard HTML-attribuut id voor contentName wanneer een bepaald element niet is getagd met het standaard gegevensvoorvoegsel of customDataPrefix. Anders wordt het standaard HTML-kenmerk id voor contentName niet verzameld.
customDataPrefix Touwtje 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 Touwtje ai-blob data-ai-blob Invoegtoepassing ondersteunt een JSON-blobkenmerk in plaats van afzonderlijke data-* kenmerken.
metaDataPrefix Touwtje 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 Booleaans Onwaar N.v.t. Alle meta-elementnamen en inhoud van HTML Head automatisch vastleggen. Standaard ingesteld op onwaar. Indien ingeschakeld, overschrijft het de opgegeven metaDataPrefix.
ouderDataTag Touwtje 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 Touwtje ai-dnt data-ai-dnt De invoegtoepassing voor het vastleggen van telemetriegegevens negeert HTML-elementen met dit kenmerk.

gedragsvalidator

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. Het doel is om de gegevensstructuur van uw eigen gedrag in te brengen. 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.
Gedragskaartvalidator 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 volledige teksttekenreeks. Als de kosten geen probleem zijn, kunt u de volledige tekstreeks 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

De volgende voorbeelden laten zien welke waarde als parentId wordt opgehaald voor verschillende configuraties.

In de voorbeelden wordt getoond hoe de invoegtoepassing, als parentDataTag is gedefinieerd maar de tag niet kan vinden onder de DOM-structuur, gebruikmaakt van id van het 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 het aangeklikte element <Button> is de waarde parentId , not_specifiedomdat 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 gegevens van de ouder-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>

Voor het aangeklikte element <Button>, is de waarde van parentIdparentid2. parentDataTag Hoewel dit wordt gedeclareerd, wordt het data-parentid rechtstreeks gedefinieerd binnen het element. Daarom heeft deze waarde voorrang op alle andere ouder-IDs 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 van parentDataTag nuttig kan zijn om een waarde te verzamelen voor parentId, in gevallen waarin dynamische elementen geen id of data-*-id hebben.

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>

Voor het aangeklikte element <Button> is de waarde van parentIdtest6parent, omdat parentDataTag is gedeclareerd. Met deze declaratie kan de invoegtoepassing de huidige elementstructuur doorlopen en daarom wordt de id van het dichtstbijzijnde bovenliggende element gebruikt wanneer de details van de bovenliggende id niet rechtstreeks in het huidige element worden opgegeven. Met de data-group="buttongroup1" gedefinieerd, vindt de invoegtoepassing de parentId efficiënter.

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

Probleemoplossing

Zie het speciale artikel over probleemoplossing.

Volgende stappen