Aktivera Azure Monitor Application Insights övervakning av verkliga användare

  • Artikel

Microsoft Azure Monitor Application Insights JavaScript SDK samlar in användningsdata, vilket gör att du kan övervaka och analysera prestanda för JavaScript-webbprogram. Detta kallas vanligtvis verklig användarövervakning eller RUM.

Application Insights JavaScript SDK har en bas-SDK och flera plugin-program för fler funktioner.

Conceptual diagram that shows the Application Insights JavaScript SDK, its plugins/extensions, and their relationship to each other.

Vi samlar in sidvisningar som standard. Men om du vill samla in klick som standard kan du överväga att lägga till plugin-programmet Klicka på analys för automatisk samling:

  • Om du lägger till ett ramverkstillägg som du kan lägga till när du har följt stegen för att komma igång nedan kan du lägga till Klicka på analys när du lägger till ramverkstillägget.
  • Om du inte lägger till ett ramverkstillägg lägger du till plugin-programmet Klicka på analys när du har följt stegen för att komma igång.

Vi tillhandahåller plugin-programmet För felsökning och prestanda för felsökning/testning. I sällsynta fall är det möjligt att skapa ett eget tillägg genom att lägga till ett anpassat plugin-program.

Förutsättningar

Kom igång

Följ stegen i det här avsnittet för att instrumentera ditt program med Application Insights JavaScript SDK.

Dricks

Goda nyheter! Vi gör det ännu enklare att aktivera JavaScript. Se var JavaScript (Web) SDK-inläsningsskriptinmatning efter konfiguration är tillgängligt!

Lägg till JavaScript-koden

Det finns två metoder för att lägga till koden för att aktivera Application Insights via Application Insights JavaScript SDK:

Metod När skulle jag använda den här metoden?
SDK-inläsningsskript för JavaScript (web) För de flesta kunder rekommenderar vi SDK-inläsningsskriptet för JavaScript (Web) eftersom du aldrig behöver uppdatera SDK:t och du får de senaste uppdateringarna automatiskt. Dessutom har du kontroll över vilka sidor du lägger till Application Insights JavaScript SDK till.
npm-paket Du vill ta med SDK:et i koden och aktivera IntelliSense. Det här alternativet behövs bara för utvecklare som behöver fler anpassade händelser och konfigurationer. Den här metoden krävs om du planerar att använda React, React Native eller Angular Framework-tillägget.

  1. Klistra in SDK-inläsningsskriptet för JavaScript (Web) överst på varje sida som du vill aktivera Application Insights för.

    Du bör helst lägga till det som det första skriptet i avsnittet <head> så att det kan övervaka eventuella problem med alla dina beroenden.

    Om Internet Explorer 8 identifieras läses JavaScript SDK v2.x in automatiskt.

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

  2. (Valfritt) Lägg till eller uppdatera valfri JavaScript-SDK-inläsningsskriptkonfiguration, beroende på om du behöver optimera inläsningen av webbsidan eller lösa inläsningsfel.

    Screenshot of the JavaScript (Web) SDK Loader Script. The parameters for configuring the JavaScript (Web) SDK Loader Script are highlighted.

JavaScript-SDK-inläsningsskriptkonfiguration (web)

Namn Type Obligatorisk? beskrivning
src sträng Obligatoriskt Den fullständiga URL:en för var du ska läsa in SDK:t från. Det här värdet används för attributet "src" för ett dynamiskt tillagt <skript/> tagg. Du kan använda den offentliga CDN-platsen eller din egen privat värdbaserade plats.
name sträng Valfritt Det globala namnet på det initierade SDK:t. Använd den här inställningen om du behöver initiera två olika SDK:er samtidigt.

Standardvärdet är appInsights, så window.appInsights är en referens till den initierade instansen.

Obs! Om du tilldelar ett namnvärde eller om en tidigare instans har tilldelats till det globala namnet appInsightsSDK kräver SDK-initieringskoden att den finns i det globala namnområdet för window.appInsightsSDK=<name value> att säkerställa att rätt JavaScript-SDK-inläsningsskriptskelett och proxymetoder initieras och uppdateras.
Ld nummer i ms Valfritt Definierar belastningsfördröjningen att vänta innan du försöker läsa in SDK:et. Använd den här inställningen när HTML-sidan inte kan läsas in eftersom JavaScript-SDK-inläsningsskriptet (Web) läses in vid fel tidpunkt.

Standardvärdet är 0 ms efter timeout. Om du använder ett negativt värde läggs skripttaggen omedelbart till i <head> sidans region och blockerar sidinläsningshändelsen tills skriptet läses in eller misslyckas.
useXhr boolean Valfritt Den här inställningen används endast för rapportering av SDK-belastningsfel. Den här inställningen är till exempel användbar när SDK-inläsningsskriptet för JavaScript (Web) hindrar HTML-sidan från att läsas in, vilket gör att fetch() inte är tillgänglig.

Rapporteringen försöker först använda fetch() om det är tillgängligt och sedan återställning till XHR. Ställ in den här inställningen på true för att kringgå hämtningskontrollen. Den här inställningen krävs bara om programmet används i en miljö där hämtningen inte skulle kunna skicka felhändelserna, till exempel om JavaScript-SDK-inläsningsskriptet (Web) inte läses in.
crossOrigin sträng Valfritt Genom att inkludera den här inställningen innehåller skripttaggen som lagts till för att ladda ned SDK:t attributet crossOrigin med det här strängvärdet. Använd den här inställningen när du behöver stöd för CORS. När det inte har definierats (standardvärdet) läggs inget crossOrigin-attribut till. Rekommenderade värden definieras inte (standardvärdet), "" eller "anonyma". Alla giltiga värden finns i html-attributdokumentationen för korsande ursprung.
onInit function(aiSdk) { ... } Valfritt Den här återanropsfunktionen anropas efter att huvud-SDK-skriptet har lästs in och initierats från CDN (baserat på src-värdet). Den här återanropsfunktionen är användbar när du behöver infoga en telemetriinitierare. Det skickas ett argument, vilket är en referens till den SDK-instans som anropas för och anropas också före den första första sidvyn. Om SDK:et redan har lästs in och initierats anropas fortfarande återanropet. Obs! Under bearbetningen av matrisen sdk.queue anropas återanropet. Du kan inte lägga till fler objekt i kön eftersom de ignoreras och tas bort. (Har lagts till som en del av JavaScript (Web) SDK Loader Script version 5 – värdet sv:"5" i skriptet).
Hp boolean Valfritt Om SDK:n inte kan läsas in och slutpunktsvärdet som definierats för src är den offentliga CDN-platsen, försöker det här konfigurationsalternativet att omedelbart läsa in SDK:n från någon av följande CDN-slutpunkter för säkerhetskopiering:
  • 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
Obs! az416426.vo.msecnd.net stöds delvis, så det rekommenderas inte.

Om SDK:n har lästs in från en CDN-slutpunkt för säkerhetskopiering läses den in från den första tillgängliga, vilket bestäms när servern utför en lyckad inläsningskontroll. Om SDK:n inte kan läsas in från någon av CDN-slutpunkterna för säkerhetskopiering visas felmeddelandet SDK-fel.

När det inte har definierats är truestandardvärdet . Om du inte vill läsa in SDK:n från CDN-slutpunkterna för säkerhetskopiering anger du det här konfigurationsalternativet till false.

Om du läser in SDK:n från din egen privat värdbaserade CDN-slutpunkt är det här konfigurationsalternativet inte tillämpligt.

Klistra in anslutningssträng i din miljö

Så här klistrar du in anslutningssträng i din miljö:

  1. Gå till fönstret Översikt för din Application Insights-resurs.

  2. Leta upp Anslut ionssträngen.

  3. Välj ikonen Kopiera till Urklipp för att kopiera anslutningssträng till Urklipp.

    Screenshot that shows Application Insights overview and connection string.

  4. Ersätt platshållaren "YOUR_CONNECTION_STRING" i JavaScript-koden med din anslutningssträng kopieras till Urklipp.

    Formatet connectionString måste följa "InstrumentationKey=xxxx;....". Om den angivna strängen inte uppfyller det här formatet misslyckas SDK-inläsningsprocessen.

    Anslutningssträng betraktas inte som en säkerhetstoken eller nyckel. Mer information finns i Behöver nya Azure-regioner användning av anslutningssträng?.

(Valfritt) Lägga till SDK-konfiguration

Den valfria SDK-konfigurationen skickas till Application Insights JavaScript SDK under initieringen.

Lägg till SDK-konfiguration genom att lägga till varje konfigurationsalternativ direkt under connectionString. Till exempel:

Screenshot of JavaScript code with SDK configuration options added and highlighted.

(Valfritt) Lägga till avancerad SDK-konfiguration

Om du vill använda de extra funktioner som tillhandahålls av plugin-program för specifika ramverk och om du vill aktivera plugin-programmet Klicka på analys kan du läsa:

Bekräfta att data flödar

  1. Gå till din Application Insights-resurs som du har aktiverat SDK för.

  2. I resursmenyn Application Insights till vänster går du till Undersök och väljer fönstret Transaktionssökning .

  3. Öppna listrutan Händelsetyper och välj Markera alla för att avmarkera kryssrutorna på menyn.

  4. I listrutan Händelsetyper väljer du:

    • Sidvy för Azure Monitor Application Insights Verklig användarövervakning
    • Anpassad händelse för plugin-programmet Click Analytics Auto-Collection.

    Det kan ta några minuter innan data visas i portalen. Om de enda data som visas är ett undantag för inläsningsfel kan du läsa Felsöka SDK-belastningsfel för JavaScript-webbappar.

    I vissa fall kan fel uppstå under initieringen om flera instanser av olika versioner av Application Insights körs på samma sida. För dessa fall och felmeddelandet som visas, se Köra flera versioner av Application Insights JavaScript SDK i en session. Om du har stött på något av dessa fel kan du prova att ändra namnområdet med hjälp av inställningen name . Mer information finns i JavaScript-SDK-inläsningsskriptkonfiguration (Web).

    Screenshot of the Application Insights Transaction search pane in the Azure portal with the Page View option selected. The page views are highlighted.

  5. Om du vill fråga efter data för att bekräfta att data flödar:

    1. Välj Loggar i det vänstra fönstret.

      När du väljer Loggar öppnas dialogrutan Frågor, som innehåller exempelfrågor som är relevanta för dina data.

    2. Välj Kör för den exempelfråga som du vill köra.

    3. Om det behövs kan du uppdatera exempelfrågan eller skriva en ny fråga med hjälp av Kusto-frågespråk (KQL).

      Viktiga KQL-operatorer finns i Läs vanliga KQL-operatorer.

Vanliga frågor och svar

Det här avsnittet innehåller svar på vanliga frågor.

Vad är antalet användare och sessioner?

  • JavaScript SDK anger en användarcookie på webbklienten, för att identifiera återkommande användare och en sessionscookie till gruppaktiviteter.
  • Om det inte finns något skript på klientsidan kan du ange cookies på servern.
  • Om en verklig användare använder din webbplats i olika webbläsare, eller genom att använda privat/inkognitobläddring eller olika datorer, räknas de mer än en gång.
  • Om du vill identifiera en inloggad användare mellan datorer och webbläsare lägger du till ett anrop till setAuthenticatedUserContext().

Vad är Prestanda/overhead för JavaScript SDK?

Application Insights JavaScript SDK har minimala kostnader på din webbplats. Vid bara 36 KB gzipped, och tar bara ~ 15 ms för att initiera, lägger SDK till en försumbar mängd lasttid till din webbplats. De minimala komponenterna i biblioteket läses snabbt in när du använder SDK och det fullständiga skriptet laddas ned i bakgrunden.

Även om skriptet laddas ned från CDN placeras dessutom all spårning av sidan i kö, så att du inte förlorar någon telemetri under hela sidans livscykel. Den här konfigurationsprocessen ger din sida ett sömlöst analyssystem som är osynligt för dina användare.

Vilka webbläsare stöds av JavaScript SDK?

Chrome Firefox IE Opera Safari
Chrome Senaste ✔ Firefox senaste ✔ v3.x: IE 9+ & Microsoft Edge ✔
v2.x: IE 8+ Kompatibel och Microsoft Edge ✔		 Opera Senaste ✔ Safari Senaste ✔

Var hittar jag kodexempel för JavaScript SDK?

Körbara exempel finns i Application Insights JavaScript SDK-exempel.

Vad är ES3/Internet Explorer 8-kompatibiliteten med JavaScript SDK?

Vi måste vidta nödvändiga åtgärder för att se till att denna SDK fortsätter att "fungera" och inte bryter JavaScript-körningen när den läses in av en äldre webbläsare. Det skulle vara idealiskt att inte stödja äldre webbläsare, men många stora kunder kan inte styra vilken webbläsare användarna väljer att använda.

Den här instruktionen innebär inte att vi bara stöder den lägsta gemensamma uppsättningen funktioner. Vi måste upprätthålla ES3-kodkompatibilitet. Nya funktioner måste läggas till på ett sätt som inte bryter ES3 JavaScript-parsning och läggs till som en valfri funktion.

Mer information om Stöd för Internet Explorer 8 finns i GitHub.

Är JavaScript SDK öppen källkod?

Ja, Application Insights JavaScript SDK är öppen källkod. Information om hur du visar källkoden eller bidrar till projektet finns i den officiella GitHub-lagringsplatsen.

Support

  • Om du inte kan köra programmet eller om du inte får data som förväntat kan du läsa den dedikerade felsökningsartikeln.
  • Vanliga frågor om JavaScript SDK finns i Vanliga frågor och svar.
  • Öppna ett Azure-supportärende för Azure-supportproblem.
  • En lista över öppna problem som rör Application Insights JavaScript SDK finns på sidan Med GitHub-problem.
  • Använd tillägget Telemetry Viewer för att lista ut de enskilda händelserna i nätverkets nyttolast och övervaka de interna anropen i Application Insights.

Nästa steg