Sdílet prostřednictvím

Povolit plug-in Click Analytics Auto-Collection

Rozšíření funkcí sady Application Insights JavaScript SDK jsou další funkce, které je možné přidat do sady Application Insights JavaScript SDK, aby se zlepšily její funkce.

V tomto článku se zabýváme plug-inem 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 vyplnění telemetrických dat o událostech.

Požadavky

Nainstalujte sadu JavaScript SDK před povolením pluginu Click Analytics.

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. Pro více informací o tom, jak se vyplňuje kolonka jména, se podívejte na sloupec Název. O nás
typPoložky Typ události. customEvent
sdkVersion Verze sady SDK Application Insights spolu s plug-inem pro kliknutí. JavaScript:2_ClickPlugin2

Vlastní dimenze

Název Popis Vzorek
typ akce Typ akce, která způsobila událost kliknutí Může to být levé nebo pravé kliknutí. CL
základníTypZdroj Zdroj základního typu vlastní události. ClickEvent
Klikněte na souřadnice Souřadnice, kde se aktivuje událost kliknutí 659X47
obsah Zástupný symbol pro uložení dodatečných data-* atributů a hodnot. [{vzorek1:hledani1, vzorek2:hledani2}]
název stránky Název stránky, kde se aktivuje událost kliknutí Ukázkový název
ID rodiče 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
časNaAkci 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é mohou nastavit plug-in pro automatizovaný sběr Click Analytics pomocí skriptu Web SDK Loader nebo npm a volitelně přidat rozšíření rámce.

Poznámka:

Podpora příjmu instrumentačních klíčů 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

Vložte skript zavaděče sady JavaScript (Web) SDK do horní části každé stránky, na které chcete aktivovat 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>

Chcete-li přidat nebo aktualizovat konfiguraci nahrávače skriptu JavaScript (Web) SDK, viz Konfiguraci skriptu nahrávače JavaScript (Web) SDK.

Návod

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žijte 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 Application Insights > na webu Azure Portal>.

name

Sloupec name tabulky customEvent je vyplněn podle následujících pravidel:

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

contentName

Pokud máte funkci zpětného volání definovanou v pokročilé konfiguraci, sloupec contentName 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í kliknuté HTML elementy se contentName 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 klíč parentId v rámci customDimensionscustomEvent tabulky v protokolech, deklarujte značku parentDataTag nebo definujte atribut data-parentid.

Hodnota parentId se 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 data-*-id i id, data-*-id má prioritu.
  • 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 parentDataTag definován, je nastavena na useDefaultContentNameOrId, a pouze atribut false je definován uvnitř elementu nejblíže kliknutému elementu, id je naplněn jako parentId. Pro načtení hodnoty id nastavte useDefaultContentNameOrId na true.

Když definujete atribut data-parentid nebo data-*-parentid, plug-in načte instanci tohoto atributu, která je nejblíže kliknutému prvku, včetně samotného prvku, pokud je to možné.

Pokud deklarujete parentDataTag a definujete atribut data-parentid nebo data-*-parentid, přednost je dána data-parentid nebo data-*-parentid.

Pokud se zobrazí upozornění na telemetrii "Click Event rows with no parentId value" (řádky událostí bez hodnoty parentId), podívejte se na Oprava upozornění řádků událostí bez rodičovské 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, SDK začne hledat nadřazené značky v celé aplikaci, nejenom v elementu 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, ignorují atributy, kterým nerozumí, pokud nezačínají na data-.

Hvězdičku (*) v data-* můžete nahradit libovolným názvem podle produkčních pravidel pro názvy XML s následujícími omezeními.

  • Název nesmí začínat písmeny "xml", a to bez ohledu na velikost písmen.
  • Název nesmí obsahovat středník (U+003A).
  • Název nesmí obsahovat velká písmena.

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

Název Typ Výchozí Popis
automatické zachycení Booleovská hodnota Pravda Automatická konfigurace zachytávání
zpětné volání IValueCallback Nula Konfigurace pro zpětné volání
pageTags Objekt Nula Značky stránek
datové štítky ICustomDataTags Nula Vlastní datové značky poskytnuté k přepsání výchozích značek používaných k zaznamenání kliknutí.
urlCollectHash Booleovská hodnota Nepravda Povolí protokolování hodnot za znakem "#" adresy URL.
dotaz na sběr URL Booleovská hodnota Nepravda Povolení protokolování řetězce dotazu v adrese URL.
validátor chování Funkce Nula Funkce zpětného data-*-bhvr volání, která se má použít pro ověření hodnoty. Další informace najdete v části behaviorValidator.
defaultní chování po kliknutí pravým tlačítkem Ř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 má prvek atribut data-*-bhvr.
odstranitNeplatnéUdálosti Booleovská hodnota Nepravda Označit události k vyřazení, které nemají užitečná data o kliknutí.

IValueCallback

Název Typ Výchozí Popis
název stránky Funkce Nula Funkce, která přepíše výchozí pageName chování při zachytávání.
StránkováAkceStránkovéŠtítky Funkce Nula Funkce zpětného volání pro rozšíření výchozího pageTags shromážděného během pageAction události.
název obsahu Funkce Nula Funkce zpětného volání pro naplnění přizpůsobených contentName.

Vlastní datové značky

Název Typ Výchozí Výchozí značka, která se má použít v HTML Popis
useDefaultContentNameOrId Booleovská hodnota Nepravda Není k dispozici 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í HTML atribut id pro contentName.
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ů.
předpona metaúdajů Řetězec Nula Není k dispozici Automatické zachycení názvu a obsahu meta elementu HTML Head s danou předponou při zachycení. custom- Například lze použít v metaznačku HTML.
captureAllMetaDataContent Booleovská hodnota Nepravda Není k dispozici 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 Nula Není k dispozici Načte parentId v protokolech, pokud není nalezen data-parentid nebo data-*-parentid. Z důvodu efektivity přestane procházet po DOM, aby zachytil název obsahu a hodnotu prvků, když dojde k výskytu atributu data-{parentDataTag} nebo customDataPrefix-{parentDataTag}. Další informace najdete v části 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.

validátor chování

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řinést vlastní datovou strukturu chování. Modul plug-in používá tuto funkci validátoru při extrahování chování ze značek dat.

Název Popis
Validator hodnoty chování Tuto funkci zpětného volání použijte, pokud je datová struktura vašeho chování polem řetězců.
Validátor mapování chování Tuto funkci zpětného volání použijte, pokud je datová struktura vašeho chování slovníkem.
BehaviorEnumValidator Použijte tuto funkci zpětného volání, pokud je datová struktura vašeho chování typu enumerace.

Předání řetězcových 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 nejsou náklady problém, můžete vložit celý textový řetězec (například 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 řešení může vypadat jinak v závislosti na taxonomii vaší organizace a na shromažďovaných událostech.

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 pro implementaci vlastních vlastností událostí, jako jsou Name a parentid, a také vlastního chování a obsahu. Informace o tom, kde najít data pro kliknutí, 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í, že pokud je parentDataTag definován, ale zásuvný modul nemůže tuto značku najít ve stromě DOM, použije id nejbližšího nadřazeného prvku.

Příklad 1

V příkladu 1 parentDataTag není deklarován a data-parentid ani data-*-parentid není 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 žádné 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 ID rodiče.

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>

Pro klikaný prvek <Button>, je hodnota parentIdparentid2. 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é pro shromáždění hodnoty pro parentId pro 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 kliknutý prvek <Button> je hodnota parentIdtest6parent, protože parentDataTag je deklarován. Tato deklarace umožňuje plug-inu procházet aktuálním stromem prvků, a proto se ID jeho nejbližšího nadřazeného prvku použije, pokud nejsou detaily nadřazeného ID přímo poskytnuty 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