Azure Monitor Application Insights gerçek Kullanıcı izlemeyi etkinleştir

  • Makale

Microsoft Azure İzleyici Uygulaması Analizler JavaScript SDK'sı, JavaScript web uygulamalarının performansını izlemenizi ve analiz etmenizi sağlayan kullanım verilerini toplar. Bu genellikle Gerçek Kullanıcı İzleme veya RUM olarak adlandırılır.

Application Analizler JavaScript SDK'sının temel SDK'sı ve daha fazla özellik için çeşitli eklentileri vardır.

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

Sayfa görünümlerini varsayılan olarak toplarız. Ancak varsayılan olarak tıklamaları da toplamak istiyorsanız Tıklama Analizi Otomatik Toplama eklentisini eklemeyi göz önünde bulundurun:

Hata ayıklama/test için Hata ayıklama eklentisini ve Performans eklentisini sağlıyoruz. Nadir durumlarda, özel bir eklenti ekleyerek kendi uzantınızı oluşturmak mümkündür.

Önkoşullar

Kullanmaya başlayın

Uygulamanızı Application Analizler JavaScript SDK'sı ile izlemek için bu bölümdeki adımları izleyin.

İpucu

Güzel bir haberimiz var! JavaScript'i etkinleştirmeyi daha da kolaylaştırıyoruz. Yapılandırmaya göre JavaScript (Web) SDK Yükleyici Betiği ekleme özelliğine göz atın!

JavaScript kodunu ekleme

Application Analizler JavaScript SDK'sı aracılığıyla Application Analizler'ı etkinleştirmek için kodu eklemek için iki yöntem kullanılabilir:

Metot Bu yöntemi ne zaman kullanabilirim?
JavaScript (Web) SDK Yükleyici Betiği Çoğu müşteri için JavaScript (Web) SDK Yükleyici Betiği'ni öneririz çünkü SDK'yı hiçbir zaman güncelleştirmeniz gerekmez ve en son güncelleştirmeleri otomatik olarak alırsınız. Ayrıca, Application Analizler JavaScript SDK'sını hangi sayfalara eklediğinizi denetleyebilirsiniz.
npm paketi SDK'yı kodunuza getirmek ve IntelliSense'i etkinleştirmek istiyorsunuz. Bu seçenek yalnızca daha fazla özel olay ve yapılandırma gerektiren geliştiriciler için gereklidir. React, React Native veya Angular Framework Uzantısını kullanmayı planlıyorsanız bu yöntem gereklidir.

  1. Application Analizler'ı etkinleştirmek istediğiniz her sayfanın en üstüne JavaScript (Web) SDK Yükleyici Betiğini yapıştırın.

    Tercihen, tüm bağımlılıklarınızla ilgili olası sorunları izleyebilmesi için bölümünüzdeki <head> ilk betik olarak eklemeniz gerekir.

    Internet Explorer 8 algılanırsa JavaScript SDK v2.x otomatik olarak yüklenir.

    <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. (İsteğe bağlı) Web sayfanızın yüklenmesini iyileştirmeniz veya yükleme hatalarını çözmeniz gerekip gerekmediğiniza bağlı olarak isteğe bağlı JavaScript (Web) SDK Yükleyici Betiği yapılandırmasını ekleyin veya güncelleştirin.

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

JavaScript (Web) SDK Yükleyici Betiği yapılandırması

Adı Türü Gerekli mi? Açıklama
src Dize Zorunlu SDK'nın yüklendiği yerin tam URL'si. Bu değer, dinamik olarak eklenen <bir betiğin /> etiketin "src" özniteliği için kullanılır. Genel CDN konumunu veya kendi özel olarak barındırılan konumunuzu kullanabilirsiniz.
Adı Dize İsteğe bağlı Başlatılan SDK'nın genel adı. Aynı anda iki farklı SDK başlatmanız gerekiyorsa bu ayarı kullanın.

Varsayılan değer uygulamadır Analizler bu nedenle window.appInsights başlatılan örneğe başvurudur.

Not: Bir ad değeri atarsanız veya genel ad uygulamasına önceki bir örnek atanmışsa Analizler SDK, SDK başlatma kodu doğru JavaScript (Web) SDK Yükleyici Betiği iskeletinin ve proxy yöntemlerinin başlatılıp güncelleştirildiğinden emin olmak için genel ad alanında window.appInsightsSDK=<name value> olmasını gerektirir.
Ld ms'de sayı İsteğe bağlı SDK'yi yüklemeye çalışmadan önce beklenecek yük gecikmesini tanımlar. JavaScript (Web) SDK Yükleyici Betiği yanlış zamanda yüklendiğinden HTML sayfası yüklenemediğinde bu ayarı kullanın.

Varsayılan değer, zaman aşımından sonra 0ms'dir. Negatif bir değer kullanırsanız, betik etiketi sayfanın bölgesine hemen eklenir ve betik yüklenene <head> veya başarısız olana kadar sayfa yükleme olayını engeller.
useXhr boolean İsteğe bağlı Bu ayar yalnızca SDK yükleme hatalarını raporlamak için kullanılır. Örneğin, JavaScript (Web) SDK Yükleyici Betiği HTML sayfasının yüklenmesini engelleyerek fetch() öğesinin kullanılamamasına neden olduğunda bu ayar kullanışlıdır.

Raporlama önce varsa fetch() kullanmayı dener ve sonra XHR'ye geri dönme. Getirme denetimini atlamak için bu ayarı true olarak ayarlayın. Bu ayar yalnızca uygulamanız, JavaScript (Web) SDK Yükleyici Betiği başarıyla yüklenmiyorsa gibi getirme işleminin başarısız olduğu bir ortamda kullanılıyorsa gereklidir.
crossOrigin Dize İsteğe bağlı Bu ayarı ekleyerek SDK'yı indirmek için eklenen betik etiketi, bu dize değerine sahip crossOrigin özniteliğini içerir. CORS için destek sağlamanız gerektiğinde bu ayarı kullanın. Tanımlanmadığında (varsayılan), crossOrigin özniteliği eklenmez. Önerilen değerler tanımlanmamıştır (varsayılan), "" veya "anonim". Tüm geçerli değerler için çıkış noktaları arası HTML özniteliği belgelerine bakın.
Onınit function(aiSdk) { ... } İsteğe bağlı Ana SDK betiği CDN'den başarıyla yüklendikten ve başlatıldıktan sonra (src değerine göre) bu geri çağırma işlevi çağrılır. Bu geri çağırma işlevi, telemetri başlatıcısı eklemeniz gerektiğinde kullanışlıdır. İlk sayfa görünümünden önce çağrılan ve çağrılan SDK örneğine başvuru olan tek bir bağımsız değişken geçirilir. SDK zaten yüklenmiş ve başlatılmışsa, bu geri çağırma hala çağrılır. NOT: sdk.queue dizisi işlenirken bu geri çağırma çağrılır. Yoksayılıp bırakıldıkları için kuyruğa başka öğe ekleyemezsiniz. (Betik içindeki sv:"5" değeri olan JavaScript (Web) SDK Yükleyici Betiği sürüm 5'in bir parçası olarak eklenir).
Cr boolean İsteğe bağlı SDK yüklenemezse ve için src tanımlanan uç nokta değeri genel CDN konumuysa, bu yapılandırma seçeneği aşağıdaki yedekleme CDN uç noktalarının birinden SDK'yı hemen yüklemeyi dener:
  • 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
NOT: az416426.vo.msecnd.net kısmen desteklendiğinden önerilmez.

SDK bir yedekleme CDN uç noktasından başarıyla yüklenirse, sunucu başarılı bir yük denetimi gerçekleştirdiğinde belirlenen kullanılabilir ilk uç noktadan yüklenir. SDK, yedekleme CDN uç noktalarının herhangi birinden yüklenemezse SDK Hatası hata iletisi görüntülenir.

Tanımlanmadığında, varsayılan değer şeklindedir true. SDK'yı yedekleme CDN uç noktalarına yüklemek istemiyorsanız, bu yapılandırma seçeneğini olarak falseayarlayın.

SDK'yı kendi özel olarak barındırılan CDN uç noktanızdan yüklüyorsanız, bu yapılandırma seçeneği geçerli değildir.

bağlantı dizesi ortamınıza yapıştırma

bağlantı dizesi ortamınıza yapıştırmak için şu adımları izleyin:

  1. Uygulama Analizler kaynağınızın Genel Bakış bölmesine gidin.

  2. Bağlan ion Dizesini bulun.

  3. bağlantı dizesi panoya kopyalamak için Panoya kopyala simgesini seçin.

    Screenshot that shows Application Insights overview and connection string.

  4. JavaScript kodundaki yer tutucuyu "YOUR_CONNECTION_STRING" panoya kopyalanan bağlantı dizesi ile değiştirin.

    Biçimin connectionString "InstrumentationKey=xxxx;...." şeklinde olması gerekir. Sağlanan dize bu biçimi karşılamıyorsa SDK yükleme işlemi başarısız olur.

    bağlantı dizesi bir güvenlik belirteci veya anahtar olarak kabul edilmez. Daha fazla bilgi için bkz. Yeni Azure bölgeleri bağlantı dizesi kullanımını gerektiriyor mu?.

(İsteğe bağlı) SDK yapılandırması ekleme

İsteğe bağlı SDK yapılandırması başlatma sırasında Application Analizler JavaScript SDK'sına geçirilir.

SDK yapılandırması eklemek için, her yapılandırma seçeneğini doğrudan altına connectionStringekleyin. Örneğin:

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

(İsteğe bağlı) Gelişmiş SDK yapılandırması ekleme

Eklentiler tarafından belirli çerçeveler için sağlanan ek özellikleri kullanmak ve isteğe bağlı olarak Tıklama Analizi eklentisini etkinleştirmek istiyorsanız bkz:

Verilerin aktığını onaylayın

  1. SDK'sını etkinleştirdiğiniz Uygulama Analizler kaynağınıza gidin.

  2. Soldaki Uygulama Analizler kaynak menüsünde araştır'ın altında İşlem arama bölmesini seçin.

  3. Olay türleri açılan menüsünü açın ve Menüdeki onay kutularını temizlemek için Tümünü seç'i seçin.

  4. Olay türleri açılan menüsünden şunları seçin:

    • Azure İzleyici Uygulaması Analizler Gerçek Kullanıcı İzleme için Sayfa Görünümü
    • Tıklama Analizi Otomatik Toplama eklentisi için özel olay .

    Verilerin portalda görünmesi birkaç dakika sürebilir. Gördüğünüz tek veriler bir yük hatası özel durumuysa bkz . JavaScript web uygulamaları için SDK yükleme hatası sorunlarını giderme.

    Bazı durumlarda, Application Analizler'ın farklı sürümlerinin birden çok örneği aynı sayfada çalışıyorsa başlatma sırasında hatalar oluşabilir. Bu durumlar ve görüntülenen hata iletisi için bkz. Application Analizler JavaScript SDK'sının birden çok sürümünü tek bir oturumda çalıştırma. Bu hatalardan biriyle karşılaştıysanız, ayarını kullanarak name ad alanını değiştirmeyi deneyin. Daha fazla bilgi için bkz . JavaScript (Web) SDK Yükleyici Betiği yapılandırması.

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

  5. Verilerin aktığını onaylamak için verileri sorgulamak istiyorsanız:

    1. Sol bölmede Günlükler'i seçin.

      Günlükler'i seçtiğinizde, verilerinizle ilgili örnek sorguları içeren Sorgular iletişim kutusu açılır.

    2. Çalıştırmak istediğiniz örnek sorgu için Çalıştır'ı seçin.

    3. Gerekirse, Kusto Sorgu Dili (KQL) kullanarak örnek sorguyu güncelleştirebilir veya yeni bir sorgu yazabilirsiniz.

      Temel KQL işleçleri için bkz . Yaygın KQL işleçlerini öğrenme.

Sık sorulan sorular

Bu bölüm, sık sorulan soruların yanıtlarını sağlar.

Kullanıcı ve oturum sayıları nelerdir?

  • JavaScript SDK'sı, dönen kullanıcıları tanımlamak için web istemcisinde bir kullanıcı tanımlama bilgisi ve etkinlikleri gruplandırmak için bir oturum tanımlama bilgisi ayarlar.
  • İstemci tarafı betiği yoksa, sunucuda tanımlama bilgileri ayarlayabilirsiniz.
  • Gerçek bir kullanıcı sitenizi farklı tarayıcılarda veya özel/gizli gözatma veya farklı makineler kullanarak kullanıyorsa, bunlar birden çok kez sayılır.
  • Makineler ve tarayıcılar arasında oturum açmış bir kullanıcıyı tanımlamak için setAuthenticatedUserContext() için bir çağrı ekleyin.

JavaScript SDK performansı/yükü nedir?

Application Analizler JavaScript SDK'sının web sitenizde çok az yükü vardır. Sdk, yalnızca 36 KB sıkıştırmayla ve başlatılması yalnızca yaklaşık 15 ms'lik bir sürede web sitenize göz ardı edilebilir bir yükleme süresi ekler. SDK'yı kullandığınızda kitaplığın en düşük bileşenleri hızla yüklenir ve arka planda tam betik indirilir.

Ayrıca, betik CDN'den indirilirken sayfanızın tüm izlemesi kuyruğa alınır, böylece sayfanızın tüm yaşam döngüsü boyunca telemetri kaybı olmaz. Bu kurulum işlemi, sayfanıza kullanıcılarınız tarafından görülemeyen sorunsuz bir analiz sistemi sağlar.

JavaScript SDK'sı hangi tarayıcıları destekler?

Chrome Firefox IE Opera Safari
Chrome En Son ✔ Firefox En Son ✔ v3.x: IE 9+ ve Microsoft Edge ✔
v2.x: IE 8+ Uyumlu ve Microsoft Edge ✔		 En Son ✔ Opera Safari En Son ✔

JavaScript SDK'sı için kod örneklerini nerede bulabilirim?

Çalıştırılabilir örnekler için bkz. Application Analizler JavaScript SDK örnekleri.

JavaScript SDK ile ES3/Internet Explorer 8 uyumluluğu nedir?

Bu SDK'nın "çalışmaya" devam ettiğinden ve eski bir tarayıcı tarafından yüklendiğinde JavaScript yürütmesini bozmadığından emin olmak için gerekli önlemleri almalıyız. Eski tarayıcıları desteklememek ideal olacaktır, ancak çok sayıda büyük müşteri kullanıcılarının hangi tarayıcıyı kullanmayı seçtiğini denetleyemez.

Bu ifade yalnızca en düşük ortak özellik kümesini desteklediğimiz anlamına gelmez. ES3 kod uyumluluğunu korumamız gerekiyor. Yeni özelliklerin ES3 JavaScript ayrıştırmayı bozacak şekilde eklenmesi ve isteğe bağlı bir özellik olarak eklenmesi gerekir.

Internet Explorer 8 desteğiyle ilgili tüm ayrıntılar için bkz. GitHub.

JavaScript SDK'sı açık kaynak mı?

Evet, Application Analizler JavaScript SDK'sı açık kaynak. Kaynak kodu görüntülemek veya projeye katkıda bulunmak için resmi GitHub deposuna bakın.

Destek

Sonraki adımlar