Mengaktifkan Pemantauan Pengguna Nyata Azure Monitor Application Insights

  • Artikel

SDK JavaScript Microsoft Azure Monitor Application Insights mengumpulkan data penggunaan, yang memungkinkan Anda memantau dan menganalisis performa aplikasi web JavaScript. Ini biasanya disebut sebagai Pemantauan Pengguna Nyata atau RUM.

Application Insights JavaScript SDK memiliki SDK dasar dan beberapa plugin untuk lebih banyak kemampuan.

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

Kami mengumpulkan tampilan halaman secara default. Tetapi jika Anda ingin juga mengumpulkan klik secara default, pertimbangkan untuk menambahkan plug-in Koleksi Otomatis Click Analytics:

  • Jika Anda menambahkan ekstensi kerangka kerja, yang dapat Anda tambahkan setelah mengikuti langkah-langkah untuk memulai di bawah ini, Anda dapat secara opsional menambahkan Click Analytics saat menambahkan ekstensi kerangka kerja.
  • Jika Anda tidak menambahkan ekstensi kerangka kerja, tambahkan plug-in Click Analytics setelah Anda mengikuti langkah-langkah untuk memulai.

Kami menyediakan plugin Debug dan plugin Performa untuk penelusuran kesalahan/pengujian. Dalam kasus yang jarang terjadi, Dimungkinkan untuk membangun ekstensi Anda sendiri dengan menambahkan plugin kustom.

Prasyarat

Mulai

Ikuti langkah-langkah di bagian ini untuk melengkapi aplikasi Anda dengan Application Insights JavaScript SDK.

Tip

Kabar baik! Kami membuatnya lebih mudah untuk mengaktifkan JavaScript. Lihat di mana injeksi Skrip Pemuat SDK JavaScript (Web) berdasarkan konfigurasi tersedia!

Menambahkan kode JavaScript

Dua metode tersedia untuk menambahkan kode untuk mengaktifkan Application Insights melalui Application Insights JavaScript SDK:

Metode Kapan saya akan menggunakan metode ini?
Skrip Pemuat SDK JavaScript (Web) Untuk sebagian besar pelanggan, kami merekomendasikan Skrip Pemuat SDK JavaScript (Web) karena Anda tidak perlu memperbarui SDK dan Anda mendapatkan pembaruan terbaru secara otomatis. Selain itu, Anda memiliki kontrol atas halaman mana yang Anda tambahkan SDK JavaScript Application Insights.
paket npm Anda ingin membawa SDK ke dalam kode Anda dan mengaktifkan IntelliSense. Opsi ini hanya diperlukan untuk pengembang yang memerlukan lebih banyak peristiwa dan konfigurasi kustom. Metode ini diperlukan jika Anda berencana untuk menggunakan React, React Native, atau Angular Framework Extension.

  1. Tempelkan Skrip Pemuat SDK JavaScript (Web) di bagian atas setiap halaman yang ingin Anda aktifkan Application Insights.

    Sebaiknya, Anda harus menambahkannya sebagai skrip pertama di bagian Anda <head> sehingga dapat memantau potensi masalah dengan semua dependensi Anda.

    Jika Internet Explorer 8 terdeteksi, JavaScript SDK v2.x dimuat secara otomatis.

    <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. (Opsional) Tambahkan atau perbarui konfigurasi Skrip Pemuat JavaScript (Web) opsional, bergantung pada apakah Anda perlu mengoptimalkan pemuatan halaman web Anda atau mengatasi kesalahan pemuatan.

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

Konfigurasi Skrip Pemuat SDK JavaScript (Web)

Nama Jenis Wajib diisi? Deskripsi
src string Wajib URL lengkap tempat memuat SDK. Nilai ini digunakan untuk atribut "src" dari tag <script /> yang ditambahkan secara dinamis. Anda dapat menggunakan lokasi CDN publik atau lokasi Anda sendiri yang dihosting secara privat.
nama string Opsional Nama global untuk SDK yang diinisialisasi. Gunakan pengaturan ini jika Anda perlu menginisialisasi dua SDK yang berbeda secara bersamaan.

Nilai defaultnya adalah appInsights, jadi window.appInsights adalah referensi ke instans yang diinisialisasi.

Catatan: Jika Anda menetapkan nilai nama atau jika instans sebelumnya telah ditetapkan ke nama global appInsightsSDK, kode inisialisasi SDK mengharuskannya berada di namespace window.appInsightsSDK=<name value> layanan global untuk memastikan kerangka Skrip Pemuat JavaScript (Web) SDK yang benar, dan metode proksi diinisialisasi dan diperbarui.
ld angka dalam ms Opsional Menentukan penundaan pemuatan yang akan ditunggu sebelum mencoba memuat SDK. Gunakan pengaturan ini ketika halaman HTML gagal dimuat karena Skrip Pemuat SDK JavaScript (Web) dimuat pada waktu yang salah.

Nilai defaultnya adalah 0ms setelah batas waktu. Jika Anda menggunakan nilai negatif, tag skrip segera ditambahkan ke <head> wilayah halaman dan memblokir peristiwa pemuatan halaman hingga skrip dimuat atau gagal.
useXhr Boolean Opsional Pengaturan ini hanya digunakan untuk melaporkan kegagalan pemuatan SDK. Misalnya, pengaturan ini berguna ketika Skrip Pemuat SDK JavaScript (Web) mencegah halaman HTML dimuat, menyebabkan pengambilan() tidak tersedia.

Melaporkan upaya pertama untuk menggunakan fetch() jika tersedia lalu fallback ke XHR. Atur pengaturan ini ke true untuk melewati pemeriksaan pengambilan. Pengaturan ini hanya diperlukan jika aplikasi Anda digunakan di lingkungan tempat pengambilan akan gagal mengirim peristiwa kegagalan seperti jika Skrip Pemuat SDK JavaScript (Web) tidak berhasil dimuat.
crossOrigin string Opsional Dengan menyertakan pengaturan ini, tag skrip yang ditambahkan untuk mengunduh SDK menyertakan atribut crossOrigin dengan nilai string ini. Gunakan pengaturan ini saat Anda perlu memberikan dukungan untuk CORS. Ketika tidak ditentukan (default), tidak ada atribut crossOrigin yang ditambahkan. Nilai yang direkomendasikan tidak ditentukan (default), "", atau "anonim". Untuk semua nilai yang valid, lihat dokumentasi atribut HTML lintas asal.
onInit function(aiSdk) { ... } Opsional Fungsi panggilan balik ini dipanggil setelah skrip SDK utama berhasil dimuat dan diinisialisasi dari CDN (berdasarkan nilai src). Fungsi panggilan balik ini berguna ketika Anda perlu menyisipkan penginisialisasi telemetri. Ini diteruskan satu argumen, yang merupakan referensi ke instans SDK yang sedang dipanggil dan juga dipanggil sebelum tampilan halaman awal pertama. Jika SDK telah dimuat dan diinisialisasi, panggilan balik ini masih dipanggil. CATATAN: Selama pemrosesan array sdk.queue, panggilan balik ini dipanggil. Anda TIDAK DAPAT menambahkan item lagi ke antrean karena diabaikan dan dihilangkan. (Ditambahkan sebagai bagian dari Skrip Pemuat SDK JavaScript (Web) versi 5--nilai sv:"5" dalam skrip).
cr Boolean Opsional Jika SDK gagal dimuat dan nilai titik akhir yang ditentukan adalah src lokasi CDN publik, opsi konfigurasi ini mencoba untuk segera memuat SDK dari salah satu titik akhir CDN cadangan berikut:
  • 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
CATATAN: az416426.vo.msecnd.net didukung sebagian, jadi tidak disarankan.

Jika SDK berhasil dimuat dari titik akhir CDN cadangan, SDK dimuat dari yang pertama tersedia, yang ditentukan ketika server melakukan pemeriksaan beban yang berhasil. Jika SDK gagal dimuat dari salah satu titik akhir CDN cadangan, pesan kesalahan Kegagalan SDK muncul.

Ketika tidak ditentukan, nilai defaultnya adalah true. Jika Anda tidak ingin memuat SDK dari titik akhir CDN cadangan, atur opsi konfigurasi ini ke false.

Jika Anda memuat SDK dari titik akhir CDN yang dihosting secara privat, opsi konfigurasi ini tidak berlaku.

Tempelkan string koneksi di lingkungan Anda

Untuk menempelkan string koneksi di lingkungan Anda, ikuti langkah-langkah berikut:

  1. Navigasi ke panel Gambaran Umum sumber daya Application Insights Anda.

  2. Temukan String Koneksi ion.

  3. Pilih ikon Salin ke clipboard untuk menyalin string koneksi ke clipboard.

    Screenshot that shows Application Insights overview and connection string.

  4. Ganti tempat penampung "YOUR_CONNECTION_STRING" dalam kode JavaScript dengan string koneksi Anda disalin ke clipboard.

    connectionString Format harus mengikuti "InstrumentationKey=xxxx;....". Jika string yang disediakan tidak memenuhi format ini, proses pemuatan SDK gagal.

    string koneksi tidak dianggap sebagai token atau kunci keamanan. Untuk informasi selengkapnya, lihat Apakah wilayah Azure baru memerlukan penggunaan string koneksi?.

(Opsional) Menambahkan konfigurasi SDK

Konfigurasi SDK opsional diteruskan ke Application Insights JavaScript SDK selama inisialisasi.

Untuk menambahkan konfigurasi SDK, tambahkan setiap opsi konfigurasi langsung di bawah connectionString. Misalnya:

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

(Opsional) Menambahkan konfigurasi SDK tingkat lanjut

Jika Anda ingin menggunakan fitur tambahan yang disediakan oleh plugin untuk kerangka kerja tertentu dan secara opsional mengaktifkan plug-in Click Analytics, lihat:

Mengonfirmasi data sedang mengalir

  1. Buka sumber daya Application Insights tempat Anda mengaktifkan SDK.

  2. Di menu sumber daya Application Insights di sebelah kiri, di bawah Selidiki, pilih panel Pencarian transaksi .

  3. Buka menu dropdown Jenis peristiwa dan pilih Pilih semua untuk menghapus kotak centang di menu.

  4. Dari menu dropdown Jenis peristiwa, pilih:

    • Tampilan Halaman untuk Pemantauan Pengguna Nyata Azure Monitor Application Insights
    • Peristiwa Kustom untuk plug-in Koleksi Otomatis Click Analytics.

    Mungkin perlu waktu beberapa menit hingga data muncul di portal. Jika satu-satunya data yang Anda lihat muncul adalah pengecualian kegagalan beban, lihat Memecahkan masalah kegagalan pemuatan SDK untuk aplikasi web JavaScript.

    Dalam beberapa kasus, jika beberapa instans dari berbagai versi Application Insights berjalan di halaman yang sama, kesalahan dapat terjadi selama inisialisasi. Untuk kasus ini dan pesan kesalahan yang muncul, lihat Menjalankan beberapa versi SDK JavaScript Application Insights dalam satu sesi. Jika Anda mengalami salah satu kesalahan ini, coba ubah namespace dengan menggunakan name pengaturan . Untuk informasi selengkapnya, lihat Konfigurasi Skrip Pemuat SDK JavaScript (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. Jika Anda ingin mengkueri data untuk mengonfirmasi bahwa data mengalir:

    1. Pilih Log di panel kiri.

      Saat Anda memilih Log, dialog Kueri terbuka, yang berisi kueri sampel yang relevan dengan data Anda.

    2. Pilih Jalankan untuk kueri sampel yang ingin Anda jalankan.

    3. Jika diperlukan, Anda dapat memperbarui kueri sampel atau menulis kueri baru dengan menggunakan Bahasa Kueri Kusto (KQL).

      Untuk operator KQL penting, lihat Mempelajari operator KQL umum.

Pertanyaan yang Sering Ditanyakan

Bagian ini menyediakan jawaban atas pertanyaan umum.

Apa saja jumlah pengguna dan sesi?

  • JavaScript SDK menetapkan cookie pengguna di klien web, untuk mengidentifikasi pengguna yang kembali, dan cookie sesi ke aktivitas grup.
  • Jika tidak ada skrip sisi klien, Anda dapat mengatur cookie di server.
  • Jika satu pengguna nyata menggunakan situs Anda di browser yang berbeda, atau dengan menggunakan penjelajahan pribadi/penyamaran, atau komputer yang berbeda, mereka dihitung lebih dari sekali.
  • Untuk mengidentifikasi pengguna yang masuk di seluruh komputer dan browser, tambahkan panggilan ke setAuthenticatedUserContext().

Apa itu performa/overhead JavaScript SDK?

Application Insights JavaScript SDK memiliki overhead minimal di situs web Anda. Hanya dengan 36 KB gzipped, dan hanya membutuhkan ~ 15 ms untuk diinisialisasi, SDK menambahkan jumlah waktu muat yang dapat diabaikan ke situs web Anda. Komponen minimal pustaka dengan cepat dimuat saat Anda menggunakan SDK, dan skrip lengkap diunduh di latar belakang.

Selain itu, saat skrip diunduh dari CDN, semua pelacakan halaman Anda diantrekan, sehingga Anda tidak kehilangan telemetri apa pun selama seluruh siklus hidup halaman Anda. Proses penyiapan ini memberi sistem analitik yang mulus bagi halaman Anda, sistem yang tidak terlihat oleh pengguna Anda.

Browser apa yang didukung oleh JavaScript SDK?

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

Di mana saya dapat menemukan contoh kode untuk JavaScript SDK?

Untuk sampel yang dapat dijalankan, lihat Sampel SDK JavaScript Application Insights.

Apa itu kompatibilitas ES3/Internet Explorer 8 dengan JavaScript SDK?

Kita perlu mengambil langkah-langkah yang diperlukan untuk memastikan bahwa SDK ini terus "berfungsi" dan tidak merusak eksekusi JavaScript saat dimuat oleh browser yang lebih lama. Akan sangat ideal untuk tidak mendukung browser lama, tetapi banyak pelanggan besar tidak dapat mengontrol browser mana yang dipilih pengguna mereka untuk digunakan.

Pernyataan ini tidak berarti bahwa kami hanya mendukung serangkaian fitur umum terendah. Kita perlu mempertahankan kompatibilitas kode ES3. Fitur baru perlu ditambahkan dengan cara yang tidak akan merusak penguraian JavaScript ES3 dan ditambahkan sebagai fitur opsional.

Lihat GitHub untuk detail selengkapnya tentang dukungan Internet Explorer 8.

Apakah Sumber terbuka JavaScript SDK?

Ya, Application Insights JavaScript SDK sumber terbuka. Untuk melihat kode sumber atau berkontribusi dalam proyek, lihat repositori GitHub resmi.

Dukungan

  • Jika Anda tidak dapat menjalankan aplikasi atau tidak mendapatkan data seperti yang diharapkan, lihat artikel pemecahan masalah khusus.
  • Untuk pertanyaan umum tentang JavaScript SDK, lihat FAQ.
  • Untuk masalah dukungan Azure, buka tiket dukungan Azure.
  • Untuk daftar masalah terbuka yang terkait dengan Application Insights JavaScript SDK, lihat Halaman Masalah GitHub.
  • Gunakan ekstensi Penampil Telemetri untuk mencantumkan peristiwa individual dalam payload jaringan dan memantau panggilan internal dalam Application Insights.

Langkah berikutnya