Povolení modulu plug-in Auto-Collection click Analytics

Článek
11/15/2023

Rozšíření funkcí sady Application Přehledy JavaScript SDK jsou další funkce, které je možné přidat do sady Application Přehledy JavaScript SDK, aby se zlepšila jeho funkčnost.

V tomto článku se zabýváme modulem plug-in Click Analytics, který automaticky sleduje události kliknutí na webových stránkách a používá data-* atributy nebo přizpůsobené značky prvků HTML k naplnění telemetrie událostí.

Předpoklady

Před povolením modulu plug-in Click Analytics nainstalujte sadu JavaScript SDK .

Jaká data modul plug-in shromažďuje?

Při povolení modulu plug-in se ve výchozím nastavení zaznamenávají následující klíčové vlastnosti.

Vlastní vlastnosti události

Název	Popis	Vzorek
Název	Název vlastní události. Další informace o tom, jak se název naplní, najdete ve sloupci Název.	O uživateli
Itemtype	Typ události.	customEvent
sdkVersion	Verze sady Application Přehledy SDK spolu s kliknutím na modul plug-in	JavaScript:2_ClickPlugin2

Vlastní dimenze

Název	Popis	Vzorek
actionType	Typ akce, která způsobila událost kliknutí Může to být levý nebo pravým tlačítkem myši.	CL
baseTypeSource	Zdroj základního typu vlastní události.	ClickEvent
ClickCoordinates	Souřadnice, kde se aktivuje událost kliknutí	659X47
content	Zástupný symbol pro uložení dalších `data-*` atributů a hodnot	[{sample1:value1, sample2:value2}]
pageName	Název stránky, kde se aktivuje událost kliknutí	Ukázkový název
Parentid	ID nebo název nadřazeného elementu. Další informace o tom, jak se vyplní parentId, najdete v tématu klíč parentId.	navbarContainer

Vlastní měření

Název	Popis	Vzorek
timeToAction	Doba potřebná v milisekundách, než uživatel klikne na prvek od počátečního načtení stránky.	87407

Přidání modulu plug-in Click Analytics

Uživatelé můžou modul plug-in Auto-Collection Click Analytics nastavit pomocí skriptu zavaděče sady JavaScript (Web) SDK nebo npm a volitelně přidat rozšíření architektury.

Poznámka:

Podpora příjmu dat založeného na instrumentačním klíči skončí 31. března 2025. Příjem klíčů instrumentace bude dál fungovat, ale už nebudeme poskytovat aktualizace ani podporu pro tuto funkci. Přechod na připojovací řetězec, abyste mohli využívat nové funkce.

Přidání kódu

Skript zavaděče sady JavaScript (Web) SDK
balíček npm

Do horní části každé stránky, pro kterou chcete povolit aplikační Přehledy, vložte skript zavaděče javascriptové sady SDK (Web).

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

Pokud chcete přidat nebo aktualizovat konfiguraci skriptů zavaděče sady JavaScript (Web) SDK, přečtěte si téma Konfigurace skriptů zavaděče sady JavaScript (Web).

Nainstalujte balíček 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();

Tip

Pokud chcete přidat rozšíření architektury nebo už jste ho přidali, podívejte se na ukázky kódu React, React Native a Angular, kde se dozvíte, jak přidat modul plug-in Click Analytics.

(Volitelné) Nastavení kontextu ověřeného uživatele

Pokud chcete nastavit toto volitelné nastavení, přečtěte si téma Nastavení kontextu ověřeného uživatele.

Pokud používáte sešit HEART s modulem plug-in Click Analytics, nemusíte pro zobrazení telemetrických dat nastavit kontext ověřeného uživatele. Další informace najdete v dokumentaci k sešitu HEART.

Použití modulu plug-in

Následující části popisují, jak modul plug-in používat.

Úložiště telemetrických dat

Telemetrická data generovaná z událostí kliknutí se ukládají jako customEvents v části Protokoly Přehledy > aplikací webu Azure Portal>.

`name`

Sloupec name se customEvent vyplní na základě následujících pravidel:

Pokud customDataPrefix není deklarován v rozšířené konfiguraci, id použije se jako název zadaný v data-id souboru customEvent .
Je-li customDataPrefix deklarován, zadanou id v data-*-idsadě , což znamená, že musí začínat data a končit id, se použije jako customEvent název. Pokud například klikaný element HTML má atribut "data-sample-id"="button1", pak "button1" je customEvent název.
data-iddata-*-id Pokud atribut neexistuje a pokud useDefaultContentNameOrId je nastaven na true, atribut HTML id nebo název obsahu clicked elementu se použije jako customEvent název. Pokud je k dispozici název id obsahu i název obsahu, předá idse přednost .
Pokud useDefaultContentNameOrId je false, customEvent název je "not_specified". Doporučujeme nastavit useDefaultContentNameOrId pro true generování smysluplných dat.

`contentName`

Pokud máte funkci zpětnéhocontentNamevolání v pokročilé konfiguraci definovanou, contentName sloupec customEvent se vyplní na základě následujících pravidel:

U klikaného elementu HTML <a> se modul plug-in pokusí shromáždit hodnotu jeho innerText (text) atributu. Pokud modul plug-in nemůže najít tento atribut, pokusí se shromáždit hodnotu jeho innerHtml atributu.
U klikaného html <img> nebo <area> elementu modul plug-in shromažďuje hodnotu jeho alt atributu.
Pro všechny ostatní klikané elementy contentName HTML se vyplní na základě následujících pravidel, která jsou uvedena v pořadí podle priority:
1. Hodnota atributu value elementu
2. Hodnota atributu name elementu
3. Hodnota atributu alt elementu
4. Hodnota innerText atributu elementu
5. Hodnota atributu id elementu

`parentId` Klíč

Pokud chcete naplnit parentId klíč v tabulce customDimensionscustomEvent v protokolech, deklarujte značku parentDataTag nebo definujte data-parentid atribut.

Hodnota se parentId načte na základě následujících pravidel:

Když deklarujete parentDataTag, modul plug-in načte hodnotu id nebo data-*-id definovanou v rámci prvku, který je nejblíže k klikaného prvku jako parentId.
Pokud jsou definovány obě data-*-id a id jsou definovány, priorita je předána data-*-id.
Pokud parentDataTag je definován, ale modul plug-in nemůže najít tuto značku ve stromu DOM, modul plug-in použije id nebo data-*-id definovaný v rámci elementu, který je nejblíže ke klikaným elementu jako parentId. Doporučujeme však definovat data-{parentDataTag} nebo customDataPrefix-{parentDataTag} atribut, aby se snížil počet smyček potřebných k nalezení parentId. parentDataTag Deklarace je užitečná, když potřebujete použít modul plug-in s přizpůsobenými možnostmi.
Pokud není definována žádná parentDataTag hodnota a aktuální prvek neobsahuje žádné parentId informace, žádná parentId hodnota se neshromažďuje.
Je-li definována, useDefaultContentNameOrId je nastavena na falsea pouze id atribut je definován v rámci elementu nejblíže clicked element, parentId naplní jako "not_specified".parentDataTag Načtení hodnoty parametru id, nastaveno useDefaultContentNameOrId na truehodnotu .

Když definujete data-parentid nebo data-*-parentid atribut, modul plug-in načte instanci tohoto atributu, která je nejblíže clicked elementu, včetně v případě, že je to možné.

Pokud deklarujete parentDataTag a definujete data-parentid atribut data-*-parentid , priorita je udělena data-parentid nebo data-*-parentid.

Pokud se zobrazí upozornění na telemetrii "Click Event rows with no parentId value" (Kliknout na řádky událostí bez hodnoty parentId), podívejte se na upozornění "Click Event rows with no parentId value" (Kliknout na řádky událostí bez hodnoty parentId).

Příklady ukazující, která hodnota se načte jako parentId pro různé konfigurace, najdete v tématu Příklady parentid klíče.

Upozornění

Jakmile parentDataTag je součástí libovolného elementu HTML v celé aplikaci , sada SDK začne hledat nadřazené značky v celé aplikaci , a ne jenom element HTML, ve kterém jste ho použili.
Pokud používáte sešit HEART s modulem plug-in Click Analytics, aby se události HEART zaznamenávaly nebo detekovaly, musí být značka parentDataTag deklarována ve všech ostatních částech aplikace koncového uživatele.

`customDataPrefix`

Možnost customDataPrefix v pokročilé konfiguraci poskytuje uživateli možnost konfigurovat předponu datového atributu, která pomáhá identifikovat, kde se nachází srdce v rámci základu kódu jednotlivce. Předpona musí být vždy malá písmena a začínat na data-. Příklad:

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

V HTML jsou data-* globální atributy označovány jako vlastní datové atributy, které umožňují výměnu vlastních informací mezi HTML a jeho reprezentací DOM pomocí skriptů. Starší prohlížeče, jako jsou Internet Explorer a Safari drop atributy, které nerozumí, pokud nezačínají data-.

Hvězdičku (*) můžete data-* nahradit libovolným názvem za produkčním pravidlem názvů XML následujícími omezeními.

Název nesmí začínat písmeny xml, a to bez ohledu na to, co se pro písmena používá.
Název nesmí obsahovat středník (U+003A).
Název nesmí obsahovat velká písmena.

Přidání rozšířené konfigurace

Name	Type	Výchozí	Popis
autoCapture	Logické	True	Automatická konfigurace zachytávání
Zpětného volání	IValueCallback	Null	Konfigurace zpětného volání
pageTags	Objekt	Null	Značky stránek
dataTags	ICustomDataTags	Null	Vlastní datové značky poskytnuté k přepsání výchozích značek používaných k zaznamenání dat kliknutím.
urlCollectHash	Logický	False	Povolí protokolování hodnot za znakem "#" adresy URL.
urlCollectQuery	Logický	False	Povolí protokolování řetězce dotazu adresy URL.
behaviorValidator	Function	Null	Funkce zpětného `data-*-bhvr` volání, která se má použít pro ověření hodnoty. Další informace najdete v části behaviorValidator.
defaultRightClickBhvr	Řetězec (nebo) číslo	''	Výchozí hodnota chování, když došlo k události kliknutí pravým tlačítkem myši. Tato hodnota je přepsána, pokud prvek má `data-*-bhvr` atribut.
dropInvalidEvents	Logický	False	Označení příznakem pro vyřazení událostí, které nemají užitečná data kliknutí.

IValueCallback

Name	Type	Výchozí	Popis
pageName	Function	Null	Funkce, která přepíše výchozí `pageName` chování při zachytávání.
pageActionPageTags	Function	Null	Funkce zpětného volání pro rozšíření výchozího nastavení `pageTags` shromažďovaného `pageAction` během události.
contentName	Function	Null	Funkce zpětného volání pro naplnění přizpůsobených `contentName`funkcí .

ICustomDataTags

Name	Type	Výchozí	Výchozí značka, která se má použít v HTML	Popis
useDefaultContentNameOrId	Logický	False	–	Pokud `true`, shromažďuje standardní html atribut `id` pro `contentName` , pokud určitý prvek není označený výchozí předponou dat nebo `customDataPrefix`. Jinak se neshromažďuje standardní atribut `idcontentName` HTML.
customDataPrefix	Řetězec	`data-`	`data-*`	Automatické zachycení názvu obsahu a hodnoty prvků, které jsou označené zadanou předponou. Lze například `data-*-iddata-<yourcustomattribute>` použít ve značkách HTML.
aiBlobAttributeTag	Řetězec	`ai-blob`	`data-ai-blob`	Modul plug-in podporuje atribut objektu blob JSON místo jednotlivých `data-*` atributů.
metaDataPrefix	Řetězec	Null	–	Automatické zachycení názvu meta elementu HTML Head a obsahu s předponou zadanou předponou při zachycení. `custom-` Například lze použít v metaznačku HTML.
captureAllMetaDataContent	Logický	False	–	Automaticky zachyťte všechny názvy a obsah meta elementů HTML Head. Výchozí hodnota je False. Pokud je tato možnost povolená, přepíše zadanou možnost `metaDataPrefix`.
parentDataTag	Řetězec	Null	–	Načte `parentId` protokoly v případech, kdy `data-parentid` nebo `data-*-parentid` není zjištěn. Z důvodu efektivity zastaví procházení modelu DOM, aby zachytil název obsahu a hodnotu prvků, když `data-{parentDataTag}` dojde k výskytu atributu nebo `customDataPrefix-{parentDataTag}` atributu. Další informace najdete v tématu klíč parentId.
dntDataTag	Řetězec	`ai-dnt`	`data-ai-dnt`	Modul plug-in pro zachytávání telemetrických dat ignoruje elementy HTML s tímto atributem.

behaviorValidator

Funkce behaviorValidator automaticky kontrolují, že označené chování v kódu odpovídá předdefinovanému seznamu. Funkce zajišťují, aby označené chování bylo konzistentní se zavedenou taxonomií vaší organizace. Nevyžaduje se ani neočekává, že většina zákazníků azure Monitoru tyto funkce používá, ale jsou k dispozici pro pokročilé scénáře. Funkce behaviorValidator vám můžou pomoct s přístupnějšími postupy.

Chování se zobrazí v poli customDimensions v tabulce CustomEvents.

Funkce zpětného volání

V rámci tohoto rozšíření jsou zpřístupněny tři různé behaviorValidator funkce zpětného volání. Pokud vystavené funkce nevyřeší váš požadavek, můžete také použít vlastní funkce zpětného volání. Záměrem je přineste si vlastní strukturu dat. Modul plug-in používá tuto funkci validátoru při extrahování chování ze značek dat.

Název	Popis
BehaviorValueValidator	Tuto funkci zpětného volání použijte, pokud je datová struktura vašeho chování polem řetězců.
BehaviorMapValidator	Tuto funkci zpětného volání použijte, pokud je datová struktura vašeho chování slovníkem.
BehaviorEnumValidator	Tuto funkci zpětného volání použijte, pokud je datová struktura vašeho chování výčtem.

Předávání řetězců vs. číselných hodnot

Pokud chcete snížit počet bajtů, které předáte, předejte místo celého textového řetězce číselnou hodnotu. Pokud náklady nejsou problém, můžete předat celý textový řetězec (např. NAVIGATIONBACK).

Ukázkové použití s využitím behaviorValidatoru

Tady je ukázka toho, jak může vypadat validátor mapy chování. Vaše zařízení může vypadat jinak v závislosti na taxonomii vaší organizace a událostech, které shromažďujete.

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

Ukázková aplikace

Podívejte se na jednoduchou webovou aplikaci s povoleným modulem plug-in Autocollection Click Analytics a zjistěte, jak implementovat vlastní vlastnosti událostí, jako Name je a parentid vlastní chování a obsah. Informace o tom, kde najít data kliknutím, najdete v souboru readme ukázkové aplikace.

`parentId` Příklady klíče

Následující příklady ukazují, která hodnota se načte jako parentId pro různé konfigurace.

Příklady ukazují, jak je parentDataTag definován, ale modul plug-in nemůže najít tuto značku ve stromu DOM, modul plug-in používá id nejbližší nadřazený prvek.

Příklad 1

V příkladu parentDataTag 1 není deklarován a data-parentid není data-*-parentid definován v žádném prvku. Tento příklad ukazuje konfiguraci, kde se neshromažďuje hodnota parentId .

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>

Pro klikaný prvek <Button> hodnota parentId je “not_specified”, protože nejsou definovány žádné parentDataTag podrobnosti a v aktuálním prvku není k dispozici id nadřazeného elementu.

Příklad 2

V příkladu 2 parentDataTag se deklaruje a data-parentid definuje. Tento příklad ukazuje, jak se shromažďují podrobnosti nadřazeného ID.

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>

U klikaného prvku <Button>je parentid2hodnota parentId . I když parentDataTag je deklarován, data-parentid je přímo definován v rámci elementu. Proto má tato hodnota přednost před všemi ostatními nadřazenými ID nebo podrobnostmi ID definovanými v nadřazených prvcích.

Příklad 3

V příkladu 3 parentDataTag je deklarován a data-parentiddata-*-parentid atribut není definován. Tento příklad ukazuje, jak může být deklarování parentDataTag užitečné shromáždit hodnotu pro parentId případy, kdy dynamické prvky nemají id nebo 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>

Pro clicked element <Button>, hodnota parentId je test6parent, protože parentDataTag je deklarován. Tato deklarace umožňuje modulu plug-in procházet strom aktuálního prvku, a proto ID nejbližšího nadřazeného objektu bude použito, pokud podrobnosti nadřazeného ID nejsou přímo zadané v aktuálním prvku. S definovaným data-group="buttongroup1" modulem plug-in zjistí parentId efektivněji.

Pokud atribut odeberete data-group="buttongroup1" , hodnota parentId je stále test6parent, protože parentDataTag je stále deklarována.

Řešení problému

Projděte si vyhrazený článek o řešení potíží.

Další kroky

Ověřte, že data proudí.
Podívejte se do dokumentace k využití sešitu HEART pro rozšířené analýzy produktů.
Viz úložiště GitHub a balíček npm pro modul plug-in Autocollection Click Analytics.
Analýza událostí v prostředí Využití slouží k analýze horních kliknutí a řezu podle dostupných dimenzí.
Pokud neznáte proces zápisu dotazu, podívejte se na Log Analytics .
Vytvořte sešit nebo export do Power BI a vytvořte vlastní vizualizace dat kliknutím.