Włączanie wtyczki automatycznej kolekcji analizy kliknięć

Artykuł
11/05/2024

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ó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 Insights wraz z wtyczką kliknięcia.	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

Skrypt modułu ładującego zestawu SDK języka JavaScript (Web)
pakiet npm

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

Zainstaluj pakiet npm:

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


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

const clickPluginInstance = new ClickAnalyticsPlugin();
// Click Analytics configuration
const clickPluginConfig = {
  autoCapture: true
};
// Application Insights Configuration
const configObj = {
  connectionString: "YOUR_CONNECTION_STRING", 
  // Alternatively, you can pass in the instrumentation key,
  // but support for instrumentation key ingestion will end on March 31, 2025.  
  // instrumentationKey: "YOUR INSTRUMENTATION KEY",
  extensions: [clickPluginInstance],
  extensionConfig: {
    [clickPluginInstance.identifier]: clickPluginConfig
  },
};

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

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 usługi Application Insights > w witrynie Azure Portal>.

`name`

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

Jeśli customDataPrefix nie zostanie zadeklarowana w konfiguracji zaawansowanej, id parametr podany w elemecie data-id jest używany jako customEvent nazwa.
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ą.
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.
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 customEvent customDimensions 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-. 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-.

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

Nazwisko	Typ	Domyślny	opis
autoCapture	Wartość logiczna	Prawda	Konfiguracja automatycznego przechwytywania.
Wywołania zwrotnego	IValueCallback	Null (zero)	Konfiguracja wywołań zwrotnych.
pageTags	Objekt	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

Nazwisko	Typ	Domyślny	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 `contentName`elementu .

ICustomDataTags

Nazwisko	Typ	Wartość domyślna	Domyślny tag do użycia w kodzie HTML	opis
useDefaultContentNameOrId	Wartość logiczna	Fałsz	Nie dotyczy	Jeśli `true`element 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	String	`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	String	`ai-blob`	`data-ai-blob`	Wtyczka obsługuje atrybut obiektu blob JSON zamiast poszczególnych `data-*` atrybutów.
metaDataPrefix	String	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 `metaDataPrefix`polecenie .
parentDataTag	String	Null (zero)	Nie dotyczy	Pobiera element `parentId` w dziennikach, gdy `data-parentid` `data-*-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	String	`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 (na przykład 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-parentid data-*-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ść 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 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 parentId 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

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

Potwierdź, że dane przepływają.
Zapoznaj się z dokumentacją dotyczącą korzystania ze skoroszytu HEART na potrzeby rozszerzonej analizy produktów.
Zobacz repozytorium GitHub i pakiet npm, aby uzyskać wtyczkę Autocollection Click Analytics.
Analiza zdarzeń w środowisku użycia umożliwia analizowanie kliknięć i wycinków według dostępnych wymiarów.
Jeśli nie znasz procesu pisania zapytania, zapoznaj się z usługą Log Analytics .
Utwórz skoroszyt lub wyeksportuj do usługi Power BI, aby utworzyć niestandardowe wizualizacje danych kliknięcia.

Udostępnij za pośrednictwem

Włączanie wtyczki automatycznej kolekcji analizy kliknięć

Wymagania wstępne

Jakie dane zbiera wtyczka?

Właściwości zdarzenia niestandardowego

Wymiary niestandardowe

Pomiary niestandardowe

Dodawanie wtyczki Click Analytics

Dodawanie kodu

(Opcjonalnie) Ustawianie kontekstu uwierzytelnioowanego użytkownika

Korzystanie z wtyczki

Magazyn danych telemetrycznych

`name`

`contentName`

`parentId` klucz

`customDataPrefix`

Dodawanie konfiguracji zaawansowanej

IValueCallback

ICustomDataTags

behaviorValidator

Funkcje wywołania zwrotnego

Przekazywanie w ciągu a wartości liczbowych

Przykładowe użycie z zachowaniemValidator

Przykładowa aplikacja

`parentId` Przykłady klucza

Przykład 1

Przykład 2

Przykład 3

Rozwiązywanie problemów

Następne kroki

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Włączanie wtyczki automatycznej kolekcji analizy kliknięć

Wymagania wstępne

Jakie dane zbiera wtyczka?

Właściwości zdarzenia niestandardowego

Wymiary niestandardowe

Pomiary niestandardowe

Dodawanie wtyczki Click Analytics

Dodawanie kodu

(Opcjonalnie) Ustawianie kontekstu uwierzytelnioowanego użytkownika

Korzystanie z wtyczki

Magazyn danych telemetrycznych

name

contentName

parentId klucz

customDataPrefix

Dodawanie konfiguracji zaawansowanej

IValueCallback

ICustomDataTags

behaviorValidator

Funkcje wywołania zwrotnego

Przekazywanie w ciągu a wartości liczbowych

Przykładowe użycie z zachowaniemValidator

Przykładowa aplikacja

parentId Przykłady klucza

Przykład 1

Przykład 2

Przykład 3

Rozwiązywanie problemów

Następne kroki

Opinia

Dodatkowe zasoby

`name`

`contentName`

`parentId` klucz

`customDataPrefix`

`parentId` Przykłady klucza