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

Artikel
01/31/2025

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

Name	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

Name	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}]
pageName	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

Name	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

SDK-inläsningsskript för JavaScript (web)
npm-paket

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.

Installera npm-paketet:

npm install --save @microsoft/applicationinsights-clickanalytics-js @microsoft/applicationinsights-web


import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js';

const clickPluginInstance = new ClickAnalyticsPlugin();
// Click Analytics configuration
const clickPluginConfig = {
  autoCapture: true
};
// Application Insights Configuration
const 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
  },
};

const appInsights = new ApplicationInsights({ config: configObj });
appInsights.loadAppInsights();

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

`name`

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

Om customDataPrefix inte deklareras i den avancerade konfigurationen används customEvent den id som anges i data-id namnet.
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.
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.
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 återanropsfunktionencontentName i 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 customDimensions customEvent 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

Namn	Type	Standardvärde	beskrivning
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	Boolean	Falsk	Aktiverar loggning av värden efter ett "#"-tecken för URL:en.
urlCollectQuery	Boolean	Falsk	Aktiverar loggning av frågesträngen för URL:en.
behaviorValidator	Funktion	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	Boolean	Falsk	Flagga för att släppa händelser som inte har användbara klickdata.

IValueCallback

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

ICustomDataTags

Namn	Type	Standardvärde	Standardtagg som ska användas i HTML	beskrivning
useDefaultContentNameOrId	Boolean	Falsk	Ej tillämpligt	Om `true`samlar 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	Ej tillämpligt	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	Boolean	Falsk	Ej tillämpligt	Samla automatiskt in alla HTML-huvudets metaelementnamn och innehåll. Standardvärdet är falskt. Om aktiverad åsidosätter den angivna `metaDataPrefix`.
parentDataTag	String	Null	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	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.

Name	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 (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-parentid data-*-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-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 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

Bekräfta att data flödar.
Se dokumentationen om hur du använder HEART-arbetsboken för utökad produktanalys.
Se GitHub-lagringsplatsen och npm-paketet för plugin-programmet Click Analytics Autocollection.
Använd Händelseanalys i användningsmiljön för att analysera de översta klicken och segmentera efter tillgängliga dimensioner.
Se Log Analytics om du inte är bekant med processen med att skriva en fråga.
Skapa en arbetsbok eller exportera till Power BI för att skapa anpassade visualiseringar av klickdata.

Dela via

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

Förutsättningar

Vilka data samlar plugin-programmet in?

Anpassade händelseegenskaper

Anpassade dimensioner

Anpassade mått

Lägg till plugin-programmet Klicka på analys

Lägga till koden

(Valfritt) Ange den autentiserade användarkontexten

Använda plugin-programmet

Lagring av telemetridata

`name`

`contentName`

`parentId` nyckel

`customDataPrefix`

Lägga till avancerad konfiguration

IValueCallback

ICustomDataTags

behaviorValidator

Återanropsfunktioner

Skicka in sträng kontra numeriska värden

Exempelanvändning med behaviorValidator

Exempelapp

Exempel på `parentId` nyckel

Exempel 1

Exempel 2

Exempel 3

Felsökning

Nästa steg

Feedback

Ytterligare resurser

Dela via

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

Förutsättningar

Vilka data samlar plugin-programmet in?

Anpassade händelseegenskaper

Anpassade dimensioner

Anpassade mått

Lägg till plugin-programmet Klicka på analys

Lägga till koden

(Valfritt) Ange den autentiserade användarkontexten

Använda plugin-programmet

Lagring av telemetridata

name

contentName

parentId nyckel

customDataPrefix

Lägga till avancerad konfiguration

IValueCallback

ICustomDataTags

behaviorValidator

Återanropsfunktioner

Skicka in sträng kontra numeriska värden

Exempelanvändning med behaviorValidator

Exempelapp

Exempel på parentId nyckel

Exempel 1

Exempel 2

Exempel 3

Felsökning

Nästa steg

Feedback

Ytterligare resurser

`name`

`contentName`

`parentId` nyckel

`customDataPrefix`

Exempel på `parentId` nyckel