Megosztás a következőn keresztül:

Click Analytics automatikus adatgyűjtés beépülő modul engedélyezése

Az Application Insights JavaScript SDK-funkcióbővítményei olyan további funkciók, amelyeket az Application Insights JavaScript SDK-hoz adhat hozzá a funkciók javítása érdekében.

Ebben a cikkben a Click Analytics beépülő modult tárgyaljuk, amely automatikusan nyomon követi a weblapokon a kattintási eseményeket, és attribútumokat vagy testreszabott címkéket használ data-* a HTML-elemeken az eseménytelemetria feltöltéséhez.

Előfeltételek

A Click Analytics beépülő modul engedélyezése előtt telepítse a JavaScript SDK-t .

Milyen adatokat gyűjt a beépülő modul?

A beépülő modul engedélyezésekor alapértelmezés szerint az alábbi kulcstulajdonságok lesznek rögzítve.

Egyéni eseménytulajdonságok

Név Leírás Minta
Név Az egyéni esemény neve. A név feltöltéséről további információt a Név oszlopban talál. Rólunk
elemTípus Az esemény típusa. egyediEsemény
SDK verzió Az Application Insights SDK verziója és a kattintási beépülő modul. JavaScript:2_ClickPlugin2

Egyéni dimenziók

Név Leírás Minta
akciótípus A kattintási eseményt okozó művelettípus. Ez lehet bal vagy jobb kattintás. CL
alaptípusforrás Az egyéni esemény alaptípus forrása. Kattintási esemény (ClickEvent)
klikkelési koordináták A kattintási esemény aktiválásának koordinátái. 659X47
tartalom Helyőrző a további data-* attribútumok és értékek tárolásához. [{sample1:value1, sample2:value2}]
oldalnév Annak a lapnak a címe, ahol a kattintási esemény aktiválódik. Példacím
parentId A szülőelem azonosítója vagy neve. További információkért arról, hogyan kerül kitöltésre a parentId, lásd a parentId kulcs szócikket. navbarContainer

Egyéni mérések

Név Leírás Minta
Idő az intézkedésig Ezredmásodpercben eltelt idő, amíg a felhasználó rákattint az elemre a kezdeti oldalbetöltés óta. 87407

A Click Analytics beépülő modul hozzáadása

A felhasználók beállíthatják a Click Analytics automatikus gyűjtemény beépülő modult JavaScript (Webes) SDK Loader Script vagy npm használatával, majd opcionálisan hozzáadhatnak egy keretrendszerbővítményt.

Feljegyzés

2025. március 31-én megszűnik az eszközkulcsalapú betöltés támogatása. A rendszerállapot-kulcsok betöltése továbbra is működni fog, de a továbbiakban nem biztosítunk frissítéseket vagy támogatást a funkcióhoz. Váltás kapcsolati karakterláncokra az új képességek kihasználásához.

A kód hozzáadása

Illessze be a JavaScript (webes) SDK loader szkriptet minden oldal tetejére, amelyhez engedélyezni szeretné az Application Insightst.

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

A JavaScript (Webes) SDK loader szkriptkonfigurációjának hozzáadásáról és frissítéséről a JavaScript (Web) SDK Loader Script configuration című témakörben olvashat.

Tipp.

Ha hozzá szeretne adni egy keretrendszerbővítményt, vagy már hozzáadott egyet, tekintse meg a React, a React Native és az Angular kódmintákat a Click Analytics beépülő modul hozzáadásához.

(Nem kötelező) A hitelesített felhasználói környezet beállítása

Ha be szeretné állítani ezt az opcionális beállítást, olvassa el a hitelesített felhasználói környezet beállítása című témakört.

Ha HEART-munkafüzetet használ a Click Analytics beépülő modullal, nem kell beállítania a hitelesített felhasználói környezetet a telemetriai adatok megtekintéséhez. További információkért tekintse meg a HEART-munkafüzet dokumentációját.

Használja a bővítményt

A következő szakaszok a beépülő modul használatát ismertetik.

Telemetriai adattárolás

A kattintási eseményekből customEvents generált telemetriai adatok tárolása az Azure Portal > Application Insights-naplók > szakaszában történik.

name

Az name oszlop a customEvent következő szabályok alapján van feltöltve:

  1. Ha customDataPrefix nincs deklarálva a speciális konfigurációban, a rendszer a id benne megadott data-id nevet használja customEvent .
  2. Ha a customDataPrefix deklarálva van, akkor a id, amelyet a data-*-id megadott, névként használják, ami azt jelenti, hogy ennek data-vel kell kezdődnie és id-vel kell végződnie, mint customEvent név. Ha például a kattintott HTML-elem attribútummal "data-sample-id"="button1"rendelkezik, akkor "button1" a customEvent név.
  3. Ha a data-id vagy a data-*-id attribútum nem létezik, és ha a useDefaultContentNameOrId értéke true, akkor a kattintott elem id HTML attribútumát vagy az elem tartalomnevét használják a customEvent névként. Ha mind a id, mind a tartalom neve jelen van, a id élvez elsőbbséget.
  4. Ha useDefaultContentNameOrIdfalse, akkor a customEvent név "not_specified". Azt javasoljuk, hogy a useDefaultContentNameOrId értékét állítsa true-re a megfelelő adatok létrehozása érdekében.

contentName

Ha a contentName visszahívási függvény előrehaladott konfigurációban van definiálva, a contentName oszlopa a customEvent a következő szabályok alapján kerül kitöltésre:

  • A rákattintott HTML-elem <a> esetében a beépülő modul megpróbálja összegyűjteni az innerText (text) attribútum értékét. Ha a beépülő modul nem találja ezt az attribútumot, megpróbálja összegyűjteni az innerHtml attribútum értékét.

  • A kattintott HTML <img> vagy <area> elem esetében a beépülő modul összegyűjti a(z) alt attribútum értékét.

  • Az összes többi kattintott HTML-elem contentName esetében a rendszer a következő szabályok alapján tölti ki azokat, amelyek sorrendben jelennek meg:

    1. Az elem attribútumának value értéke
    2. Az elem attribútumának name értéke
    3. Az elem attribútumának alt értéke
    4. Az elem innerText attribútumának értéke
    5. Az elem attribútumának id értéke

parentId kulcs

Az parentId táblázat customDimensions kulcsának feltöltéséhez a customEvent naplókban deklarálja a parentDataTag címkét, vagy határozza meg az data-parentid attribútumot.

Az értéket a következő szabályok alapján olvassuk ki a parentId esetében.

  • Amikor deklarálja a parentDataTag, a beépülő modul lekéri a id vagy data-*-id értékét, amely az elemben van definiálva, amely a legközelebb esik a kattintott elemhez parentId.
  • Ha mind data-*-id, mind id definiálva van, akkor data-*-id élvez elsőbbséget.
  • Ha a parentDataTag definiálva van, de a beépülő modul nem találja meg ezt a címkét a DOM-fa alatt, a beépülő modul a id vagy a data-*-id-t használja, amely az adott kattintott elemhez legközelebb eső elemen belül, mint parentId, van definiálva. Javasoljuk azonban, hogy definiálja a(z) data-{parentDataTag} vagy customDataPrefix-{parentDataTag} attribútumot a(z) parentId megkereséséhez szükséges hurkok számának csökkentése érdekében. A deklarálás parentDataTag akkor hasznos, ha a beépülő modult testre szabott beállításokkal kell használnia.
  • Ha nincs parentDataTag definiálva, és az aktuális elem nem parentId tartalmaz információt, a rendszer nem parentId gyűjt értéket.
  • Ha a parentDataTag definiálva van, a useDefaultContentNameOrId beállítása false, és csak egy id attribútum van definiálva a kattintott elemhez legközelebb eső elemen belül, akkor a parentId úgy töltődik fel, hogy "not_specified". Az érték beolvasásához állítsa id értékét useDefaultContentNameOrId-re.

A data-parentid vagy a data-*-parentid attribútum meghatározásakor a beépülő modul lekéri a kattintott elemhez legközelebb eső attribútumpéldányt, beleértve annak belsejét is, ha ez alkalmazható.

Ha deklarálja parentDataTag és meghatározza a data-parentid vagy data-*-parentid attribútumot, elsőbbséget élvez data-parentid vagy data-*-parentid.

Ha megjelenik a "Click Event sorok parentId érték nélkül" telemetria figyelmeztetése, tekintse meg a "Click Event sorok parentId érték nélkül" figyelmeztetés kijavítása című témakört.

Példák arra, hogy a különböző konfigurációkban melyik parentId érték kerül beolvasásra: Példák a parentid kulcsra.

Figyelemfelhívás

  • Miután parentDataTag bekerült az alkalmazás bármely HTML-elemébe, az SDK elkezd szülőcímkéket keresni az egész alkalmazásban, és nem csak azt a HTML-elemet, ahol használta.
  • Ha a HEART-munkafüzetet a Click Analytics beépülő modullal használja, a HEART-események naplózásához vagy észleléséhez a címkét parentDataTag a végfelhasználó alkalmazásának minden más részén deklarálni kell.

customDataPrefix

A customDataPrefix speciális konfiguráció lehetőségével a felhasználó konfigurálhat egy adatattribútum-előtagot, amely segít azonosítani, hogy hol található a szív az egyén kódbázisában. Az előtagnak mindig kisbetűsnek kell lennie, és a kezdőbetűvel data-kell kezdődnie. Példa:

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

A HTML-ben a data-* globális attribútumokat egyéni adatattribútumoknak nevezzük, amelyek lehetővé teszik a védett adatok cseréjét a HTML és a DOM-reprezentációja között szkriptekkel. A régebbi böngészők, például az Internet Explorer és a Safari elvetik azokat az attribútumokat, amelyeket nem értenek, kivéve, ha azokkal data- kezdődnek.

Bármilyen nevet behelyettesíthet a csillag (*) data-* az alábbi korlátozásokkal, amelyet az XML-nevek gyártási szabálya követ.

  • A név nem kezdődhet "xml"-lel, bármilyen kis- vagy nagybetűs formát is használ.
  • A név nem tartalmazhat kettőspontot (U+003A).
  • A név nem tartalmazhat nagybetűket.

Speciális konfiguráció hozzáadása

Név Típus Alapértelmezett Leírás
automatikus rögzítés Boole-i Igaz Automatikus rögzítési konfiguráció.
Visszahívás IValueCallback Nulla Visszahívások konfigurálása.
oldalcímkék Objektum Nulla Oldalcímkék.
adatcímkék ICustomDataTags Nulla A kattintási adatok rögzítéséhez használt alapértelmezett címkék felülbírálásához megadott egyéni adatcímkék.
urlCollectHash Boole-i Hamis Engedélyezi az értékek naplózását az URL-cím "#" karaktere után.
URLGyűjtésLekérdezés Boole-i Hamis Engedélyezi az URL lekérdezési sztringjének naplózását.
Viselkedésellenőrző Függvény Nulla Az értékérvényesítéshez használandó visszahívási data-*-bhvr függvény. További információkért lásd a behaviorValidator szakaszt.
alapértelmezettJobbKattintásBhvr String (vagy) szám '' Alapértelmezett viselkedési érték, ha a jobb gombbal kattintva esemény történt. Ez az érték felül lesz bírálva, ha az elem rendelkezik az data-*-bhvr attribútummal.
Érvénytelen események elvetése Boole-i Hamis Jelölő a nem hasznos kattintási adatokkal nem rendelkező események elvetéséhez.

IValueCallback

Név Típus Alapértelmezett Leírás
oldalnév Függvény Nulla Függvény az alapértelmezett pageName rögzítési viselkedés felülbírálásához.
oldalMűveletOldalCímkék Függvény Nulla Visszahívási függvény az pageTags esemény során gyűjtött alapértelmezett pageAction érték kiegészítésére.
tartalom neve Függvény Nulla Egy visszahívási függvény a testre szabott contentNamefeltöltéshez.

ICustomDataTags

Név Típus Alapértelmezett A HTML-ben használandó alapértelmezett címke Leírás
használjAlapértelmezettTartalomNevetVagyAzonosítót Boole-i Hamis n/a Ha true, akkor összegyűjti a szabványos HTML-attribútumot id a contentName esetén, ha egy adott elem nincs megcímkézve alapértelmezett adatelőtaggal vagy customDataPrefix. Ellenkező esetben a szabványos HTML-attribútum idcontentName nem lesz összegyűjtve.
customDataPrefix Sztring data- data-* Automatikusan rögzítheti a megadott előtaggal címkézett elemek tartalomnevét és értékét. A HTML-címkékben például data-*-iddata-<yourcustomattribute> használható.
aiBlobAttributeTag Sztring ai-blob data-ai-blob A beépülő modul az egyes data-* attribútumok helyett egy JSON-blobattribútumot támogat.
metaDataPrefix Sztring Nulla n/a A HTML Head metaelemének nevének és tartalmának automatikus rögzítése a megadott előtaggal a rögzítéskor. Használható például custom- a HTML-metacímkében.
captureAllMetaDataContent Boole-i Hamis n/a Automatikusan rögzítse a HTML Head metaelemeinek nevét és tartalmát. Az alapértelmezett érték hamis. Ha engedélyezve van, felülbírálja a megadott metaDataPrefixértéket.
parentDataTag Sztring Nulla n/a Lekéri a parentId naplókban, amikor data-parentid vagy data-*-parentid nem található. A hatékonyság érdekében leállítja a DOM bejárását az elemek nevének és értékének rögzítéséhez, amikor data-{parentDataTag} vagy customDataPrefix-{parentDataTag} attribútummal találkozik. További információ: parentId key.
dntDataTag Sztring ai-dnt data-ai-dnt A telemetriai adatok rögzítésére szolgáló beépülő modul figyelmen kívül hagyja az attribútummal rendelkező HTML-elemeket.

Viselkedésellenőrző

A behaviorValidator függvények automatikusan ellenőrzik, hogy a kód címkézett viselkedései megfelelnek-e egy előre definiált listának. A függvények biztosítják, hogy a címkézett viselkedések összhangban legyenek a vállalat által létrehozott osztályozással. Nem szükséges vagy elvárható, hogy a legtöbb Azure Monitor-ügyfél használja ezeket a függvényeket, de speciális forgatókönyvekhez is elérhetők. A behaviorValidator függvények egyszerűbbé tehetik a gyakorlatokat.

A viselkedések a CustomEvents tábla customDimensions mezőjében jelennek meg.

Visszahívási függvények

A bővítmény részeként három különböző behaviorValidator visszahívási függvény érhető el. Saját visszahívási függvényeket is használhat, ha a közzétett függvények nem oldják meg a követelményt. A szándék az, hogy a saját viselkedésének adatstruktúráját hozza létre. A beépülő modul ezt az érvényesítő függvényt használja, miközben kinyeri a viselkedéseket az adatcímkékből.

Név Leírás
ViselkedésiÉrtékValidátor Ezt a visszahívási függvényt akkor használja, ha a viselkedés adatstruktúrája sztringek tömbje.
Viselkedéstérkép-Érvényesítő Ezt a visszahívási függvényt akkor használja, ha a viselkedés adatstruktúrája szótár.
BehaviorEnumValidator Használja ezt a visszahívási függvényt, ha a viselkedés adatstruktúrája egy Enum.

Sztring és numerikus értékek átadása

Az átküldött bájtok csökkentéséhez adja meg a számértéket a teljes szöveges karakterlánc helyett. Ha a költség nem probléma, a teljes szöveges karakterláncot (például NAVIGATIONBACK) is átadhatja.

Mintahasználat a behaviorValidator használatával

Íme egy példa a viselkedési térkép érvényesítőjének megjelenésére. A szervezet osztályozásától és az összegyűjtött eseményektől függően az Öné is más lehet.

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

Mintaalkalmazás

Nézze meg egy egyszerű webalkalmazást, amelyen a Click Analytics autogyűjtő beépülő modul be van kapcsolva, hogy megtudja, hogyan lehet megvalósítani az egyéni eseménytulajdonságokat, például a Name és a parentid, valamint az egyedi viselkedést és tartalmat. A kattintási adatok megkereséséről a mintaalkalmazás-olvasóban olvashat.

Példák a kulcsokra parentId

Az alábbi példák azt mutatják be, hogy a rendszer melyik értéket olvassa be a parentId különböző konfigurációkhoz.

A példák bemutatják, hogy ha parentDataTag definiálva van, de a beépülő modul nem találja ezt a címkét a DOM-fa alatt, a beépülő modul a id legközelebbi szülőelemét használja.

1. példa

Az 1. példában a parentDataTag nincs deklarálva, és data-parentiddata-*-parentid nincs definiálva egyik elemben sem. Ez a példa egy olyan konfigurációt mutat be, ahol a parentId értékét nem gyűjtik össze.

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>

A kattintott elem <Button> esetén a parentId értéke not_specified, mert nincsenek meghatározva parentDataTag részletek, és nincs megadva szülőelem-azonosító az aktuális elemen belül.

2. példa

A 2. példában a parentDataTag deklarálásra kerül, majd a data-parentid definiálásra kerül. Ez a példa a szülőazonosító adatainak gyűjtését mutatja be.

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>

Az elemre kattintva <Button>, az parentId értéke parentid2. Annak ellenére, hogy a parentDataTag deklarálva van, az data-parentid közvetlenül van definiálva az elemen belül. Ezért ez az érték elsőbbséget élvez a szülőelemekben definiált összes többi szülőazonosítóval vagy azonosítóval szemben.

3. példa

A 3. példában a parentDataTag deklarálva van, és az data-parentid vagy data-*-parentid attribútum nincs definiálva. Ez a példa bemutatja, hogyan lehet hasznos a parentDataTag deklarálása egy érték összegyűjtésére parentId-hez olyan esetekben, amikor a dinamikus elemek nem rendelkeznek id-vel vagy data-*-id-mal.

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>

A kattintott elem <Button> esetén a parentId értéke test6parent, mert parentDataTag deklarálva van. Ez a deklaráció lehetővé teszi a beépülő modul számára az aktuális elemfa bejárását, ezért a rendszer a legközelebbi szülő azonosítóját fogja használni, ha a szülőazonosító adatai közvetlenül nem jelennek meg az aktuális elemen belül. A data-group="buttongroup1" definiálásával a beépülő modul hatékonyabban keresi meg a parentId.

Ha eltávolítja az data-group="buttongroup1" attribútumot, az érték parentId továbbra is test6parentmegmarad, mert parentDataTag még deklarálva van.

Hibaelhárítás

Tekintse meg a dedikált hibaelhárítási cikket.

Következő lépések