Zapnutí monitorování skutečných uživatelů Azure Monitor Application Insights

  • Článek

Sada Microsoft Azure Monitor Application Přehledy JavaScript SDK shromažďuje data o využití, která umožňují monitorovat a analyzovat výkon webových aplikací JavaScriptu. To se běžně označuje jako Monitorování skutečných uživatelů nebo RUM.

Sada Application Přehledy JavaScript SDK má základní sadu SDK a několik modulů plug-in pro další možnosti.

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

Ve výchozím nastavení shromažďujeme zobrazení stránek. Pokud ale chcete také shromažďovat kliknutí ve výchozím nastavení, zvažte přidání modulu plug-in Auto-Collection Click Analytics:

  • Pokud přidáváte rozšíření architektury, které můžete přidat , až budete postupovat podle níže uvedených kroků, můžete po přidání rozšíření architektury volitelně přidat Click Analytics.
  • Pokud nepřidáte rozšíření architektury, přidejte modul plug-in Click Analytics, až začnete postupovat podle kroků.

Poskytujeme modul plug-in ladění a modul plug-in performance pro ladění/testování. Ve výjimečných případech je možné vytvořit vlastní rozšíření přidáním vlastního modulu plug-in.

Požadavky

Začínáme

Pomocí kroků v této části instrumentujte aplikaci pomocí sady Application Přehledy JavaScript SDK.

Tip

Dobrá zpráva! Usnadňujeme povolení JavaScriptu. Podívejte se, kde je k dispozici injektáž skriptu zavaděče sady JavaScript (Web) SDK podle konfigurace.

Přidání kódu JavaScriptu

K dispozici jsou dvě metody pro přidání kódu pro povolení Přehledy aplikace prostřednictvím sady Application Přehledy JavaScript SDK:

metoda Kdy bych tuto metodu použil(a)?
Skript zavaděče sady JavaScript (Web) SDK Pro většinu zákazníků doporučujeme skript zavaděče sady JavaScript (Web), protože sadu SDK nemusíte aktualizovat a nejnovější aktualizace získáte automaticky. Máte také kontrolu nad tím, ke kterým stránkám přidáte sadu Application Přehledy JavaScript SDK.
balíček npm Chcete přenést sadu SDK do kódu a povolit IntelliSense. Tato možnost je nutná jenom pro vývojáře, kteří vyžadují více vlastních událostí a konfigurace. Tato metoda se vyžaduje, pokud plánujete použít rozšíření React, React Native nebo Angular Framework.

  1. Do horní části každé stránky, pro kterou chcete povolit aplikační Přehledy, vložte skript zavaděče javascriptové sady SDK (Web).

    Pokud možno, měli byste ho přidat jako první skript v <head> oddílu, aby mohl monitorovat případné problémy se všemi vašimi závislostmi.

    Pokud se zjistí Internet Explorer 8, sada JavaScript SDK v2.x se automaticky načte.

    <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. (Volitelné) Přidejte nebo aktualizujte volitelnou konfiguraci skriptů zavaděče sady JavaScript (Web) SDK v závislosti na tom, jestli potřebujete optimalizovat načítání webové stránky nebo vyřešit chyby načítání.

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

Konfigurace skriptů zavaděče sady JavaScript (Web) SDK

Name Type Povinné? Popis
src řetězec Požaduje se Úplná adresa URL, ze které se má sada SDK načíst. Tato hodnota se používá pro atribut "src" dynamicky přidaného <skriptu nebo> značky. Můžete použít veřejné umístění CDN nebo vlastní soukromě hostované umístění.
name řetězec Volitelné Globální název inicializované sady SDK. Toto nastavení použijte, pokud potřebujete inicializovat dvě různé sady SDK současně.

Výchozí hodnota je app Přehledy, takže window.appInsights je odkaz na inicializovanou instanci.

Poznámka: Pokud přiřadíte hodnotu názvu nebo pokud byla předchozí instance přiřazena k aplikaci globálního názvu Přehledy SDK, inicializační kód sady SDK vyžaduje, aby byl v globálním oboru názvů, aby window.appInsightsSDK=<name value> se zajistilo, že skript zavaděče JavaScriptu (Web) SDK bude kostru skriptu zavaděče a metody proxy inicializovány a aktualizovány.
Ld číslo v ms Volitelné Definuje zpoždění načítání, které se má čekat před pokusem o načtení sady SDK. Toto nastavení použijte, když se stránce HTML nedaří načíst, protože skript zavaděče sady JavaScript (Web) SDK se načítá v nesprávný čas.

Výchozí hodnota je 0 ms po vypršení časového limitu. Pokud použijete zápornou hodnotu, značka skriptu se okamžitě přidá do <head> oblasti stránky a zablokuje událost načtení stránky, dokud se skript nenačte nebo selže.
useXhr boolean Volitelné Toto nastavení se používá pouze pro hlášení selhání načítání sady SDK. Toto nastavení je například užitečné, když skript zavaděče sady JavaScript (Web) SDK brání načtení stránky HTML, což způsobí nedostupnost načítání().

Při vytváření sestav se nejprve pokusí použít funkci fetch(), pokud je k dispozici, a pak se vrátíte do XHR. Nastavte toto nastavení tak, aby true se obešel kontrola načítání. Toto nastavení se vyžaduje jenom v případě, že se vaše aplikace používá v prostředí, ve kterém se načtení nepodaří odeslat události selhání, například pokud se skript zavaděče sady JavaScript (Web) SDK úspěšně nenačte.
crossOrigin řetězec Volitelné Zahrnutím tohoto nastavení zahrnuje značka skriptu přidaná ke stažení sady SDK atribut crossOrigin s touto hodnotou řetězce. Toto nastavení použijte, když potřebujete poskytnout podporu CORS. Pokud není definován (výchozí), není přidán žádný atribut crossOrigin. Doporučené hodnoty nejsou definovány (výchozí), "" nebo "anonymní". Všechny platné hodnoty najdete v dokumentaci k atributu HTML mezi zdroji.
Oninit function(aiSdk) { ... } Volitelné Tato funkce zpětného volání se volá po úspěšném načtení a inicializaci hlavního skriptu sady SDK z CDN (na základě hodnoty src). Tato funkce zpětného volání je užitečná, když potřebujete vložit inicializátor telemetrie. Předá se jeden argument, což je odkaz na instanci sady SDK, pro kterou se volá, a volá se také před prvním počátečním zobrazením stránky. Pokud už sada SDK byla načtena a inicializována, volání tohoto zpětného volání se stále volá. POZNÁMKA: Během zpracování pole sdk.queue se volá toto zpětné volání. Do fronty nelze přidat žádné další položky, protože se ignorují a zahodí. (Přidáno jako součást JavaScriptu (Web) SDK Loader Script verze 5--the sv:"5" hodnota v rámci skriptu).
Čr boolean Volitelné Pokud se sadě SDK nepodaří načíst a hodnota koncového bodu definovaná pro src veřejné umístění CDN, pokusí se tato možnost konfigurace okamžitě načíst sadu SDK z jednoho z následujících záložních koncových bodů CDN:
  • 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
POZNÁMKA: az416426.vo.msecnd.net se částečně podporuje, proto se nedoporučuje.

Pokud se sada SDK úspěšně načte ze záložního koncového bodu CDN, načte se z prvního dostupného koncového bodu, který se určí, kdy server provede úspěšnou kontrolu načtení. Pokud se sadě SDK nepodaří načíst z některého z koncových bodů CDN zálohování, zobrazí se chybová zpráva selhání sady SDK.

Pokud není definována, výchozí hodnota je true. Pokud nechcete načíst sadu SDK ze záložních koncových bodů CDN, nastavte tuto možnost konfigurace na falsehodnotu .

Pokud načítáte sadu SDK z vlastního privátního hostovaného koncového bodu CDN, tato možnost konfigurace se nedá použít.

Vložení připojovací řetězec do prostředí

Chcete-li vložit připojovací řetězec do prostředí, postupujte takto:

  1. Přejděte do podokna Přehled prostředku Přehledy aplikace.

  2. Vyhledejte řetězec Připojení ion.

  3. Výběrem ikony Kopírovat do schránky zkopírujte připojovací řetězec do schránky.

    Screenshot that shows Application Insights overview and connection string.

  4. Zástupný symbol "YOUR_CONNECTION_STRING" v kódu JavaScriptu nahraďte připojovací řetězec zkopírovaným do schránky.

    Formát connectionString musí následovat po instrumentaciKey=xxxx;..... Pokud zadaný řetězec nesplňuje tento formát, proces načtení sady SDK selže.

    Připojovací řetězec se nepovažuje za token zabezpečení ani klíč. Další informace najdete v tématu O nových oblastech Azure, které vyžadují použití připojovací řetězec?.

(Volitelné) Přidání konfigurace sady SDK

Volitelná konfigurace sady SDK se předá do sady Application Přehledy JavaScript SDK během inicializace.

Pokud chcete přidat konfiguraci sady SDK, přidejte každou možnost konfigurace přímo v části connectionString. Příklad:

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

(Volitelné) Přidání pokročilé konfigurace sady SDK

Pokud chcete použít další funkce poskytované moduly plug-in pro konkrétní architektury a volitelně povolit modul plug-in Click Analytics, přečtěte si:

Potvrzení toku dat

  1. Přejděte ke svému prostředku aplikace Přehledy, pro který jste povolili sadu SDK.

  2. V nabídce prostředku Přehledy aplikace vlevo v části Prozkoumat vyberte podokno Hledání transakcí.

  3. Otevřete rozevírací nabídku Typy událostí a výběrem možnosti Vybrat vše zrušte zaškrtnutí políček v nabídce.

  4. V rozevírací nabídce Typy událostí vyberte:

    • Zobrazení stránky pro aplikaci Azure Monitor Přehledy monitorování skutečných uživatelů
    • Vlastní událost modulu plug-in Auto-Collection click Analytics

    Zobrazení dat na portálu může trvat několik minut. Pokud se zobrazí jenom data, která se zobrazují, je výjimka selhání načtení, přečtěte si téma Řešení potíží se selháním načítání sady SDK pro webové aplikace v JavaScriptu.

    V některých případech, pokud na stejné stránce běží více instancí různých verzí aplikace Přehledy, mohou během inicializace dojít k chybám. V těchto případech a chybovou zprávu, která se zobrazí, naleznete v tématu Spuštění více verzí sady Application Přehledy JavaScript SDK v jedné relaci. Pokud jste narazili na některou z těchto chyb, zkuste změnit obor názvů pomocí tohoto name nastavení. Další informace najdete v tématu JavaScript (Web) SDK Loader Script configuration.

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

  5. Pokud chcete dotazovat data, abyste potvrdili tok dat:

    1. V levém podokně vyberte Protokoly .

      Když vyberete Protokoly, otevře se dialogové okno Dotazy, které obsahuje ukázkové dotazy relevantní pro vaše data.

    2. Vyberte Spustit pro ukázkový dotaz, který chcete spustit.

    3. V případě potřeby můžete ukázkový dotaz aktualizovat nebo napsat nový dotaz pomocí dotazovací jazyk Kusto (KQL).

      Základní operátory KQL najdete v tématu Seznámení s běžnými operátory KQL.

Nejčastější dotazy

Tato část obsahuje odpovědi na běžné otázky.

Jaké jsou počty uživatelů a relací?

  • Sada JavaScript SDK nastaví soubor cookie uživatele na webovém klientovi, aby identifikoval vracející se uživatele a soubor cookie relace pro seskupování aktivit.
  • Pokud neexistuje žádný skript na straně klienta, můžete na serveru nastavit soubory cookie.
  • Pokud jeden skutečný uživatel používá váš web v různých prohlížečích nebo pomocí anonymního nebo anonymního procházení nebo různých počítačů, počítá se více než jednou.
  • Pokud chcete identifikovat přihlášeného uživatele v různých počítačích a prohlížečích, přidejte volání setAuthenticatedUserContext().

Jaký je výkon nebo režie sady JavaScript SDK?

Sada Application Přehledy JavaScript SDK má na vašem webu minimální režii. V pouhých 36 kB gzipped a trvá pouze ~15 ms k inicializaci, SADA SDK přidá zanedbatelnou dobu načítání na váš web. Minimální komponenty knihovny se rychle načtou při použití sady SDK a celý skript se stáhne na pozadí.

Kromě toho, když se skript stahuje z CDN, veškeré sledování stránky se zařadí do fronty, takže během celého životního cyklu stránky nepřijdete o žádnou telemetrii. Tento proces nastavení poskytuje vaší stránce bezproblémový analytický systém, který není pro uživatele neviditelný.

Jaké prohlížeče podporuje javascriptová sada SDK?

Chrome Firefox IE Opera Safari
Nejnovější ✔ verze Chromu Nejnovější verze Firefoxu ✔ v3.x: IE 9+ a Microsoft Edge ✔
v2.x: Kompatibilní iE 8+ a Microsoft Edge ✔		 Nejnovější ✔ opera Nejnovější ✔ safari

Kde najdu příklady kódu pro javascriptovou sadu SDK?

Příklady, které se dají spustit, najdete v tématu Ukázky sady JavaScript SDK Přehledy aplikací.

Jaká je kompatibilita ES3/Internet Exploreru 8 se sadou JavaScript SDK?

Musíme přijmout nezbytná opatření, abychom zajistili, že tato sada SDK bude fungovat i nadále a při načítání starším prohlížečem neruší provádění JavaScriptu. Bylo by ideální nepodpořit starší prohlížeče, ale mnoho velkých zákazníků nemůže řídit, který prohlížeč se uživatelé rozhodnou použít.

Tento příkaz neznamená, že podporujeme pouze nejnižší společnou sadu funkcí. Musíme udržovat kompatibilitu kódu ES3. Nové funkce je potřeba přidat způsobem, který by neporušil analýzu JavaScriptu ES3 a přidal se jako volitelná funkce.

Úplné podrobnosti o podpoře Internet Exploreru 8 najdete na GitHubu.

Je javascriptová sada SDK opensourcová?

Ano, sada Application Přehledy JavaScript SDK je open source. Pokud chcete zobrazit zdrojový kód nebo přispívat do projektu, podívejte se na oficiální úložiště GitHub.

Technická podpora

  • Pokud nemůžete spustit aplikaci nebo nezískáte data podle očekávání, přečtěte si vyhrazený článek o řešení potíží.
  • Nejčastější dotazy k sadě JavaScript SDK najdete v nejčastějších dotazech.
  • V případě podpora Azure problémů otevřete lístek podpora Azure.
  • Seznam otevřených problémů souvisejících se sadou Application Přehledy JavaScript SDK najdete na stránce s problémy GitHubu.
  • Pomocí rozšíření Prohlížeč telemetrie můžete vypsat jednotlivé události v datové části sítě a monitorovat interní volání v rámci aplikace Přehledy.

Další kroky