Dela via

Aktivera insticksprogrammet Klickanalys för automatisk insamling

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
Namn Namnet på den anpassade händelsen. Mer information om hur ett namn fylls i finns i kolumnen Namn. Om
objekttyp Typ av händelse. anpassad händelse
SDK-version Version av Application Insights SDK tillsammans med klicktillägg. JavaScript:2_ClickPlugin2

Anpassade dimensioner

Namn beskrivning Exempel
åtgärdstyp Åtgärdstyp som orsakade klickhändelsen. Det kan vara ett vänster- eller högerklick. CL
basitypskälla Bastypkälla för den anpassade händelsen. ClickEvent
klickkoordinater 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å föräldraelementet. Mer information om hur ett parentId fylls i finns i parentId-nyckeln. navbar-container

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 Click Analytics-plug-in

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ängar för att dra nytta av nya funktioner.

Lägga till koden

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

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.

Tips

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 Azure Portal > Application Insights-loggar>.

name

Kolumnen name i customEvent fylls i baserat på följande regler:

  1. Om customDataPrefix inte deklareras i den avancerade konfigurationen används id som data-id i customEvent namnet.
  2. Om customDataPrefix deklareras, används den angivna id som tillhandahålls i data-*-id, vilket betyder att den måste börja med data och sluta med id och används som customEvent-namn. Om det HTML-element som klickats på till exempel har attributet "data-sample-id"="button1", är "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 customEvent-namnet "not_specified". Vi rekommenderar att du anger useDefaultContentNameOrId till true för att generera meningsfulla data.

contentName

Om du har definierat contentName i avancerad konfiguration fylls kolumnen contentName 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>-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 parentDataTag, hämtar plugin-programmet värdet av id eller data-*-id som är definierat i det element 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 plugin-programmet id eller data-*-id, som är definierad inom det element som är närmast det klickade elementet, som parentId. Vi rekommenderar dock att du definierar antingen data-{parentDataTag}- eller customDataPrefix-{parentDataTag}-attributet 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 är definierat, anges useDefaultContentNameOrId till false, och endast ett id-attribut är definierat i elementet som är närmast det klickade elementet, fylls parentId i 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 "rader för klickhändelser utan parentId-värde" visas kan du läsa Åtgärda varningen "rader för klickhändelser 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

AlternativetcustomDataPrefix 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 stå med små bokstäver 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 vilken kombination av versaler och gemener 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

Namn Typ Standardvärde beskrivning
automatisk inspelning Booleskt Sant Automatisk inspelningskonfiguration.
Återuppringning IValueCallback Noll Konfiguration av återanrop.
pageTags Objekt Noll Sidoetiketter.
dataetiketter ICustomDataTags Noll 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.
beteendevaliderare Funktion Noll Återanropsfunktion som ska användas för värdeverifieringen data-*-bhvr . Mer information finns i avsnittet behaviorValidator.
defaultRightClickBhvr Sträng (eller) nummer '' Standardbeteendevärde när en högerklickshändelse har inträffat. Det här värdet åsidosättas om elementet har attributet data-*-bhvr .
bortse från ogiltiga händelser Booleskt Falsk Flagga för att ignorera händelser som inte har användbara klickdata.

IValueCallback

Namn Typ Standardvärde beskrivning
sidnamn Funktion Noll Funktion för att åsidosätta standardbeteendet pageName för insamling.
sidaÅtgärdSidaTaggar Funktion Noll En återanropsfunktion för att utöka standardvärdet pageTags som samlas in under en pageAction händelse.
innehållNamn Funktion Noll En återanropsfunktion för att fylla i anpassade contentName.

ICustomDataTags

Namn Typ Standardvärde Standardtagg som ska användas i HTML beskrivning
användStandardInnehållsnamnEllerId Booleskt Falsk Ej tillämpligt 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 Sträng data- data-* Automatisk fångst av innehållsnamn och värde för element som taggas med angivet prefix. Kan data-*-iddata-<yourcustomattribute> till exempel användas i HTML-taggarna.
aiBlobAttributeTag Sträng ai-blob data-ai-blob Plugin-programmet stöder ett JSON-blobattribut i stället för enskilda data-* attribut.
metaDataPrefix Sträng Noll Ej tillämpligt Fånga automatiskt HTML-huvudets metaelements namn och innehåll med angivet prefix när det fångas. Kan till exempel custom- användas i HTML-metataggen.
captureAllMetaDataContent Booleskt Falsk Ej tillämpligt Samla automatiskt in alla HTML-huvudets metaelementnamn och innehåll. Standardvärdet är false. Om aktiverad åsidosätter den angivna metaDataPrefix.
parentDataTag Sträng Noll Ej tillämpligt 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 Sträng ai-dnt data-ai-dnt Plugin-programmet för att samla in telemetridata ignorerar HTML-element med det här attributet.

beteendevaliderare

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
Beteendevärdevalidator Använd den här återanropsfunktionen om ditt beteendes datastruktur är en matris med strängar.
Beteendekartvalidator Använd den här återanropsfunktionen om ditt beteendes datastruktur är en ordlista.
BehaviorEnumValidator Använd den här återanropsfunktionen om datastrukturen för ditt beteende är av enum-typ.

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 (till exempel 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 klickade elementet <Button> har parentId värdet not_specified, eftersom inga parentDataTag detaljer har definierats och inget överordnat element-ID har definierats i det aktuella elementet.

Exempel 2

I exempel 2 parentDataTag deklareras och data-parentid definieras. Det här exemplet visar hur information om parent-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 av parentIdparentid2. Även om parentDataTag deklareras, definieras data-parentid direkt inom elementet. Därför har det här värdet företräde framför alla andra överordnade ID:er eller ID-information 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 värdet på parentIdtest6parent, eftersom parentDataTag har deklarerats. 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. När data-group="buttongroup1" är definierad hittar plugin parentId mer effektivt.

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

Felsökning

Se den dedikerade felsökningsartikeln.

Nästa steg