Aktivera plugin-programmet Klicka på Analys för automatisk insamling

  • Artikel

Application Insights JavaScript SDK-funktionstillägg är extra funktioner som kan läggas till i Application Insights JavaScript SDK för att förbättra dess funktioner.

I den här artikeln går vi igenom plugin-programmet Click Analytics som automatiskt spårar klickhändelser på webbsidor och använder data-* attribut eller anpassade taggar på HTML-element för att fylla i händelsetelemetri.

Förutsättningar

Installera JavaScript SDK innan du aktiverar plugin-programmet Click Analytics.

Vilka data samlar plugin-programmet in?

Följande nyckelegenskaper registreras som standard när plugin-programmet är aktiverat.

Anpassade händelseegenskaper

Namn Beskrivning Exempel
Name Namnet på den anpassade händelsen. Mer information om hur ett namn fylls i finns i kolumnen Namn. Om
itemType Typ av händelse. customEvent
sdkVersion Version av Application Insights SDK tillsammans med klicka på plugin-program. JavaScript:2_ClickPlugin2

Anpassade dimensioner

Namn Beskrivning Exempel
actionType Åtgärdstyp som orsakade klickhändelsen. Det kan vara ett vänster- eller högerklick. CL
baseTypeSource Bastypkälla för den anpassade händelsen. ClickEvent
clickCoordinates Koordinater där klickhändelsen utlöses. 659X47
innehåll Platshållare för att lagra extra data-* attribut och värden. [{sample1:value1, sample2:value2}]
Sidnamn Rubrik på sidan där klickhändelsen utlöses. Exempelrubrik
parentId ID eller namn på det överordnade elementet. Mer information om hur ett parentId fylls i finns i parentId-nyckeln. navbarContainer

Anpassade mått

Namn Beskrivning Exempel
timeToAction Tiden det tog i millisekunder för användaren att klicka på elementet sedan den första sidinläsningen. 87407

Lägg till plugin-programmet Klicka på analys

Användare kan konfigurera plugin-programmet Click Analytics Auto-Collection via JavaScript (Web) SDK Loader Script eller npm och sedan lägga till ett ramverkstillägg.

Kommentar

Stödet för inmatning av instrumentationsnycklar upphör den 31 mars 2025. Inmatningen av instrumenteringsnyckeln fortsätter att fungera, men vi kommer inte längre att tillhandahålla uppdateringar eller stöd för funktionen. Övergå till anslutningssträng för att dra nytta av nya funktioner.

Lägga till koden

  1. Klistra in SDK-inläsningsskriptet för JavaScript (Web) överst på varje sida som du vill aktivera Application Insights för.

     <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. Mer information om hur du lägger till eller uppdaterar Skriptkonfiguration för JavaScript (webb) SDK-inläsare finns i Skriptkonfiguration för JavaScript (webb) SDK.

Dricks

Om du vill lägga till ett ramverkstillägg eller om du redan har lagt till ett kan du läsa kodexemplen React, React Native och Angular för hur du lägger till plugin-programmet Click Analytics.

(Valfritt) Ange den autentiserade användarkontexten

Om du vill ange den här valfria inställningen kan du läsa Ange den autentiserade användarkontexten.

Om du använder en HEART-arbetsbok med plugin-programmet Click Analytics behöver du inte ange den autentiserade användarkontexten för att se telemetridata. Mer information finns i dokumentationen för HEART-arbetsboken.

Använda plugin-programmet

I följande avsnitt beskrivs hur du använder plugin-programmet.

Lagring av telemetridata

Telemetridata som genereras från klickhändelserna lagras som customEvents i avsnittet Application Insights-loggar > i Azure-portalen>.

name

Kolumnen namecustomEvent i fylls i baserat på följande regler:

  1. Om customDataPrefix inte deklareras i den avancerade konfigurationen används customEvent den id som anges i data-id namnet.
  2. Om customDataPrefix deklareras används angiven id i data-*-id, vilket innebär att den måste börja med data och sluta med id, som customEvent namn. Om det klickade HTML-elementet till exempel har attributet "data-sample-id"="button1"är det "button1"customEvent namnet.
  3. data-id Om attributet eller data-*-id inte finns och om useDefaultContentNameOrId är inställt på trueanvänds det klickade elementets HTML-attribut id eller innehållsnamn för elementet customEvent som namn. Om både id och innehållsnamnet finns ges prioritet till id.
  4. Om useDefaultContentNameOrId är falseär "not_specified"är namnet customEvent . Vi rekommenderar att du anger useDefaultContentNameOrId för att true generera meningsfulla data.

contentName

Om du har definierat contentName återanropsfunktionencontentNamei avancerad konfiguration fylls kolumnen customEvent i baserat på följande regler:

  • För ett klickat HTML-element <a> försöker plugin-programmet samla in värdet för dess innerText-attribut (text). Om plugin-programmet inte hittar det här attributet försöker det samla in värdet för dess innerHtml-attribut.

  • För en klickad HTML <img> eller <area> ett element samlar plugin-programmet in värdet för dess alt attribut.

  • För alla andra klickade HTML-element contentName fylls i baserat på följande regler, som visas i prioritetsordning:

    1. Värdet för value attributet för elementet
    2. Värdet för name attributet för elementet
    3. Värdet för alt attributet för elementet
    4. Värdet för attributet innerText för elementet
    5. Värdet för id attributet för elementet

parentId Nyckel

Om du vill fylla i parentId nyckeln i customDimensionscustomEvent tabellen i loggarna deklarerar du taggen parentDataTag eller definierar data-parentid attributet.

Värdet för parentId hämtas baserat på följande regler:

  • När du deklarerar parentDataTaghämtar plugin-programmet värdet id för eller data-*-id som definierats i elementet som är närmast det klickade elementet som parentId.
  • Om både data-*-id och id definieras ges prioritet till data-*-id.
  • Om parentDataTag har definierats men plugin-programmet inte kan hitta den här taggen under DOM-trädet använder id plugin-programmet eller data-*-id som definierats i elementet som är närmast det klickade elementet som parentId. Vi rekommenderar dock att data-{parentDataTag} du definierar attributet eller customDataPrefix-{parentDataTag} för att minska antalet loopar som behövs för att hitta parentId. Deklarering parentDataTag är användbart när du behöver använda plugin-programmet med anpassade alternativ.
  • Om nej parentDataTag har definierats och ingen parentId information ingår i det aktuella elementet samlas inget parentId värde in.
  • Om parentDataTag har definierats useDefaultContentNameOrId anges till false, och endast ett id attribut definieras i elementet som är närmast det klickade elementet, fylls i parentId som "not_specified". Om du vill hämta värdet för idanger du useDefaultContentNameOrId till true.

När du definierar data-parentid attributet eller data-*-parentid hämtar plugin-programmet instansen av det här attributet som är närmast det klickade elementet, inklusive i det klickade elementet om tillämpligt.

Om du deklarerar parentDataTag och definierar data-parentid attributet eller data-*-parentid ges prioritet till data-parentid eller data-*-parentid.

Om telemetrivarningen "Klicka på händelserader utan parentId-värde" visas kan du läsa Åtgärda varningen "Klicka på händelserader utan parentId-värde".

Exempel som visar vilket värde som hämtas som parentId för olika konfigurationer finns i Exempel på parentid nyckel.

Varning

  • En gång parentDataTag ingår i alla HTML-element i programmet börjar SDK:t leta efter överordnade taggar i hela programmet och inte bara HTML-elementet där du använde det.
  • Om du använder HEART-arbetsboken med plugin-programmet Click Analytics måste taggen parentDataTag deklareras i alla andra delar av en slutanvändares program för att HEART-händelser ska loggas eller identifieras.

customDataPrefix

Alternativet customDataPrefix i avancerad konfiguration ger användaren möjlighet att konfigurera ett prefix för dataattribut för att identifiera var hjärtat finns i personens kodbas. Prefixet måste alltid vara gemener och börja med data-. Till exempel:

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

I HTML kallas de globala attributen data-* anpassade dataattribut som gör att upphovsrättsskyddad information kan utbytas mellan HTML och dess DOM-representation med skript. Äldre webbläsare som Internet Explorer och Safari släpper attribut som de inte förstår, såvida de inte börjar med data-.

Du kan ersätta asterisken (*) i data-* med valfritt namn efter produktionsregeln för XML-namn med följande begränsningar.

  • Namnet får inte börja med "xml", oavsett vilket skiftläge som används för bokstäverna.
  • Namnet får inte innehålla ett semikolon (U+003A).
  • Namnet får inte innehålla versaler.

Lägga till avancerad konfiguration

Name Type Standardvärde Description
autoCapture Booleskt Sant Automatisk avbildningskonfiguration.
Motringning IValueCallback Null Konfiguration av återanrop.
pageTags Objekt Null Sidtaggar.
dataTags ICustomDataTags Null Anpassade datataggar som tillhandahålls för att åsidosätta standardtaggar som används för att samla in klickdata.
urlCollectHash Booleskt Falsk Aktiverar loggning av värden efter ett "#"-tecken för URL:en.
urlCollectQuery Booleskt Falsk Aktiverar loggning av frågesträngen för URL:en.
behaviorValidator Function Null Återanropsfunktion som ska användas för värdeverifieringen data-*-bhvr . Mer information finns i avsnittet behaviorValidator.
defaultRightClickBhvr Strängnummer (eller) '' Standardbeteendevärde när en högerklickad händelse har inträffat. Det här värdet åsidosättas om elementet har attributet data-*-bhvr .
dropInvalidEvents Booleskt Falsk Flagga för att släppa händelser som inte har användbara klickdata.

IValueCallback

Name Type Standardvärde Description
Sidnamn Function Null Funktion för att åsidosätta standardbeteendet pageName för insamling.
pageActionPageTags Function Null En återanropsfunktion för att utöka standardvärdet pageTags som samlas in under en pageAction händelse.
contentName Function Null En återanropsfunktion för att fylla i anpassade contentName.

ICustomDataTags

Name Type Standardvärde Standardtagg som ska användas i HTML Description
useDefaultContentNameOrId Booleskt Falsk Inte tillgängligt Om truesamlar in standard-HTML-attribut id för contentName när ett visst element inte är taggat med standarddataprefixet eller customDataPrefix. Annars samlas standard-HTML-attributet id för contentName inte in.
customDataPrefix String data- data-* Namn och värde för automatisk avbildning av innehåll för element som taggas med angivet prefix. Kan data-*-iddata-<yourcustomattribute> till exempel användas i HTML-taggarna.
aiBlobAttributeTag String ai-blob data-ai-blob Plugin-programmet stöder ett JSON-blobattribut i stället för enskilda data-* attribut.
metaDataPrefix String Null Inte tillgängligt Automatiskt avbilda HTML-huvudets metaelementnamn och innehåll med angivet prefix när det registreras. Kan till exempel custom- användas i HTML-metataggen.
captureAllMetaDataContent Booleskt Falsk Inte tillgängligt Samla automatiskt in alla HTML-huvudets metaelementnamn och innehåll. Standardvärdet är falskt. Om aktiverad åsidosätter den angivna metaDataPrefix.
parentDataTag String Null Inte tillgängligt Hämtar parentId i loggarna när data-parentid eller data-*-parentid inte påträffas. För effektivitet slutar att bläddra upp DOM för att samla in innehållsnamn och värde för element när data-{parentDataTag} eller customDataPrefix-{parentDataTag} attribut påträffas. Mer information finns i parentId-nyckeln.
dntDataTag String ai-dnt data-ai-dnt Plugin-programmet för att samla in telemetridata ignorerar HTML-element med det här attributet.

behaviorValidator

Funktionerna behaviorValidator kontrollerar automatiskt att taggade beteenden i kod överensstämmer med en fördefinierad lista. Funktionerna säkerställer att taggade beteenden överensstämmer med företagets etablerade taxonomi. Det är inte nödvändigt eller förväntat att de flesta Azure Monitor-kunder använder dessa funktioner, men de är tillgängliga för avancerade scenarier. Funktionerna behaviorValidator kan hjälpa dig med mer tillgängliga metoder.

Beteenden visas i fältet customDimensions i tabellen CustomEvents.

Återanropsfunktioner

Tre olika behaviorValidator återanropsfunktioner exponeras som en del av det här tillägget. Du kan också använda dina egna återanropsfunktioner om de exponerade funktionerna inte löser dina behov. Avsikten är att ta med ditt eget beteendes datastruktur. Plugin-programmet använder den här valideringsfunktionen när beteendet extraheras från datataggar.

Namn Beskrivning
BehaviorValueValidator Använd den här återanropsfunktionen om ditt beteendes datastruktur är en matris med strängar.
BehaviorMapValidator Använd den här återanropsfunktionen om ditt beteendes datastruktur är en ordlista.
BehaviorEnumValidator Använd den här återanropsfunktionen om ditt beteendes datastruktur är en Uppräkning.

Skicka in sträng kontra numeriska värden

Om du vill minska antalet byte som du skickar skickar du in talvärdet i stället för den fullständiga textsträngen. Om kostnaden inte är ett problem kan du skicka in den fullständiga textsträngen (t.ex. NAVIGATIONBACK).

Exempelanvändning med behaviorValidator

Här är ett exempel på hur en beteendekarteverifierare kan se ut. Din kan se annorlunda ut, beroende på organisationens taxonomi och de händelser du samlar in.

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

Exempelapp

Se en enkel webbapp med plugin-programmet Click Analytics Autocollection aktiverat för att implementera anpassade händelseegenskaper som Name och parentid anpassat beteende och innehåll. Mer information om var du hittar klickdata finns i exempelappens readme .

Exempel på parentId nyckel

I följande exempel visas vilket värde som hämtas som parentId för olika konfigurationer.

Exemplen visar hur om parentDataTag har definierats men plugin-programmet inte kan hitta den här taggen under DOM-trädet, plugin-programmet använder id det närmaste överordnade elementet.

Exempel 1

I exempel 1 parentDataTag deklareras inte och data-parentiddata-*-parentid definieras inte i något element. Det här exemplet visar en konfiguration där ett värde för parentId inte samlas in.

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>

För det klickade elementet <Button> är “not_specified”värdet parentId för , eftersom ingen parentDataTag information har definierats och inget överordnat element-ID anges i det aktuella elementet.

Exempel 2

I exempel 2 parentDataTag deklareras och data-parentid definieras. Det här exemplet visar hur information om överordnat ID samlas in.

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>

För det klickade elementet <Button>är värdet parentId för parentid2. Även om parentDataTag deklareras data-parentid definieras den direkt i elementet. Därför har det här värdet företräde framför alla andra överordnade ID:er eller ID-uppgifter som definierats i dess överordnade element.

Exempel 3

I exempel 3 parentDataTag deklareras och data-parentid attributet eller data-*-parentid definieras inte. Det här exemplet visar hur deklarering parentDataTag kan vara användbart för att samla in ett värde för parentId fall där dynamiska element inte har en id eller 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>

För det klickade elementet <Button>är test6parentvärdet parentId för , eftersom parentDataTag deklareras. Med den här deklarationen kan plugin-programmet passera det aktuella elementträdet och därför används ID:t för dess närmaste överordnade när överordnad ID-information inte tillhandahålls direkt i det aktuella elementet. Med den data-group="buttongroup1" definierade hittar plugin-programmet det parentId effektivare.

Om du tar bort data-group="buttongroup1" attributet är värdet parentId för fortfarande test6parent, eftersom parentDataTag det fortfarande är deklarerat.

Felsökning

Se den dedikerade felsökningsartikeln.

Nästa steg