Click Analytics automatikus gyűjtemény beépülő modul engedélyezése

  • Cikk

Az alkalmazás Elemzések JavaScript SDK-funkcióbővítmények olyan további funkciók, amelyek hozzáadhatók az alkalmazáshoz Elemzések JavaScript SDK-hoz 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

Name Leírás Minta
Name 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. Névjegy
Itemtype Az esemény típusa. customEvent
sdkVersion Az Alkalmazás Elemzések SDK verziója a kattintási beépülő modullal együtt. JavaScript:2_ClickPlugin2

Egyéni dimenziók

Name Leírás Minta
actionType A kattintási eseményt okozó művelettípus. Ez lehet bal vagy jobb kattintás. CL
baseTypeSource Az egyéni esemény alaptípus-forrása. ClickEvent
clickCoordinates A kattintási esemény aktiválásának koordinátái. 659X47
content Helyőrző a további data-* attribútumok és értékek tárolásához. [{sample1:value1, sample2:value2}]
pageName Annak a lapnak a címe, ahol a kattintási esemény aktiválódik. Mintacím
parentId A szülőelem azonosítója vagy neve. A parentId kitöltéséről további információt a parentId-kulcsban talál. navbarContainer

Egyéni mérések

Name Leírás Minta
timeToAction 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.

Megjegyzé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 sztring az új képességek kihasználásához.

A kód hozzáadása

  1. Illessze be a JavaScript (webes) SDK loader szkriptet minden oldal tetejére, amelyhez engedélyezni szeretné az alkalmazás Elemzések.

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

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

A beépülő modul használata

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

Telemetriai adattárolás

A kattintási eseményekből generált telemetriai adatok az Azure Portal > Alkalmazás Elemzések > Naplók szakaszában találhatókcustomEvents.

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 customDataPrefix deklarálva van, akkor a data-*-idrendszer a id névként customEvent a megadott nevet használja, ami azt jelenti, hogy a névnek a kezdő és data a befejező betűvel idkell kezdődnie. Ha például a kattintott HTML-elem attribútummal "data-sample-id"="button1"rendelkezik, akkor "button1" a customEvent név.
  3. Ha az vagy data-*-id az data-id attribútum nem létezik, és useDefaultContentNameOrId ha be van állítvatrue, a rendszer a kattintott elem HTML-attribútumát id vagy az elem tartalomnevét használja a customEvent névként. Ha mindkettő id és a tartalom neve is jelen van, a rendszer elsőbbséget élvez.id
  4. Ha useDefaultContentNameOrId igenfalse, akkor a customEvent név ."not_specified" Azt javasoljuk, hogy a true megfelelő adatok létrehozásához állítsa be a beállítástuseDefaultContentNameOrId.

contentName

Ha a contentName visszahívási függvény speciális konfigurációban van definiálva, a rendszer a customEventcontentName következő szabályok alapján tölti ki a visszahívás oszlopát:

  • 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 az attribútum értékét alt .

  • 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

A tábla kulcsának customDimensionscustomEvent a naplókban való feltöltéséhez parentId deklarálja a címkétparentDataTag, vagy határozza meg az data-parentid attribútumot.

A függvény a parentId következő szabályok alapján olvassa be az értéket:

  • A deklarálásakor a parentDataTagbeépülő modul lekéri a kattintott elemhez parentIdlegközelebb eső elem értékét id vagy data-*-id definiálását.
  • Ha mindkettő data-*-id és id definiálva van, a rendszer elsőbbséget élvez a data-*-id.
  • 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 kattintott elemhez legközelebb eső elemen belüli vagy data-*-id azon belül definiált elemeket parentIdhasználja. Javasoljuk azonban a kereséshez parentIdszükséges hurkok számának csökkentése érdekében a data-{parentDataTag} definíciót vagy customDataPrefix-{parentDataTag} az attribútumot. 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 parentDataTag definiálva van, useDefaultContentNameOrId a beállítás értéke false, és csak egy id attribútum van definiálva a kattintott elemhez legközelebbi elemen belül, a parentId feltöltés a következőképpen "not_specified"történik: . Az érték beolvasásához idállítsa a következőre useDefaultContentNameOrIdtrue: .

Az attribútum vagy data-*-parentid az data-parentid attribútum megadásakor a beépülő modul lekéri a kattintott elemhez legközelebb eső attribútum példányát, adott esetben a kattintott elemen belül is.

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

Ha megjelenik a "Click Event rows with no parentId value" telemetria figyelmeztetés, olvassa el az "Eseménysorok kattintása parentId érték nélkül" figyelmeztetés kijavítása című témakört.

Példák a különböző konfigurációkhoz beolvasandó parentId értékre: Példák a kulcsokraparentid.

Figyelmezteté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éldául:

  • 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, amelyekre nem képesek, kivéve, ha azokkal data-kezdődnek.

Az XML-nevek éles szabályát követő bármely névre lecserélheti a csillagot (*) data-* az alábbi korlátozásokkal.

  • A név nem kezdődhet "xml"-vel, bármilyen esetet is használ a betűkhöz.
  • A név nem tartalmazhat pontosvesszőt (U+003A).
  • A név nem tartalmazhat nagybetűket.

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

Name Type Alapértelmezett Leírás
autoCapture Boolean Igaz Automatikus rögzítési konfiguráció.
Visszahívási IValueCallback Null Visszahívások konfigurálása.
pageTags Object Null Lapcímkék.
dataTags ICustomDataTags Null 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 Boolean Hamis Engedélyezi az értékek naplózását az URL-cím "#" karaktere után.
urlCollectQuery Boolean Hamis Engedélyezi az URL lekérdezési sztringjének naplózását.
behaviorValidator Function Null 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.
defaultRightClickBhvr Sztring (vagy) száma '' 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.
dropInvalidEvents Boolean Hamis Jelölő a nem hasznos kattintási adatokkal nem rendelkező események elvetéséhez.

IValueCallback

Name Type Alapértelmezett Leírás
pageName Function Null Függvény az alapértelmezett pageName rögzítési viselkedés felülbírálásához.
pageActionPageTags Function Null Visszahívási függvény az esemény során gyűjtött alapértelmezett pageTags érték kiegészítéséhez pageAction .
contentName Function Null Egy visszahívási függvény a testre szabott contentNamefeltöltéshez.

ICustomDataTags

Name Type Alapértelmezett A HTML-ben használandó alapértelmezett címke Leírás
useDefaultContentNameOrId Boolean Hamis N/A Ha true, akkor gyűjti össze a contentName szabványos HTML-attribútumotid, 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 Null N/A A HTML-fej metaelemének és tartalmának automatikus rögzítése a rögzített előtaggal. Használható például custom- a HTML-metacímkében.
captureAllMetaDataContent Boolean Hamis N/A Automatikusan rögzítse a HTML Head metaelemeinek nevét és tartalmát. Az alapértelmezett érték a false (hamis). Ha engedélyezve van, felülbírálja a megadott metaDataPrefixértéket.
parentDataTag Sztring Null N/A Lekéri a parentId naplókban lévő adatokat, amikor data-parentiddata-*-parentid vagy nem találkoznak. 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.

behaviorValidator

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 akadálymentesebb eljárásokkal segíthetnek.

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 saját viselkedése adatstruktúráját hozza. 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.

Name Leírás
BehaviorValueValidator Ezt a visszahívási függvényt akkor használja, ha a viselkedés adatstruktúrája sztringek tömbje.
BehaviorMapValidator Ezt a visszahívási függvényt akkor használja, ha a viselkedés adatstruktúrája szótár.
BehaviorEnumValidator Ezt a visszahívási függvényt akkor használja, ha a viselkedés adatstruktúrája enumerálás.

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

A megadott bájtok csökkentéséhez adja meg a számértéket a teljes szöveges sztring helyett. Ha a költség nem jelent problémát, a teljes szöveges sztringet (pl. 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

Az egyéni eseménytulajdonságok, például Name az egyéni viselkedés és parentid tartalom implementálásához egy egyszerű webalkalmazást tekinthet meg, amelyen engedélyezve van a Click Analytics autocollection beépülő modul. 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, amelynek értékét parentId nem gyűjti össze a rendszer.

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> értéke parentId azért van “not_specified”, mert nincsenek parentDataTag meghatározva részletek, és nincs megadva szülőelem-azonosító az aktuális elemen belül.

2\. példa

A 2 parentDataTag . példában deklarált és data-parentid definiált. Ez a példa bemutatja, hogyan gyűjti össze a szülőazonosító adatait.

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>

A kattintott elemnél <Button>az érték parentId az parentid2. Annak ellenére parentDataTag , hogy deklarálva van, az data-parentid elem közvetlenül definiálva van. 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 deklarálva van, parentDataTag és nincs definiálva az attribútum vagy data-*-parentid az data-parentid attribútum. Ez a példa bemutatja, hogyan segíthet a deklarálás parentDataTag abban az parentId esetben, ha a dinamikus elemek nem rendelkeznek id vagy 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>

A kattintott elem <Button>esetében az érték parentId az test6parent, mert parentDataTag deklarálva van. Ez a deklaráció lehetővé teszi, hogy a beépülő modul áthaladjon az aktuális elemfán, ezért a rendszer a legközelebbi szülő azonosítóját fogja használni, ha a szülőazonosító adatai nincsenek közvetlenül megadva az aktuális elemen belül. A definiált data-group="buttongroup1" beépülő modul a hatékonyabb működést keresi 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