Włączanie wtyczki automatycznej kolekcji analizy kliknięć

  • Artykuł

Rozszerzenia funkcji zestawu SDK języka JavaScript Szczegółowe informacje aplikacji to dodatkowe funkcje, które można dodać do zestawu SDK języka JavaScript aplikacji Szczegółowe informacje, aby zwiększyć jego funkcjonalność.

W tym artykule omówiono wtyczkę Click Analytics, która automatycznie śledzi zdarzenia kliknięć na stronach internetowych i używa data-* atrybutów lub dostosowanych tagów w elementach HTML w celu wypełnienia telemetrii zdarzenia.

Wymagania wstępne

Zainstaluj zestaw SDK języka JavaScript przed włączeniem wtyczki Click Analytics.

Jakie dane zbiera wtyczka?

Następujące właściwości klucza są domyślnie przechwytywane po włączeniu wtyczki.

Właściwości zdarzenia niestandardowego

Nazwa/nazwisko opis Przykład
Nazwisko Nazwa zdarzenia niestandardowego. Aby uzyskać więcej informacji na temat sposobu wypełniania nazwy, zobacz Nazwa kolumny. Informacje
Itemtype Typ zdarzenia. customEvent
sdkVersion Wersja zestawu SDK usługi Application Szczegółowe informacje wraz z wtyczką click. JavaScript:2_ClickPlugin2

Wymiary niestandardowe

Nazwa/nazwisko opis Przykład
actionType Typ akcji, który spowodował zdarzenie kliknięcia. Może to być kliknięcie w lewo lub prawym przyciskiem myszy. CL
baseTypeSource Źródło typu podstawowego zdarzenia niestandardowego. Kliknij pozycję Wymyśl
clickCoordinates Współrzędne, w których jest wyzwalane zdarzenie kliknięcia. 659X47
content Symbol zastępczy do przechowywania dodatkowych data-* atrybutów i wartości. [{sample1:value1, sample2:value2}]
Pagename Tytuł strony, na której jest wyzwalane zdarzenie kliknięcia. Tytuł przykładu
Parentid Identyfikator lub nazwa elementu nadrzędnego. Aby uzyskać więcej informacji na temat wypełniania identyfikatora nadrzędnego, zobacz parentId key (Klucz parentId). navbarContainer

Pomiary niestandardowe

Nazwa/nazwisko opis Przykład
timeToAction Czas potrzebny użytkownikowi na kliknięcie elementu w milisekundach od momentu załadowania początkowej strony. 87407

Dodawanie wtyczki Click Analytics

Użytkownicy mogą skonfigurować wtyczkę automatycznego zbierania kliknięć za pomocą skryptu modułu ładującego zestawu SDK języka JavaScript (Web) lub narzędzia npm, a następnie opcjonalnie dodać rozszerzenie struktury.

Uwaga

31 marca 2025 r. zostanie zakończone świadczenie pomocy technicznej dla pozyskiwania klucza instrumentacji. Pozyskiwanie klucza instrumentacji będzie nadal działać, ale nie udostępnimy już aktualizacji ani obsługi funkcji. Przejście do parametry połączenia w celu skorzystania z nowych funkcji.

Dodawanie kodu

  1. Wklej skrypt modułu ładującego zestawu JAVAScript (Web) SDK w górnej części każdej strony, dla której chcesz włączyć Szczegółowe informacje aplikacji.

     <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. Aby dodać lub zaktualizować konfigurację skryptu modułu ładującego zestawu SDK języka JavaScript (Web), zobacz Konfiguracja skryptu modułu ładującego zestawu JAVAScript (Web).

Napiwek

Jeśli chcesz dodać rozszerzenie struktury lub został już dodany, zobacz przykłady kodu React, React Native i Angular, aby dowiedzieć się, jak dodać wtyczkę Click Analytics.

(Opcjonalnie) Ustawianie kontekstu uwierzytelnioowanego użytkownika

Jeśli chcesz ustawić to ustawienie opcjonalne, zobacz Ustawianie kontekstu uwierzytelnionych użytkowników.

Jeśli używasz skoroszytu HEART z wtyczką Click Analytics, nie musisz ustawiać kontekstu uwierzytelnionego użytkownika, aby wyświetlić dane telemetryczne. Aby uzyskać więcej informacji, zobacz dokumentację skoroszytu HEART.

Korzystanie z wtyczki

W poniższych sekcjach opisano sposób używania wtyczki.

Magazyn danych telemetrycznych

Dane telemetryczne generowane na podstawie zdarzeń kliknięcia są przechowywane w customEvents sekcji Dzienniki Szczegółowe informacje > aplikacji w witrynie Azure Portal>.

name

Kolumna name obiektu customEvent jest wypełniana na podstawie następujących reguł:

  1. Jeśli customDataPrefix nie zostanie zadeklarowana w konfiguracji zaawansowanej, id parametr podany w elemecie data-id jest używany jako customEvent nazwa.
  2. Jeśli customDataPrefix jest zadeklarowany, podany w elemecie data-*-id, co oznacza, id że musi zaczynać się od data i kończyć ciągiem id, jest używany jako customEvent nazwa. Jeśli na przykład kliknięty element HTML ma atrybut "data-sample-id"="button1", "button1" to jest customEvent nazwą.
  3. data-id Jeśli atrybut or data-*-id nie istnieje i jeśli useDefaultContentNameOrId jest ustawiony na truewartość , atrybut HTML id lub nazwa zawartości elementu klikniętego jest używana jako customEvent nazwa. Jeśli zarówno, jak id i nazwa zawartości są obecne, pierwszeństwo ma wartość id.
  4. Jeśli useDefaultContentNameOrId ma wartość falsecustomEvent , nazwa to "not_specified". Zalecamy ustawienie wartości useDefaultContentNameOrId na wartość w true celu generowania znaczących danych.

contentName

Jeśli masz contentName funkcję wywołania zwrotnego w konfiguracji zaawansowanej zdefiniowanej, kolumna contentName obiektu customEvent zostanie wypełniona na podstawie następujących reguł:

  • W przypadku klikniętego elementu HTML <a> wtyczka próbuje zebrać wartość atrybutu innerText (text). Jeśli wtyczka nie może odnaleźć tego atrybutu, próbuje zebrać wartość jego atrybutu innerHtml.

  • W przypadku klikniętego kodu HTML <img> lub <area> elementu wtyczka zbiera wartość jego alt atrybutu.

  • Dla wszystkich innych kliknięć elementów contentName HTML jest wypełniany na podstawie następujących reguł, które są wymienione w kolejności pierwszeństwa:

    1. Wartość atrybutu value elementu
    2. Wartość atrybutu name elementu
    3. Wartość atrybutu alt elementu
    4. Wartość atrybutu innerText elementu
    5. Wartość atrybutu id elementu

parentId Klucz

Aby wypełnić parentId klucz w customEventcustomDimensions tabeli w dziennikach, zadeklaruj tag parentDataTag lub zdefiniuj data-parentid atrybut.

Wartość parametru parentId jest pobierana na podstawie następujących reguł:

  • Po zadeklarowaniu parentDataTagwtyczki pobiera wartość id lub data-*-id zdefiniowaną w elemecie, który znajduje się najbliżej klikniętego elementu jako parentId.
  • Jeśli obie data-*-id wartości i id są zdefiniowane, pierwszeństwo ma wartość data-*-id.
  • Jeśli parentDataTag jest zdefiniowana, ale wtyczka nie może odnaleźć tego tagu w drzewie DOM, wtyczka używa id elementu lub data-*-id zdefiniowanego w elemecie znajdującym się najbliżej klikniętego elementu jako parentId. Zalecamy jednak zdefiniowanie atrybutu data-{parentDataTag} or customDataPrefix-{parentDataTag} w celu zmniejszenia liczby pętli potrzebnych do znalezienia parentIdelementu . Deklarowanie parentDataTag jest przydatne, gdy musisz użyć wtyczki z dostosowanymi opcjami.
  • Jeśli wartość nie parentDataTag jest zdefiniowana i żadne informacje nie parentId są uwzględniane w bieżącym elemencie, żadna wartość nie parentId jest zbierana.
  • Jeśli parentDataTag wartość jest zdefiniowana, useDefaultContentNameOrId jest ustawiona na false, a tylko id atrybut jest zdefiniowany w elemecie znajdującym się najbliżej klikniętego elementu, element parentId zostanie wypełniony jako "not_specified". Aby pobrać wartość id, ustaw useDefaultContentNameOrId wartość na true.

Podczas definiowania atrybutu data-parentid lub data-*-parentid wtyczka pobiera wystąpienie tego atrybutu znajdującego się najbliżej klikniętego elementu, w tym w ramach klikniętego elementu, jeśli ma to zastosowanie.

W przypadku deklarowania parentDataTag i definiowania atrybutu data-parentid or data-*-parentid pierwszeństwo ma wartość data-parentid lub data-*-parentid.

Jeśli zostanie wyświetlone ostrzeżenie telemetryczne "Kliknij wiersze zdarzeń bez wartości parentId", zobacz Naprawianie ostrzeżenia "Klikanie wierszy zdarzeń bez wartości parentId".

Przykłady pokazujące, która wartość jest pobierana jako parentId dla różnych konfiguracji, zobacz Przykłady parentid klucza.

Uwaga

  • Po parentDataTag dołączeniu do dowolnego elementu HTML w całej aplikacji zestaw SDK zaczyna szukać tagów elementów nadrzędnych w całej aplikacji, a nie tylko elementu HTML, w którym został użyty.
  • Jeśli używasz skoroszytu HEART z wtyczką Click Analytics, aby zdarzenia HEART zostały zarejestrowane lub wykryte, tag parentDataTag musi zostać zadeklarowany we wszystkich innych częściach aplikacji użytkownika końcowego.

customDataPrefix

Opcja customDataPrefix w konfiguracji zaawansowanej zapewnia użytkownikowi możliwość skonfigurowania prefiksu atrybutu danych w celu ułatwienia identyfikacji lokalizacji serca w bazie kodu danej osoby. Prefiks musi być zawsze małymi literami i zaczynać się od data-. Przykład:

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

W kodzie HTML atrybuty globalne są nazywane atrybutami danych niestandardowych, data-* które umożliwiają wymianę zastrzeżonych informacji między kodem HTML i jego reprezentacją DOM przez skrypty. Starsze przeglądarki, takie jak Internet Explorer i Safari, upuszczają atrybuty, których nie rozumieją, chyba że zaczynają się od data-.

Gwiazdkę (*) data-* można zastąpić dowolną nazwą zgodnie z regułą produkcyjną nazw XML następującymi ograniczeniami.

  • Nazwa nie może zaczynać się od "xml", niezależnie od wielkości liter.
  • Nazwa nie może zawierać średnika (U+003A).
  • Nazwa nie może zawierać wielkiej litery.

Dodawanie konfiguracji zaawansowanej

Imię i nazwisko/nazwa Type Wartość domyślna opis
autoCapture Wartość logiczna Prawda Konfiguracja automatycznego przechwytywania.
Wywołania zwrotnego IValueCallback Null (zero) Konfiguracja wywołań zwrotnych.
pageTags Obiekt Null (zero) Tagi stron.
dataTags ICustomDataTags Null (zero) Niestandardowe tagi danych udostępniane do zastępowania tagów domyślnych używanych do przechwytywania danych kliknięcia.
urlCollectHash Wartość logiczna Fałsz Włącza rejestrowanie wartości po znaku "#" adresu URL.
urlCollectQuery Wartość logiczna Fałsz Włącza rejestrowanie ciągu zapytania adresu URL.
behaviorValidator Function Null (zero) Funkcja wywołania zwrotnego do użycia na data-*-bhvr potrzeby walidacji wartości. Aby uzyskać więcej informacji, zobacz sekcję behaviorValidator.
defaultRightClickBhvr Liczba ciągów (lub) '' Domyślna wartość zachowania po wystąpieniu zdarzenia kliknięcia prawym przyciskiem myszy. Ta wartość jest zastępowana, jeśli element ma data-*-bhvr atrybut .
dropInvalidEvents Wartość logiczna Fałsz Flaga umożliwiająca usunięcie zdarzeń, które nie mają przydatnych danych kliknięcia.

IValueCallback

Imię i nazwisko/nazwa Type Wartość domyślna opis
Pagename Function Null (zero) Funkcja, aby zastąpić domyślne pageName zachowanie przechwytywania.
pageActionPageTags Function Null (zero) Funkcja wywołania zwrotnego umożliwiająca rozszerzenie wartości domyślnej pageTags zebranej pageAction podczas zdarzenia.
contentName Function Null (zero) Funkcja wywołania zwrotnego do wypełnienia dostosowanego contentNameelementu .

ICustomDataTags

Imię i nazwisko/nazwa Type Wartość domyślna Domyślny tag do użycia w kodzie HTML opis
useDefaultContentNameOrId Wartość logiczna Fałsz Nie dotyczy Jeśli trueelement zbiera standardowy atrybut id HTML, contentName gdy określony element nie jest oznaczony domyślnym prefiksem danych lub customDataPrefix. W przeciwnym razie standardowy atrybut id HTML nie contentName jest zbierany.
customDataPrefix Ciąg data- data-* Automatyczna nazwa i wartość zawartości przechwytywania elementów oznaczonych podanym prefiksem. Można na przykład data-*-iddata-<yourcustomattribute> użyć elementu w tagach HTML.
aiBlobAttributeTag Ciąg ai-blob data-ai-blob Wtyczka obsługuje atrybut obiektu blob JSON zamiast poszczególnych data-* atrybutów.
metaDataPrefix Ciąg Null (zero) Nie dotyczy Automatyczne przechwytywanie nazwy meta elementu i zawartości nagłówka HTML z podanym prefiksem podczas przechwytywania. Można na przykład custom- użyć w tagu meta HTML.
captureAllMetaDataContent Wartość logiczna Fałsz Nie dotyczy Automatyczne przechwytywanie wszystkich nazw elementów meta i zawartości nagłówka HTML. Wartość domyślna to „fałsz”. Jeśli to ustawienie jest włączone, zastąpi podane metaDataPrefixpolecenie .
parentDataTag Ciąg Null (zero) Nie dotyczy Pobiera element parentId w dziennikach, gdy data-parentiddata-*-parentid lub nie zostanie napotkany. W celu zwiększenia wydajności zatrzymuje przechodzenie do modelu DOM w celu przechwycenia nazwy zawartości i wartości elementów w przypadku data-{parentDataTag} napotkania atrybutu lub customDataPrefix-{parentDataTag} . Aby uzyskać więcej informacji, zobacz klucz parentId.
dntDataTag Ciąg ai-dnt data-ai-dnt Wtyczka do przechwytywania danych telemetrycznych ignoruje elementy HTML z tym atrybutem.

behaviorValidator

Funkcje behaviorValidator automatycznie sprawdzają, czy oznakowane zachowania w kodzie są zgodne ze wstępnie zdefiniowaną listą. Funkcje zapewniają spójność oznakowanych zachowań z ustanowioną taksonomią przedsiębiorstwa. Nie jest to wymagane ani oczekiwane, że większość klientów usługi Azure Monitor korzysta z tych funkcji, ale jest dostępna dla zaawansowanych scenariuszy. Funkcje behaviorValidator mogą pomóc w bardziej dostępnych rozwiązaniach.

Zachowania są wyświetlane w polu customDimensions w tabeli CustomEvents.

Funkcje wywołania zwrotnego

Trzy różne behaviorValidator funkcje wywołania zwrotnego są uwidocznione w ramach tego rozszerzenia. Możesz również użyć własnych funkcji wywołania zwrotnego, jeśli uwidocznione funkcje nie rozwiążą wymagań. Celem jest wprowadzenie struktury danych własnego zachowania. Wtyczka używa tej funkcji modułu sprawdzania poprawności podczas wyodrębniania zachowań z tagów danych.

Nazwa/nazwisko opis
BehaviorValueValidator Użyj tej funkcji wywołania zwrotnego, jeśli struktura danych twojego zachowania jest tablicą ciągów.
BehaviorMapValidator Użyj tej funkcji wywołania zwrotnego, jeśli struktura danych twojego zachowania jest słownikiem.
BehaviorEnumValidator Użyj tej funkcji wywołania zwrotnego, jeśli struktura danych twojego zachowania jest wyliczeniem.

Przekazywanie w ciągu a wartości liczbowych

Aby zmniejszyć liczbę przekazywanych bajtów, przekaż wartość liczbową zamiast pełnego ciągu tekstowego. Jeśli koszt nie jest problemem, możesz przekazać pełny ciąg tekstowy (np. NAVIGATIONBACK).

Przykładowe użycie z zachowaniemValidator

Oto przykład tego, jak może wyglądać moduł sprawdzania poprawności mapy zachowania. Twój może wyglądać inaczej, w zależności od taksonomii organizacji i zbieranych zdarzeń.

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

Przykładowa aplikacja

Zobacz prostą aplikację internetową z włączoną wtyczką Autocollection Click Analytics, aby dowiedzieć się, jak zaimplementować niestandardowe właściwości zdarzeń, takie jak Name i parentid i niestandardowe zachowanie i zawartość. Zobacz plik readme przykładowej aplikacji, aby uzyskać informacje o tym, gdzie można znaleźć dane.

parentId Przykłady klucza

W poniższych przykładach pokazano, która wartość jest pobierana jako parentId wartość dla różnych konfiguracji.

W przykładach pokazano, jak to jest parentDataTag zdefiniowane, ale wtyczka nie może odnaleźć tego tagu w drzewie DOM, wtyczka używa id najbliższego elementu nadrzędnego.

Przykład 1

Na przykład 1 element parentDataTag nie jest zadeklarowany i data-parentiddata-*-parentid nie jest zdefiniowany w żadnym elemecie. W tym przykładzie pokazano konfigurację, w której wartość parentId nie jest zbierana.

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>

W przypadku klikniętego elementu <Button> wartość to “not_specified”parentId , ponieważ żadne szczegóły nie parentDataTag są zdefiniowane i nie podano identyfikatora elementu nadrzędnego w bieżącym elemencie.

Przykład 2

W przykładzie 2 parentDataTag jest zadeklarowana i data-parentid zdefiniowana. W tym przykładzie pokazano, jak są zbierane szczegóły identyfikatora nadrzędnego.

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>

W przypadku klikniętego elementu <Button>wartość to parentIdparentid2. Mimo że parentDataTag jest zadeklarowany, element data-parentid jest zdefiniowany bezpośrednio w elemecie . W związku z tym ta wartość ma pierwszeństwo przed wszystkimi innymi identyfikatorami nadrzędnymi lub szczegółami identyfikatorów zdefiniowanymi w elementach nadrzędnych.

Przykład 3

Na przykład 3 jest zadeklarowany, parentDataTag a data-parentid atrybut or data-*-parentid nie jest zdefiniowany. W tym przykładzie pokazano, jak deklarowanie parentDataTag może być przydatne do zbierania wartości dla parentId przypadków, gdy elementy dynamiczne nie mają id elementu lub 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>

W przypadku klikniętego elementu <Button>wartość parentId to test6parent, ponieważ parentDataTag jest zadeklarowana. Ta deklaracja umożliwia wtyczkom przechodzenie przez bieżące drzewo elementów i dlatego identyfikator najbliższego elementu nadrzędnego będzie używany, gdy szczegóły identyfikatora nadrzędnego nie są bezpośrednio podane w bieżącym elemencie. Po zdefiniowaniu data-group="buttongroup1" wtyczka znajduje parentId się wydajniej.

Jeśli usuniesz data-group="buttongroup1" atrybut, wartość parentId jest nadal test6parent, ponieważ parentDataTag jest nadal zadeklarowana.

Rozwiązywanie problemów

Zobacz dedykowany artykuł dotyczący rozwiązywania problemów.

Następne kroki