Aktivieren des Plug-Ins für die automatische Erfassung von Klickanalysen

  • Artikel

Application Insights JavaScript SDK Funktionserweiterungen sind Zusatzfunktionen, die dem Application Insights JavaScript SDK hinzugefügt werden können, um seine Funktionalität zu verbessern.

In diesem Artikel befassen wir uns mit dem Klickanalyse-Plug-in, das automatisch Klickereignisse auf Webseiten verfolgt und data-*-Attribute oder benutzerdefinierte Tags von HTML-Elementen verwendet, um die Ereignistelemetrie zu füllen.

Voraussetzungen

Installieren Sie das JavaScript SDK, bevor Sie das Click Analytics-Plug-In aktivieren.

Welche Daten sammelt das Plug-In?

Die folgenden Schlüsseleigenschaften werden standardmäßig erfasst, wenn das Plug-In aktiviert ist.

Eigenschaften des benutzerdefinierten Ereignisses

Name Beschreibung Beispiel
Name Der Name des benutzerdefinierten Ereignisses. Weitere Informationen zum Eintragen eines Namens finden Sie in der Beschreibung der name-Spalte. Info
itemType Ereignistyp. CustomEvent
sdkVersion Version des Application Insights SDK zusammen mit dem Click-Plug-In. JavaScript:2_ClickPlugin2

Benutzerdefinierte Dimensionen

Name Beschreibung Beispiel
actionType Aktionstyp, der das Klickereignis verursacht hat. Es kann ein Links- oder Rechtsklick sein. CL
baseTypeSource Basistypquelle des benutzerdefinierten Ereignisses. ClickEvent
clickCoordinates Koordinaten, an denen das Klickereignis ausgelöst wird. 659X47
Inhalt Platzhalter zum Speichern zusätzlicher data-*-Attribute und -Werte. [{sample1:value1, sample2:value2}]
pageName Titel der Seite, auf der das Klickereignis ausgelöst wird. Beispieltitel
parentId ID oder Name des übergeordneten Elements Weitere Informationen zum Eintragen einer parentId finden Sie unter parentId-Schlüssel. navbarContainer

Benutzerdefinierte Messungen

Name Beschreibung Beispiel
timeToAction Dies ist die Zeit in Millisekunden, die Benutzer*innen seit dem ersten Seitenladevorgang auf das Element klicken. 87407

Hinzufügen des Plug-Ins für Klickanalyse

Benutzende können das Plug-In für die automatische Erfassung von Klickanalysen über das JavaScript (Web) SDK-Ladeprogrammskript oder npm einrichten und dann optional eine Frameworkerweiterung hinzufügen.

Hinweis

Am 31. März 2025 wird der Support für die auf Instrumentierungsschlüsseln basierende Erfassung eingestellt. Die Erfassung von Instrumentierungsschlüsseln funktioniert zwar weiterhin, wir stellen jedoch keine Updates und keinen Support mehr für das Feature bereit. Wechseln Sie zu Verbindungszeichenfolgen, damit Sie neue Funktionen nutzen können.

Hinzufügen des Codes

  1. Fügen Sie das JavaScript (Web) SDK Loader-Skript oben auf jeder Seite ein, für die Sie Application Insights aktivieren möchten.

     <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. Informationen zum Hinzufügen oder Aktualisieren der Konfiguration des JavaScript (Web) SDK-Ladeprogrammskripts finden Sie unter Konfiguration des JavaScript (Web) SDK Loader-Skripts.

Tipp

Wenn Sie eine Frameworkerweiterung hinzufügen möchten oder bereits eine hinzugefügt haben, lesen Sie die Codebeispiele React, React Native und Angular, um das Click Analytics-Plug-In hinzuzufügen.

(Optional) Festlegen des authentifizierten Benutzerkontexts

Wenn Sie diese optionale Einstellung festlegen wollen, finden Sie entsprechende Informationen im Artikel zum Festlegen des authentifizierten Benutzerkontexts.

Wenn Sie eine HEART-Arbeitsmappe mit dem Click Analytics-Plug-In verwenden, müssen Sie den authentifizierten Benutzerkontext nicht festlegen, um Telemetriedaten anzuzeigen. Weitere Informationen finden Sie in der Dokumentation zur HEART-Arbeitsmappe.

Verwenden des Plug-Ins

In den folgenden Abschnitten wird beschrieben, wie Sie das Plug-In verwenden.

Telemetriedatenspeicher

Aus Klickereignissen generierte Telemetriedaten werden im Azure-Portal unter „Application Insights“ im Abschnitt „Protokolle“ als customEvents gespeichert.

name

Die name-Spalte von customEvent wird auf der Grundlage der folgenden Regeln ausgefüllt:

  1. Wenn customDataPrefix nicht in der erweiterten Konfiguration deklariert ist, wird der in data-id angegebenen id als customEvent-Name verwendet.
  2. Wenn customDataPrefix deklariert wird, wird der in data-*-id angegebene id, was bedeutet, dass er mit data beginnen und mit id enden muss, als customEvent-Name verwendet wird. Wenn das angeklickte HTML-Element z.B. das Attribut "data-sample-id"="button1" hat, dann ist "button1" der customEvent-Name.
  3. Wenn das Attribut data-id oder data-*-id nicht vorhanden ist und wenn useDefaultContentNameOrId auf true festgelegt ist, wird das HTML-Attribut id oder der Inhaltsname des angeklickten Elements als customEvent-Name verwendet. Sind sowohl id als auch Inhaltsname vorhanden, hat id Vorrang.
  4. Wenn useDefaultContentNameOrIdfalse ist, lautet der customEvent Name "not_specified". Wir empfehlen, useDefaultContentNameOrId auf true zu setzen, um aussagekräftige Daten zu erzeugen.

contentName

Wenn Die die contentName Rückruffunktion in der erweiterten Konfiguration definiert haben, wird die contentName-Spalte des customEvent basierend auf den folgenden Regeln aufgefüllt:

  • Bei einem angeklickten HTML-Element versucht das Plug-In „<a>“, den Wert des innerText-Attributs (Text) zu erfassen. Wenn das Plug-In dieses Attribut nicht finden kann, versucht es, den Wert des innerHtml-Attributs zu sammeln.

  • Bei einem angeklickten <img>-HTML oder <area>-Element sammelt das Plug-In den Wert des alt-Attributs.

  • Für alle anderen angeklickten HTML-Elemente wird contentName basierend auf den folgenden Regeln aufgefüllt, die in der Reihenfolge der Rangfolge aufgeführt sind:

    1. Der Wert des value-Attributs für das Element
    2. Der Wert des name-Attributs für das Element
    3. Der Wert des alt-Attributs für das Element
    4. Der Wert des innerText-Attributs für das Element
    5. Der Wert des id-Attributs für das Element

parentId-Schlüssel

Um den parentId-Schlüssel in customDimensions der customEvent-Tabelle in den Protokollen einzutragen, deklarieren Sie das Tag parentDataTag, oder definieren Sie das data-parentid-Attribut.

Der Wert für parentId wird basierend auf den folgenden Regeln abgerufen:

  • Wenn Sie parentDataTag deklarieren, ruft das Plug-In den Wert von id oder data-*-id, der im Element definiert ist, das dem angeklickten Element am nächsten ist, als parentId ab.
  • Wenn data-*-id und id definiert sind, hat data-*-id Vorrang.
  • Wenn parentDataTag definiert ist, das Plug-In dieses Tag aber nicht in der DOM-Struktur finden kann, verwendet das Plug-In den Wert von id oder data-*-id, der im Element definiert ist, das dem angeklickten Element am nächsten ist, als parentId. Es wird jedoch empfohlen, das data-{parentDataTag}- oder customDataPrefix-{parentDataTag}-Attribut zu definieren, um die Anzahl der erforderlichen Schleifen zum Ermitteln von parentId zu reduzieren. Das Deklarieren von parentDataTag ist nützlich, wenn Sie das Plug-In mit benutzerdefinierten Optionen verwenden müssen.
  • Wenn parentDataTag nicht definiert ist und keine parentId-Informationen im aktuellen Element enthalten sind, wird kein parentId-Wert erfasst.
  • Wenn parentDataTag definiert ist, useDefaultContentNameOrId auf false festgelegt ist, und nur ein id-Attribut wird im Element definiert ist, das dem angeklickten Element am nächsten ist, wird "not_specified" als parentId eingetragen. Um den Wert von id abzurufen, legen Sie useDefaultContentNameOrId auf true fest.

Wenn Sie das data-parentid- oder data-*-parentid-Attribut definieren, ruft das Plug-In die Instanz dieses Attributs ab, das dem angeklickten Element am nächsten ist oder ggf. im angeklickten Elements vorhanden ist.

Wenn Sie parentDataTag deklarieren und das data-parentid- oder data-*-parentid-Attribut definieren, hat data-parentid bzw. data-*-parentid Vorrang.

Wenn die Telemetriewarnung „Zeilen mit Klickereignissen ohne parentId-Wert“ angezeigt wird, finden Sie weitere Informationen unter Beheben der Warnung „Zeilen mit Klickereignissen ohne parentId-Wert“.

Beispiele, die veranschaulichen, welcher Wert als parentId für verschiedene Konfigurationen abgerufen wird, finden Sie in den Beispielen für parentid-Schlüssel.

Achtung

  • Sobald parentDataTag in ein beliebiges HTML-Element in Ihrer Anwendung eingefügt wurde, beginnt das SDK mit der Suche nach übergeordneten Tags in der gesamten Anwendung und nicht nur in dem HTML-Element, in dem Sie es verwendet haben.
  • Wenn Sie die HEART-Arbeitsmappe mit dem Plug-In für Klickanalysen verwenden, muss das Tag parentDataTag in allen anderen Teilen der Anwendung eines Endbenutzers/einer Endbenutzerin deklariert werden, damit HEART-Ereignisse protokolliert oder erkannt werden können.

customDataPrefix

Die customDataPrefix-Option in der erweiterten Konfiguration bietet dem Benutzer die Möglichkeit, ein Datenattributpräfix zu konfigurieren, um ermitteln zu können, wo sich das HEART-Ereignis in der jeweiligen Codebasis befindet. Das Präfix muss immer Kleinbuchstaben verwenden und mit data- beginnen. Beispiel:

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

In HTML werden die globalen data-*-Attribute als benutzerdefinierte Datenattribute bezeichnet, die den Austausch proprietärer Informationen zwischen HTML und der DOM-Darstellung durch Skripts ermöglichen. Ältere Browser wie Internet Explorer und Safari lassen Attribute fallen, die sie nicht verstehen, es sei denn, sie beginnen mit data-.

Das Sternchen (*) in data-* kann durch einen beliebigen Namen ersetzt werden, der der Erstellungsregel für XML-Namen folgt. Dabei gelten die folgenden Einschränkungen:

  • Der Name darf nicht mit „xml“ beginnen, egal welche Groß- und Kleinschreibung für die Buchstaben verwendet wird.
  • Der Name darf kein Semikolon (U+003A) enthalten.
  • Der Name darf keine Großbuchstaben enthalten.

Hinzufügen der erweiterten Konfiguration

Name type Standard Beschreibung
autoCapture Boolean True Konfiguration der automatischen Erfassung.
Rückruf IValueCallback NULL Rückrufkonfiguration.
pageTags Object Null Seitentags.
dataTags ICustomDataTags NULL Benutzerdefinierte Datentags zum Überschreiben von Standardtags, die zum Erfassen von Klickdaten verwendet werden.
urlCollectHash Boolean False Aktiviert die Protokollierung von Werten nach einem #-Zeichen in der URL.
urlCollectQuery Boolean False Aktiviert die Protokollierung der Abfragezeichenfolge der URL.
behaviorValidator Funktion NULL Rückruffunktion, die für die data-*-bhvr-Wertüberprüfung verwendet werden soll. Weitere Informationen finden Sie im Abschnitt behaviorValidator.
defaultRightClickBhvr Zeichenfolge (oder Zahl) '' Standardwert für das Verhalten, wenn ein Rechtsklickereignis eingetreten ist. Dieser Wert wird überschrieben, wenn das Element das data-*-bhvr-Attribut aufweist.
dropInvalidEvents Boolean False Flag zum Löschen von Ereignissen, die keine nützlichen Klickdaten aufweisen.

IValueCallback

Name type Standard Beschreibung
pageName Funktion NULL Funktion, mit der Sie das Standardverhalten der pageName-Erfassung außer Kraft setzen können.
pageActionPageTags Funktion NULL Eine Rückruffunktion, um die standardmäßige pageTags, die während eines pageAction-Ereignisses gesammelt wird, zu ergänzen.
contentName Funktion NULL Eine Rückruffunktion zum Auffüllen der angepassten contentName.

ICustomDataTags

Name type Standard Standardtag für die Verwendung in HTML Beschreibung
useDefaultContentNameOrId Boolean False – Bei Einstellung auf true wird das Standard-HTML-Attribut id für contentName erfasst, wenn ein bestimmtes Element nicht mit dem Standarddatenpräfix oder customDataPrefix getaggt ist. Andernfalls wird das Standard-HTML-Attribut id für contentName nicht erfasst.
customDataPrefix Zeichenfolge data- data-* Automatische Erfassung der Inhaltsnamen und -werte von Elementen, die mit dem angegebenen Präfix gekennzeichnet sind. Beispielsweise können data-*-id und data-<yourcustomattribute> in den HTML-Tags verwendet werden.
aiBlobAttributeTag Zeichenfolge ai-blob data-ai-blob Das Plug-In unterstützt JSON-Blobattribute anstelle einzelner data-*-Attribute.
metaDataPrefix Zeichenfolge Null Nicht zutreffend Automatische Erfassung der Namen und Inhalte von META-Elementen mit dem angegebenen Präfix im HTML-Kopfteil. Beispielsweise kann custom- im HTML-META-Tag verwendet werden.
captureAllMetaDataContent Boolean False – Automatische Erfassung der Namen und Inhalte aller META-Elemente im HTML-Kopfteil. Der Standardwert ist "false". Ist diese Option aktiviert, wird das angegebene metaDataPrefix überschrieben.
parentDataTag Zeichenfolge Null Nicht zutreffend Ruft die parentId in den Protokollen ab, wenn data-parentid oder data-*-parentid nicht gefunden wird. Aus Effizienzgründen wird das aufwärtsgerichtete Durchlaufen des DOM zum Erfassen der Inhaltsnamen und Werte von Elementen beendet, wenn das data-{parentDataTag}- oder customDataPrefix-{parentDataTag}-Attribut gefunden wird. Weitere Informationen finden Sie unter parentId-Schlüssel.
dntDataTag Zeichenfolge ai-dnt data-ai-dnt HTML-Elemente mit diesem Attribut werden vom Plug-In zum Erfassen von Telemetriedaten ignoriert.

behaviorValidator

Die behaviorValidator-Funktionen überprüfen automatisch, ob markierte Verhaltensweisen im Code einer vordefinierten Liste entsprechen. Die Funktionen sorgen dafür, dass die getaggten Verhaltensweisen mit der etablierten Taxonomie Ihres Unternehmens übereinstimmen. Es wird nicht verlangt oder erwartet, dass diese Funktionen von den meisten Azure Monitor-Kunden verwendet werden, aber sie stehen für erweiterte Szenarios zur Verfügung. Die behaviorValidator-Funktionen können bei leichter zugänglichen Verfahren hilfreich sein.

Verhaltensweisen werden im customDimensions-Feld in der CustomEvents-Tabelle angezeigt.

Rückruffunktionen

Drei verschiedene behaviorValidator-Rückruffunktionen werden im Rahmen dieser Erweiterung angeboten. Sie können auch Ihre eigenen Rückruffunktionen verwenden, wenn die exponierten Funktionen Ihre Anforderungen nicht erfüllen. Die Absicht besteht darin, die Datenstruktur Ihres eigenen Verhaltens zu verwenden. Das Plug-In verwendet diese Validierungsfunktion beim Extrahieren der Verhaltensweisen aus den Daten-Tags.

Name Beschreibung
BehaviorValueValidator Verwenden Sie diese Rückruffunktion, wenn die Datenstruktur Ihres Verhaltens ein Array von Zeichenfolgen ist.
BehaviorMapValidator Verwenden Sie diese Rückruffunktion, wenn die Datenstruktur Ihres Verhaltens ein Wörterbuch ist.
BehaviorEnumValidator Verwenden Sie diese Rückruffunktion, wenn es sich bei der Verhaltensdatenstruktur um eine Enumeration handelt.

Übergeben von Zeichenfolgen und numerischen Werten

Um die Anzahl der übergebenen Bytes zu reduzieren, übergeben Sie den Zahlenwert anstelle der Volltextzeichenfolge. Wenn die Kosten kein Problem sind, können Sie die Volltextzeichenfolge übergeben (z. B. NAVIGATIONBACK).

Beispielsyntax mit behaviorValidator

Hier sehen Sie ein Beispiel dafür, wie eine Validierungssteuerelement für eine Verhaltenszuordnung aussehen könnte. Ihr Steuerelement kann je nach Taxonomie Ihrer Organisation und den von Ihnen erfassten Ereignissen anders aussehen.

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

Beispiel-App

Informationen zum Implementieren von benutzerdefinierten Ereigniseigenschaften wie Name und parentid und benutzerdefiniertem Verhalten und Inhalt finden Sie unter Einfache Web-App mit aktiviertem Click Analytics AutoCollection-Plug-In. Informationen dazu, wo Sie Klickdaten finden, finden Sie in der Infodatei der Beispiel-App.

Beispiele für parentId-Schlüssel

Die folgenden Beispiele veranschaulichen, welcher Wert als parentId für verschiedene Konfigurationen abgerufen wird.

Die Beispiele zeigen, wie das Plug-In die id des nächstgelegenen übergeordneten Elements verwendet, wenn parentDataTag definiert ist, aber das Plug-In dieses Tag nicht unter der DOM-Struktur findet.

Beispiel 1

In Beispiel 1 ist das parentDataTag nicht deklariert, und data-parentid oder data-*-parentid ist in keinem Element definiert. Dieses Beispiel zeigt eine Konfiguration, bei der ein Wert für parentId nicht erfasst wird.

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 das angeklickte Element <Button> ist parentId auf den Wert “not_specified” festgelegt, da keine parentDataTag-Details definiert sind und im aktuellen Element keine übergeordnete Element-ID angegeben wird.

Beispiel 2

In Beispiel 2 ist parentDataTag deklariert, und data-parentid ist definiert. In diesem Beispiel wird gezeigt, wie Details der übergeordneten ID erfasst werden.

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 das angeklickte Element <Button> weist parentId den Wert parentid2 auf. Obwohl parentDataTag deklariert ist, wird die data-parentid direkt innerhalb des Elements definiert. Daher hat dieser Wert Vorrang vor allen anderen übergeordneten IDs oder ID-Details, die in den übergeordneten Elementen definiert sind.

Beispiel 3

In Beispiel 3 ist parentDataTag deklariert, und das Attribut data-parentid oder data-*-parentid ist nicht definiert. In diesem Beispiel wird gezeigt, wie das Deklarieren von parentDataTag hilfreich sein kann, um einen Wert für parentId in solchen Fällen zu sammeln, in denen dynamische Elemente keine id oder data-*-id aufweisen.

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 das angeklickte Element <Button> weist parentId den Wert test6parent auf, weil parentDataTag deklariert ist. Diese Deklaration ermöglicht es dem Plug-In, die aktuelle Elementstruktur zu durchlaufen. Daher wird die ID des nächstgelegenen übergeordneten Elements verwendet, wenn Details der übergeordneten ID nicht direkt im aktuellen Element bereitgestellt werden. Wenn data-group="buttongroup1" definiert ist, kann das Plug-In die parentId effizienter ermitteln.

Wenn Sie das data-group="buttongroup1"-Attribut entfernen, ist der Wert von parentId immer noch test6parent, da parentDataTag immer noch deklariert ist.

Problembehandlung

Informationen finden Sie in dem dedizierten Artikel zur Problembehandlung.

Nächste Schritte