Az Azure Monitor-alkalmazás Elemzések valós felhasználói monitorozás engedélyezése
A Microsoft Azure Monitor alkalmazás Elemzések JavaScript SDK használati adatokat gyűjt, amely lehetővé teszi a JavaScript-webalkalmazások teljesítményének monitorozását és elemzését. Ezt gyakran nevezik valós felhasználói figyelésnek vagy RUM-nak.
Az alkalmazás Elemzések JavaScript SDK alapszintű SDK-val és több beépülő modulval rendelkezik a további képességek érdekében.
Alapértelmezés szerint lapmegtekintéseket gyűjtünk. Ha azonban alapértelmezés szerint a kattintásokat is szeretné gyűjteni, fontolja meg a Click Analytics automatikus gyűjtemény beépülő modul hozzáadását:
- Ha egy keretrendszerbővítményt ad hozzá, amelyet az alábbi lépések elvégzése után adhat hozzá, a keretrendszerbővítmény hozzáadásakor tetszés szerint hozzáadhatja a Click Analytics szolgáltatást.
- Ha nem ad hozzá keretrendszerbővítményt, az első lépések elvégzése után adja hozzá a Click Analytics beépülő modult.
A hibakereséshez /teszteléshez a Hibakeresés beépülő modult és a Teljesítmény beépülő modult biztosítjuk. Ritkán egyéni beépülő modul hozzáadásával létrehozhatja saját bővítményét.
Előfeltételek
- Azure-előfizetés: Azure-előfizetés létrehozása ingyenesen
- Alkalmazás Elemzések erőforrás: Alkalmazás Elemzések erőforrás létrehozása
- JavaScriptet használó alkalmazás
Első lépések
Kövesse az ebben a szakaszban leírt lépéseket az alkalmazás Elemzések JavaScript SDK-val való használatához.
Tipp.
Jó hír! Még egyszerűbbé tesszük a JavaScript engedélyezését. Nézze meg, hol érhető el a JavaScript (Web) SDK Loader Script injektálása konfiguráció alapján!
A JavaScript-kód hozzáadása
Az alkalmazás Elemzések az alkalmazás Elemzések JavaScript SDK-val való engedélyezéséhez két módszer érhető el:
Metódus | Mikor használnám ezt a módszert? |
---|---|
JavaScript (webes) SDK loader script | A legtöbb ügyfél számára javasoljuk a JavaScript (webes) SDK loader szkriptet, mert soha nem kell frissítenie az SDK-t, és automatikusan megkapja a legújabb frissítéseket. Azt is szabályozhatja, hogy mely lapokhoz adja hozzá az alkalmazást Elemzések JavaScript SDK-t. |
npm-csomag | Be szeretné kapcsolni az SDK-t a kódba, és engedélyezni szeretné az IntelliSense-t. Ez a beállítás csak olyan fejlesztők számára szükséges, akik több egyéni eseményt és konfigurációt igényelnek. Ez a módszer akkor szükséges, ha a React, a React Natív vagy az Angular Framework bővítményt tervezi használni. |
Illessze be a JavaScript (webes) SDK loader szkriptet minden oldal tetejére, amelyhez engedélyezni szeretné az alkalmazás Elemzések.
Lehetőség szerint vegye fel a szakasz első szkriptjeként
<head>
, hogy az az összes függőséggel kapcsolatos esetleges problémákat monitorozhassa.Ha az Internet Explorer 8-at észleli, a JavaScript SDK v2.x automatikusan betöltődik.
<script type="text/javascript"> !(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", // name: "appInsights", // ld: 0, // useXhr: 1, crossOrigin: "anonymous", // onInit: null, // cr: 0, cfg: { // Application Insights Configuration connectionString: "YOUR_CONNECTION_STRING" }}); </script>
(Nem kötelező) Adjon hozzá vagy frissítse az opcionális JavaScript (Webes) SDK Loader Script konfigurációt attól függően, hogy optimalizálnia kell-e a weblap betöltését, vagy meg kell oldania a betöltési hibákat.
JavaScript (web) SDK Loader Script configuration
Név | Típus | Kötelező? | Leírás |
---|---|---|---|
src | húr | Szükséges | Az SDK betöltésének teljes URL-címe. Ez az érték egy dinamikusan hozzáadott <szkript /> címke "src" attribútumához használatos. Használhatja a nyilvános CDN-helyet vagy a saját, privát üzemeltetésű helyet. |
név | húr | Választható | Az inicializált SDK globális neve. Ezt a beállítást akkor használja, ha egyszerre két különböző SDK-t kell inicializálnia. Az alapértelmezett érték az alkalmazás Elemzések, ahogy window.appInsights az inicializált példányra mutató hivatkozás is.Megjegyzés: Ha hozzárendel egy névértéket, vagy ha egy korábbi példányt hozzárendelt a globális névalkalmazáshoz Elemzések SDK, az SDK inicializálási kódjának a globális névtérben window.appInsightsSDK=<name value> kell lennie, hogy biztosítsa a JavaScript (webes) SDK loader szkriptjének megfelelő csontvázát, és a proxymetenek inicializálva és frissítve kell lennie. |
Ld | szám ms-ben | Választható | Meghatározza az SDK betöltése előtt várakozó terhelési késleltetést. Ezt a beállítást akkor használja, ha a HTML-lap betöltése sikertelen, mert a JavaScript (webes) SDK Loader-szkript helytelen időben töltődik be. Az alapértelmezett érték az időtúllépés után 0 ms. Ha negatív értéket használ, a szkriptcímke azonnal hozzáadódik a <head> lap régiójához, és letiltja az oldalbetöltési eseményt, amíg a szkript be nem töltődik vagy sikertelen lesz. |
useXhr | Logikai | Választható | Ez a beállítás csak az SDK-terhelési hibák jelentésére használható. Ez a beállítás például akkor hasznos, ha a JavaScript (webes) SDK loader szkript megakadályozza a HTML-lap betöltését, ami miatt a beolvasás() nem érhető el. Ha elérhető, először a fetch() használatát, majd az XHR-be való visszatérést jelenti. Állítsa be ezt a beállítást a true beolvasási ellenőrzés megkerüléséhez. Ez a beállítás csak akkor szükséges, ha az alkalmazást olyan környezetben használják, ahol a beolvasás nem küldi el a hibaeseményeket, például ha a JavaScript (web) SDK loader szkript nem töltődik be sikeresen. |
keresztOrigin | húr | Választható | Ezzel a beállítással az SDK letöltéséhez hozzáadott szkriptcímke tartalmazza a keresztOrigin attribútumot ezzel a sztringértékkel. Ezt a beállítást akkor használja, ha támogatnia kell a CORS-t. Ha nincs definiálva (az alapértelmezett), a rendszer nem ad hozzá keresztOrigin attribútumot. Az ajánlott értékek nincsenek definiálva (alapértelmezett), "" vagy "névtelen". Az összes érvényes értékhez tekintse meg a kereszt-forrás HTML-attribútum dokumentációját. |
onInit | function(aiSdk) { ... } | Választható | Ezt a visszahívási függvényt a rendszer a fő SDK-szkript sikeres betöltése és inicializálása után hívja meg a CDN-ből (az src érték alapján). Ez a visszahívási függvény akkor hasznos, ha telemetriai inicializálót kell beszúrnia. Egy argumentumot ad át, amely a meghívandó SDK-példányra mutató hivatkozás, és az első kezdeti oldalnézet előtt is meghívja. Ha az SDK már be van töltve és inicializálva van, a rendszer továbbra is meghívja ezt a visszahívást. MEGJEGYZÉS: Az sdk.queue tömb feldolgozása során a rendszer meghívja ezt a visszahívást. Nem adhat hozzá több elemet az üzenetsorhoz, mert azok figyelmen kívül vannak hagyva és elvetve. (A JavaScript (Web) SDK Loader Script 5-ös verziójának részeként hozzáadva – az sv:"5" érték a szkripten belül). |
Cr | Logikai | Választható | Ha az SDK nem töltődik be, és a megadott végpontérték src a nyilvános CDN-hely, ez a konfigurációs beállítás megpróbálja azonnal betölteni az SDK-t az alábbi biztonsági mentési CDN-végpontok egyikéről:
Ha az SDK sikeresen betöltődik egy biztonsági mentési CDN-végpontról, az első elérhetőből töltődik be, amely akkor lesz meghatározva, amikor a kiszolgáló sikeres terhelés-ellenőrzést végez. Ha az SDK egyik biztonsági mentési CDN-végpontról sem töltődik be, megjelenik az SDK-hiba hibaüzenet. Ha nincs definiálva, az alapértelmezett érték a következő true : . Ha nem szeretné betölteni az SDK-t a biztonsági mentési CDN-végpontokról, állítsa ezt a konfigurációs beállítást a következőre false : .Ha az SDK-t a saját magánhálózati CDN-végpontjáról tölti be, ez a konfigurációs beállítás nem alkalmazható. |
A kapcsolati sztring beillesztése a környezetbe
A kapcsolati sztring a környezetbe való beillesztéséhez kövesse az alábbi lépéseket:
Lépjen az alkalmazás Elemzések erőforrás Áttekintés paneljére.
Keresse meg a Csatlakozás ion sztringet.
A Vágólapra másolás ikonra kattintva másolja a kapcsolati sztring a vágólapra.
Cserélje le a JavaScript-kód helyőrzőjét
"YOUR_CONNECTION_STRING"
a vágólapra másolt kapcsolati sztring.A
connectionString
formátumnak a következőt kell követnie: "InstrumentationKey=xxxx;....". Ha a megadott sztring nem felel meg ennek a formátumnak, az SDK betöltési folyamata meghiúsul.A kapcsolati sztring nem tekinthető biztonsági jogkivonatnak vagy kulcsnak. További információ: Szükség van-e az új Azure-régiókra kapcsolati sztring használatára?
(Nem kötelező) SDK-konfiguráció hozzáadása
Az opcionális SDK-konfigurációt az alkalmazás Elemzések JavaScript SDK-nak továbbítja az inicializálás során.
Az SDK-konfiguráció hozzáadásához adja hozzá az egyes konfigurációs beállításokat közvetlenül az alatt.connectionString
Példa:
(Nem kötelező) Speciális SDK-konfiguráció hozzáadása
Ha a beépülő modulok által adott keretrendszerekhez biztosított extra funkciókat szeretné használni, és opcionálisan engedélyezni szeretné a Click Analytics beépülő modult, tekintse meg a következőt:
Adatok áramlásának ellenőrzése
Nyissa meg az alkalmazás Elemzések erőforrást, amely számára engedélyezte az SDK-t.
A bal oldali Alkalmazás Elemzések erőforrásmenü Vizsgálat területén válassza a Tranzakciókeresés panelt.
Nyissa meg az Eseménytípusok legördülő menüt, és válassza az Összes kijelölése lehetőséget a jelölőnégyzetek törléséhez a menüben.
Az Eseménytípusok legördülő menüben válassza a következőt:
- Lapnézet az Azure Monitor-alkalmazáshoz Elemzések valós felhasználói monitorozáshoz
- Egyéni esemény a Click Analytics automatikus gyűjtemény beépülő modulhoz.
Eltarthat néhány percig, amíg az adatok megjelennek a portálon. Ha az egyetlen látható adat a betöltési hiba kivétele, olvassa el a JavaScript-webalkalmazások SDK-betöltési hibáinak hibaelhárításával foglalkozó témakört.
Bizonyos esetekben, ha az Alkalmazás Elemzések különböző verzióinak több példánya fut ugyanazon a lapon, az inicializálás során hibák léphetnek fel. Ezekben az esetekben és a megjelenő hibaüzenetben lásd: Az alkalmazás több verziójának futtatása Elemzések JavaScript SDK egy munkamenetben. Ha ilyen hibát észlelt, próbálja meg módosítani a névteret a
name
beállítás használatával. További információ: JavaScript (Web) SDK Loader Script configuration.Ha adatokat szeretne lekérdezni az adatok áramlásának ellenőrzéséhez:
Válassza a Naplók lehetőséget a bal oldali panelen.
A Naplók kiválasztásakor megnyílik a Lekérdezések párbeszédpanel , amely az adatok szempontjából releváns mintalekérdezéseket tartalmaz.
Válassza a Futtatás lehetőséget a futtatni kívánt minta lekérdezéshez.
Szükség esetén frissítheti a mintalekérdezéseket, vagy írhat egy új lekérdezést Kusto lekérdezésnyelv (KQL) használatával.
Az alapvető KQL-operátorokért lásd a gyakori KQL-operátorokat ismertető témakört.
Gyakori kérdések
Ez a szakasz választ ad a gyakori kérdésekre.
Mik a felhasználók és a munkamenetek száma?
- A JavaScript SDK beállít egy felhasználói cookie-t a webes ügyfélen a visszatérő felhasználók azonosításához, valamint egy munkamenet-cookie-t a tevékenységek csoportosításához.
- Ha nincs ügyféloldali szkript, beállíthatja a cookie-kat a kiszolgálón.
- Ha egy valódi felhasználó különböző böngészőkben használja a webhelyet, vagy privát/inkognitó böngészést vagy különböző gépeket használ, a rendszer többször is megszámolja őket.
- Ha egy bejelentkezett felhasználót szeretne azonosítani a gépeken és böngészőkben, adjon hozzá egy hívást a setAuthenticatedUserContext() beállításhoz.
Mi a JavaScript SDK teljesítménye/többletterhelése?
Az alkalmazás Elemzések JavaScript SDK minimális többletterheléssel rendelkezik a webhelyén. Az SDK mindössze 36 KB-os méretű, és csak ~15 ms-ot vesz igénybe az inicializáláshoz, az SDK elhanyagolható mennyiségű betöltési időt ad hozzá a webhelyhez. Az SDK használatakor a kódtár minimális összetevői gyorsan betölthetők, és a teljes szkript a háttérben lesz letöltve.
Emellett, miközben a szkript a CDN-ből tölt le, az oldal minden nyomon követése várólistára kerül, így a lap teljes életciklusa során nem veszít el telemetriát. Ez a beállítási folyamat zökkenőmentes elemzési rendszert biztosít a lapnak, amely láthatatlan a felhasználók számára.
Milyen böngészőket támogat a JavaScript SDK?
Chrome legújabb ✔ | Firefox legújabb ✔ | v3.x: IE 9+ > Microsoft Edge ✔ v2.x: IE 8+ kompatibilis > Microsoft Edge ✔ |
Opera legújabb ✔ | Safari legújabb ✔ |
Hol találhatok példakódokat a JavaScript SDK-hoz?
Futtatható példákért tekintse meg az Alkalmazás Elemzések JavaScript SDK-mintákat.
Mi az ES3/Internet Explorer 8 kompatibilitása a JavaScript SDK-val?
Meg kell hoznunk a szükséges intézkedéseket annak érdekében, hogy ez az SDK továbbra is "működjön", és ne törje meg a JavaScript végrehajtását, amikor egy régebbi böngésző betölti. Ideális lenne, ha nem támogatná a régebbi böngészőket, de számos nagy ügyfél nem tudja szabályozni, hogy a felhasználók melyik böngészőt használják.
Ez az állítás nem jelenti azt, hogy csak a legalacsonyabb általános funkciókat támogatjuk. Fenn kell tartanunk az ES3-kódkompatibilitást. Az új funkciókat úgy kell hozzáadni, hogy az ne törje meg az ES3 JavaScript-elemzést, és opcionális funkcióként legyen hozzáadva.
Az Internet Explorer 8 támogatásával kapcsolatos részletes információkért tekintse meg a GitHubot.
Nyílt forráskódú a JavaScript SDK?
Igen, az alkalmazás Elemzések JavaScript SDK nyílt forráskód. A forráskód megtekintéséhez vagy a projekthez való hozzájáruláshoz tekintse meg a hivatalos GitHub-adattárat.
Támogatás
- Ha nem tudja futtatni az alkalmazást, vagy nem a várt módon kap adatokat, tekintse meg a dedikált hibaelhárítási cikket.
- A JavaScript SDK-val kapcsolatos gyakori kérdésekért tekintse meg a gyakori kérdéseket.
- Azure-támogatás problémák esetén nyisson meg egy Azure-támogatás jegyet.
- Az alkalmazással Elemzések JavaScript SDK-val kapcsolatos nyitott problémák listáját a GitHub Problémák lapján találja.
- A Telemetriai megjelenítő bővítmény használatával listázhatja a hálózati hasznos adatok egyes eseményeit, és figyelheti a belső hívásokat az Alkalmazás Elemzések.
Következő lépések
- Az alkalmazás Elemzések használati élményének megismerése
- Oldalmegtekintések nyomon követése
- Egyéni események és metrikák nyomon követése
- JavaScript-telemetriai inicializáló beszúrása
- JavaScript SDK-konfiguráció hozzáadása
- A GitHub részletes kibocsátási megjegyzéseiből tájékozódhat a frissítésekről és a hibajavításokról.
- Adatok lekérdezése a Log Analyticsben.