Udostępnij za pośrednictwem

Włącz wtyczkę automatycznego zbierania danych o kliknięciach

Rozszerzenia funkcji zestawu JAVAScript SDK usługi Application Insights to dodatkowe funkcje, które można dodać do zestawu SDK języka JavaScript usługi Application Insights, aby zwiększyć jego funkcjonalność.

W tym artykule omówiliśmy wtyczkę Click Analytics, która automatycznie śledzi kliknięcia na stronach internetowych, używając atrybutów data-* lub dostosowanych tagów w elementach HTML do zbierania danych telemetrycznych o zdarzeniach.

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
Nazwa/nazwisko Nazwa zdarzenia niestandardowego. Aby uzyskać więcej informacji na temat sposobu wypełniania nazwy, zobacz Nazwa kolumny. Informacje
typElementu Typ zdarzenia. customEvent
sdkVersion Wersja zestawu SDK usługi Application Insights wraz z wtyczką obsługującą kliknięcia. JavaScript:2_ClickPlugin2

Wymiary niestandardowe

Nazwa/nazwisko opis Przykład
typ akcji 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 bazowego zdarzenia niestandardowego. Wydarzenie kliknięcia
kliknijKoordynaty Współrzędne, w których jest wyzwalane zdarzenie kliknięcia. 659X47
zawartość Symbol zastępczy do przechowywania dodatkowych data-* atrybutów i wartości. [{sample1:value1, sample2:value2}]
nazwaStrony Tytuł strony, na której jest wyzwalane zdarzenie kliknięcia. Tytuł przykładu
parentId (identyfikator rodzica) Identyfikator lub nazwa elementu nadrzędnego. Aby uzyskać więcej informacji na temat wypełniania klucza parentId, zobacz klucz parentId. navbarContainer

Pomiary niestandardowe

Nazwa/nazwisko opis Przykład
czasNaDziałanie 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ę do automatycznego zbierania kliknięć za pomocą skryptu ładowania SDK języka JavaScript (Web) lub modułu npm, a następnie opcjonalnie dodać rozszerzenie frameworka.

Uwaga

31 marca 2025 r. zakończy się wsparcie dla pobierania klucza instrumentacji. Wprowadzanie klucza instrumentacji będzie nadal działać, ale nie będziemy już udostępniać aktualizacji ani wsparcia dla tej funkcji. Przejście do parametrów połączenia w celu skorzystania z nowych możliwości.

Dodawanie kodu

Wklej skrypt modułu ładującego zestawu JAVAScript (Web) SDK w górnej części każdej strony, dla której chcesz włączyć usługę Application Insights.

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

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 już to zrobiłeś, 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 usługi Application Insights > w witrynie Azure Portal>.

name

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

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

contentName

Jeśli masz zdefiniowaną funkcję wywołania zwrotnego w konfiguracji zaawansowanej, kolumna contentName obiektu 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 elementu HTML <img> lub <area> wtyczka zbiera wartość jego atrybutu alt.

  • Dla wszystkich innych klikniętych elementów HTML, contentName 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ć klucz parentId w tabeli customDimensions w ramach customEvent w dziennikach, zadeklaruj tag parentDataTag lub zdefiniuj atrybut data-parentid.

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

  • Po zadeklarowaniu parentDataTag, wtyczka pobiera wartość id lub data-*-id zdefiniowaną w elemencie, 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 zdefiniowany, ale wtyczka nie może odnaleźć tego tagu w drzewie DOM, wtyczka używa id lub data-*-id zdefiniowanego w elemencie znajdującym się najbliżej elementu, który został kliknięty, jako parentId. Zalecamy jednak zdefiniowanie atrybutu data-{parentDataTag} lub 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 żadna wartość parentDataTag nie jest zdefiniowana i żadne informacje parentId nie są uwzględnione w bieżącym elemencie, żadna wartość parentId nie jest zbierana.
  • Jeśli parentDataTag jest zdefiniowane, useDefaultContentNameOrId zostaje ustawione na false, a tylko atrybut id jest zdefiniowany w elemencie znajdującym się najbliżej klikniętego elementu, parentId zostaje wypełnione jako "not_specified". Aby pobrać wartość id, ustaw useDefaultContentNameOrId na wartość 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".

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

Uwaga

  • Po dołączeniu parentDataTag do dowolnego elementu HTML w aplikacji, SDK zaczyna szukać tagów elementów nadrzędnych w całej aplikacji, a nie tylko w tym elemencie 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

OpcjacustomDataPrefix 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-. Na 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-.

Można zastąpić gwiazdkę (*) w data-* dowolną nazwą zgodnie z regułą produkcyjną nazw XML z 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

Nazwa/nazwisko Typ Domyślny opis
automatycznePrzechwytywanie Typ logiczny Prawda Konfiguracja automatycznego przechwytywania.
funkcja zwrotna IValueCallback Null (zero) Konfiguracja wywołań zwrotnych.
tagi strony Objekt Null (zero) Tagi strony.
Tagi danych ICustomDataTags Null (zero) Niestandardowe tagi danych udostępniane do zastępowania tagów domyślnych używanych do przechwytywania danych kliknięcia.
urlCollectHash Typ logiczny Fałsz Włącza rejestrowanie wartości po znaku "#" adresu URL.
zapytanieZbieraniaURL Typ logiczny Fałsz Włącza rejestrowanie ciągu zapytania adresu URL.
walidator zachowania Funkcja Null (zero) Funkcja wywołania zwrotnego do sprawdzania poprawności wartości data-*-bhvr. 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 .
odrzućNiepoprawneZdarzenia Typ logiczny Fałsz Flaga służąca do usunięcia zdarzeń, które nie mają przydatnych danych dotyczących kliknięć.

IValueCallback

Nazwa/nazwisko Typ Domyślny opis
nazwaStrony Funkcja Null (zero) Funkcja zastępująca domyślne pageName zachowanie przechwytywania.
TagiDziałańNaStronie Funkcja Null (zero) Funkcja wywołania zwrotnego umożliwiająca rozszerzenie wartości domyślnej pageTags zebranej pageAction podczas zdarzenia.
nazwaTreści Funkcja Null (zero) Funkcja wywołania zwrotnego do wypełnienia dostosowanego contentNameelementu .

ICustomDataTags

Nazwa/nazwisko Typ Domyślny Domyślny tag do użycia w kodzie HTML opis
UżyjDomyślnejNazwyLubIdentyfikatoraZawartości Typ logiczny Fałsz Nie dotyczy Jeśli true, zbiera standardowy atrybut id HTML dla contentName, gdy określony element nie jest oznaczony domyślnym prefiksem danych lub customDataPrefix. W przeciwnym razie standardowy atrybut HTML id dla contentName nie jest zbierany.
customDataPrefix Sznurek data- data-* Automatyczne przechwytywanie nazwy i wartości zawartości elementów oznaczonych podanym prefiksem. Można na przykład data-*-iddata-<yourcustomattribute> użyć elementu w tagach HTML.
aiBlobAttributeTag Sznurek ai-blob data-ai-blob Wtyczka obsługuje atrybut typu JSON blob zamiast poszczególnych atrybutów data-*.
metaDataPrefix Sznurek Null (zero) Nie dotyczy Automatyczne przechwytywanie nazwy i zawartości meta elementu nagłówka HTML z podanym prefiksem podczas przechwytywania. Można na przykład custom- użyć w tagu meta HTML.
ZarejestrujCałąZawartośćMetadanych Typ logiczny Fałsz Nie dotyczy Automatyczne przechwytywanie wszystkich nazw elementów meta i zawartości nagłówka HTML. Wartość domyślna to „false”. Jeśli jest włączone, zastępuje to dostarczone metaDataPrefix.
parentDataTag Sznurek Null (zero) Nie dotyczy Pobiera element parentId w dziennikach, gdy data-parentid lub data-*-parentid nie zostanie napotkany. W celu zwiększenia wydajności, przestaje przeszukiwać drzewo DOM, aby przechwycić nazwę i wartość elementów, kiedy napotka atrybut data-{parentDataTag} lub customDataPrefix-{parentDataTag}. Aby uzyskać więcej informacji, zobacz parentId key.
dntDataTag Sznurek ai-dnt data-ai-dnt Wtyczka do przechwytywania danych telemetrycznych ignoruje elementy HTML z tym atrybutem.

walidator zachowania

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 wymagane ani oczekiwane, że większość klientów usługi Azure Monitor korzysta z tych funkcji, ale są dostępne dla zaawansowanych scenariuszy. Funkcje behaviorValidator mogą pomóc w bardziej dostępnych praktykach.

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

Funkcje wywołania zwrotnego

Trzy różne behaviorValidator funkcje wywołania zwrotnego są udostępnione 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.
WalidatorMapyZachowań Użyj tej funkcji wywołania zwrotnego, jeśli struktura danych twojego zachowania jest słownikiem.
BehaviorEnumValidator Użyj funkcji zwrotnej, jeśli struktura danych twojego zachowania jest typem Enum.

Przekazywanie wartości tekstowych a 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 (na przykład NAVIGATIONBACK).

Przykładowe użycie z behaviorValidator

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 kliknięć.

parentId Przykłady klucza

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

Przykłady pokazują, że jeśli parentDataTag jest zdefiniowane, ale wtyczka nie może znaleźć tego tagu w drzewie DOM, wtyczka używa id z najbliższego elementu nadrzędnego.

Przykład 1

Na przykład 1 element parentDataTag nie jest zadeklarowany i data-parentid lub data-*-parentid nie jest zdefiniowany w żadnym elemencie. 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ść parentId to not_specified, ponieważ nie zdefiniowano żadnych parentDataTag szczegółów 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 zbierane są szczegóły dotyczące 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ść parentId to parentid2. 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

W przykładzie 3 parentDataTag jest zadeklarowany, a atrybut data-parentid lub data-*-parentid nie jest zdefiniowany. W tym przykładzie pokazano, jak deklarowanie parentDataTag może być przydatne do zbierania wartości dla parentId w przypadkach, gdy elementy dynamiczne nie mają id ani 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. Ze zdefiniowanym data-group="buttongroup1" wtyczka znajduje parentId 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