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

Cikk
11/05/2024

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.	Névjegy
itemType	Az esemény típusa.	customEvent
sdkVersion	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
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

Név	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.

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

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.

Telepítse az npm-csomagot:

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


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

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

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

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

Ha customDataPrefix nincs deklarálva a speciális konfigurációban, a rendszer a id benne megadott data-id nevet használja customEvent .
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.
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
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 customEvent contentName 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 customDimensions customEvent 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 useDefaultContentNameOrId true: .

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-parentid data-*-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.

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

Név	Típus	Alapértelmezett	Leírás
autoCapture	Logikai	Igaz	Automatikus rögzítési konfiguráció.
Visszahívási	IValueCallback	Null	Visszahívások konfigurálása.
pageTags	Objektum	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	Logikai	Hamis	Engedélyezi az értékek naplózását az URL-cím "#" karaktere után.
urlCollectQuery	Logikai	Hamis	Engedélyezi az URL lekérdezési sztringjének naplózását.
behaviorValidator	Függvény	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	Logikai	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
pageName	Függvény	Null	Függvény az alapértelmezett `pageName` rögzítési viselkedés felülbírálásához.
pageActionPageTags	Függvény	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	Függvény	Null	Egy visszahívási függvény a testre szabott `contentName`feltöltéshez.

ICustomDataTags

Név	Típus	Alapértelmezett	A HTML-ben használandó alapértelmezett címke	Leírás
useDefaultContentNameOrId	Logikai	Hamis	n/a	Ha `true`, akkor gyűjti össze a `contentName` szabványos HTML-attribútumot`id`, ha egy adott elem nincs megcímkézve alapértelmezett adatelőtaggal vagy `customDataPrefix`. Ellenkező esetben a szabványos HTML-attribútum `id` `contentName` 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	Logikai	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-parentid` `data-*-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.

Név	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 probléma, a teljes szöveges sztringet (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

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-parentid data-*-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 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>

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

Ellenőrizze, hogy az adatok folynak-e.
Tekintse meg a HEART-munkafüzet bővített termékelemzéshez való használatával kapcsolatos dokumentációt.
A Click Analytics autocollection beépülő modulhoz tekintse meg a GitHub-adattárat és az npm-csomagot .
Az Eseményelemzés funkcióval elemezheti a legnépszerűbb kattintásokat és szeleteléseket a rendelkezésre álló dimenziók alapján.
Ha nem ismeri a lekérdezés írásának folyamatát, tekintse meg a Log Analyticst .
Munkafüzet létrehozása vagy exportálás a Power BI-ba a kattintási adatok egyéni vizualizációinak létrehozásához.

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

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

Előfeltételek

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

Egyéni eseménytulajdonságok

Egyéni dimenziók

Egyéni mérések

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

A kód hozzáadása

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

A beépülő modul használata

Telemetriai adattárolás

`name`

`contentName`

`parentId` kulcs

`customDataPrefix`

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

IValueCallback

ICustomDataTags

behaviorValidator

Visszahívási függvények

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

Mintahasználat a behaviorValidator használatával

Mintaalkalmazás

Példák a kulcsokra `parentId`

1. példa

2. példa

3. példa

Hibaelhárítás

Következő lépések

Visszajelzés

További források

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

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

Előfeltételek

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

Egyéni eseménytulajdonságok

Egyéni dimenziók

Egyéni mérések

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

A kód hozzáadása

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

A beépülő modul használata

Telemetriai adattárolás

name

contentName

parentId kulcs

customDataPrefix

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

IValueCallback

ICustomDataTags

behaviorValidator

Visszahívási függvények

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

Mintahasználat a behaviorValidator használatával

Mintaalkalmazás

Példák a kulcsokra parentId

1. példa

2. példa

3. példa

Hibaelhárítás

Következő lépések

Visszajelzés

További források

`name`

`contentName`

`parentId` kulcs

`customDataPrefix`

Példák a kulcsokra `parentId`