Bagikan melalui

Memantau situs SharePoint dengan Application Insights

  • Artikel

Application Insights memantau ketersediaan, performa, dan penggunaan aplikasi Anda. Artikel ini memperlihatkan kepada Anda cara menyiapkannya untuk situs SharePoint.

Catatan

Karena masalah keamanan, Anda tidak bisa langsung menambahkan skrip yang dijelaskan dalam artikel ini ke halaman web Anda di UX modern SharePoint. Sebagai alternatif, Anda bisa menggunakan SharePoint Framework (SPFx) untuk menyusun ekstensi kustom yang bisa Anda gunakan untuk menginstal Application Insights di situs SharePoint Anda.

Membuat sumber daya Application Insights

Di portal Microsoft Azure, buat sumber daya Application Insights baru. Untuk Jenis Aplikasi, pilih ASP.NET.

Cuplikan layar yang memperlihatkan memilih Properti, memilih kunci, dan memilih Ctrl+C.

Jendela yang terbuka adalah tempat Anda melihat data performa dan penggunaan tentang aplikasi Anda. Saat berikutnya Anda masuk ke Azure, petak peta akan muncul di layar Mulai . Atau, pilih Telusuri untuk menemukannya.

Menambahkan skrip ke halaman web Anda

Cuplikan saat ini berikut adalah versi "5". Versi dikodekan dalam cuplikan sebagai sv:"#". Versi saat ini juga tersedia di GitHub.

<!-- 
To collect user behavior analytics tools about your application, 
insert the following script into each page you want to track.
Place this code immediately before the closing </head> tag,
and before any other scripts. Your first data will appear 
automatically in just a few seconds.
-->
<script type="text/javascript">
!function(T,l,y){var S=T.location,k="script",D="instrumentationKey",C="ingestionendpoint",I="disableExceptionTracking",E="ai.device.",b="toLowerCase",w="crossOrigin",N="POST",e="appInsightsSDK",t=y.name||"appInsights";(y.name||T[e])&&(T[e]=t);var n=T[t]||function(d){var g=!1,f=!1,m={initialize:!0,queue:[],sv:"5",version:2,config:d};function v(e,t){var n={},a="Browser";return n[E+"id"]=a[b](),n[E+"type"]=a,n["ai.operation.name"]=S&&S.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(m.sv||m.version),{time:function(){var e=new Date;function t(e){var t=""+e;return 1===t.length&&(t="0"+t),t}return e.getUTCFullYear()+"-"+t(1+e.getUTCMonth())+"-"+t(e.getUTCDate())+"T"+t(e.getUTCHours())+":"+t(e.getUTCMinutes())+":"+t(e.getUTCSeconds())+"."+((e.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}}}}var h=d.url||y.src;if(h){function a(e){var t,n,a,i,r,o,s,c,u,p,l;g=!0,m.queue=[],f||(f=!0,t=h,s=function(){var e={},t=d.connectionString;if(t)for(var n=t.split(";"),a=0;a<n.length;a++){var i=n[a].split("=");2===i.length&&(e[i[0][b]()]=i[1])}if(!e[C]){var r=e.endpointsuffix,o=r?e.location:null;e[C]="https://"+(o?o+".":"")+"dc."+(r||"services.visualstudio.com")}return e}(),c=s[D]||d[D]||"",u=s[C],p=u?u+"/v2/track":d.endpointUrl,(l=[]).push((n="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",a=t,i=p,(o=(r=v(c,"Exception")).data).baseType="ExceptionData",o.baseData.exceptions=[{typeName:"SDKLoadFailed",message:n.replace(/\./g,"-"),hasFullStack:!1,stack:n+"\nSnippet failed to load ["+a+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(S&&S.pathname||"_unknown_")+"\nEndpoint: "+i,parsedStack:[]}],r)),l.push(function(e,t,n,a){var i=v(c,"Message"),r=i.data;r.baseType="MessageData";var o=r.baseData;return o.message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+n+")").replace(/\"/g,"")+'"',o.properties={endpoint:a},i}(0,0,t,p)),function(e,t){if(JSON){var n=T.fetch;if(n&&!y.useXhr)n(t,{method:N,body:JSON.stringify(e),mode:"cors"});else if(XMLHttpRequest){var a=new XMLHttpRequest;a.open(N,t),a.setRequestHeader("Content-type","application/json"),a.send(JSON.stringify(e))}}}(l,p))}function i(e,t){f||setTimeout(function(){!t&&m.core||a()},500)}var e=function(){var n=l.createElement(k);n.src=h;var e=y[w];return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=i,n.onerror=a,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||i(0,t)},n}();y.ld<0?l.getElementsByTagName("head")[0].appendChild(e):setTimeout(function(){l.getElementsByTagName(k)[0].parentNode.appendChild(e)},y.ld||0)}try{m.cookie=l.cookie}catch(p){}function t(e){for(;e.length;)!function(t){m[t]=function(){var e=arguments;g||m.queue.push(function(){m[t].apply(m,e)})}}(e.pop())}var n="track",r="TrackPage",o="TrackEvent";t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+r,"stop"+r,"start"+o,"stop"+o,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),m.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4};var s=(d.extensionConfig||{}).ApplicationInsightsAnalytics||{};if(!0!==d[I]&&!0!==s[I]){var c="onerror";t(["_"+c]);var u=T[c];T[c]=function(e,t,n,a,i){var r=u&&u(e,t,n,a,i);return!0!==r&&m["_"+c]({message:e,url:t,lineNumber:n,columnNumber:a,error:i}),r},d.autoExceptionInstrumented=!0}return m}(y.cfg);function a(){y.onInit&&y.onInit(n)}(T[t]=n).queue&&0===n.queue.length?(n.queue.push(a),n.trackPageView({})):a()}(window,document,{
src: "https://js.monitor.azure.com/scripts/b/ai.2.gbl.min.js", // The SDK URL Source
// name: "appInsights", // Global SDK Instance name defaults to "appInsights" when not supplied
// ld: 0, // Defines the load delay (in ms) before attempting to load the sdk. -1 = block page load and add to head. (default) = 0ms load after timeout,
// useXhr: 1, // Use XHR instead of fetch to report failures (if available),
crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag
// onInit: null, // Once the application insights instance has loaded and initialized this callback function will be called with 1 argument -- the sdk instance (DO NOT ADD anything to the sdk.queue -- As they won't get called)
cfg: { // Application Insights Configuration
  instrumentationKey:"INSTRUMENTATION_KEY"
}});
</script>

Catatan

URL untuk SharePoint menggunakan format "...\ai.2.gbl.min.js" modul yang berbeda (perhatikan ekstra .gbl.). Format modul alternatif ini diperlukan untuk menghindari masalah yang disebabkan oleh urutan skrip dimuat. Masalah ini menyebabkan SDK gagal menginisialisasi dan mengakibatkan hilangnya peristiwa telemetri.

Masalah ini disebabkan oleh requireJS dimuat dan diinisialisasi sebelum SDK.

Sisipkan skrip sebelum <tag /head> dari setiap halaman yang ingin Anda lacak. Jika situs web Anda memiliki halaman utama, Anda dapat meletakkan skrip di sana. Misalnya, dalam proyek MVC ASP.NET, Anda akan memasukkannya ke dalam View\Shared\_Layout.cshtml.

Skrip berisi kunci instrumentasi yang mengarahkan telemetri ke sumber daya Application Insights Anda.

Menambahkan kode ke halaman situs Anda

Anda dapat menambahkan kode ke halaman utama atau halaman individual Anda.

Main_Page

Jika Anda dapat mengedit halaman utama situs, Anda dapat menyediakan pemantauan untuk setiap halaman di situs.

Lihat halaman utama dan edit dengan menggunakan SharePoint Designer atau editor lainnya.

Cuplikan layar yang memperlihatkan cara mengedit halaman utama dengan menggunakan Sharepoint Designer atau editor lain.

Tambahkan kode sebelum tag.

Cuplikan layar yang memperlihatkan tempat untuk menambahkan kode ke halaman situs Anda.

Catatan

Pada tanggal 31 Maret 2025, dukungan untuk penyerapan kunci instrumentasi akan berakhir. Penyerapan kunci instrumentasi akan berjalan terus, namun kami tidak akan lagi menyediakan pembaruan atau dukungan terhadap fitur tersebut. Transisi ke string koneksi untuk memanfaatkan kemampuan baru.

Halaman individual

Untuk memantau set halaman terbatas, tambahkan skrip secara terpisah ke setiap halaman.

Sisipkan komponen web dan sematkan cuplikan kode di dalamnya.

Cuplikan layar yang memperlihatkan penambahan skrip untuk memantau sekumpulan halaman terbatas.

Melihat data tentang aplikasi Anda

Sebarkan ulang aplikasi Anda.

Kembali ke panel aplikasi Anda di portal Azure.

Peristiwa pertama muncul di Pencarian.

Cuplikan layar yang memperlihatkan data baru yang bisa Anda lihat di aplikasi.

Pilih Refresh setelah beberapa detik jika Anda mengharapkan lebih banyak data.

Mengambil ID pengguna

Cuplikan kode halaman web standar tidak menangkap ID pengguna dari SharePoint, tetapi Anda bisa melakukannya dengan modifikasi kecil.

  1. Salin kunci instrumentasi aplikasi Anda dari menu dropdown Essentials di Application Insights.

    Cuplikan layar yang menampilkan menyalin instrumentasi aplikasi dari menu turun Essentials di Application Insights.

  2. Ganti kunci instrumentasi untuk XXXX dalam cuplikan berikut.

  3. Sematkan skrip di aplikasi SharePoint Anda alih-alih cuplikan yang Anda dapatkan dari portal.

    

<SharePoint:ScriptLink ID="ScriptLink1" name="SP.js" runat="server" localizable="false" loadafterui="true" /> 
<SharePoint:ScriptLink ID="ScriptLink2" name="SP.UserProfiles.js" runat="server" localizable="false" loadafterui="true" /> 

<script type="text/javascript"> 
var personProperties; 

// Ensure that the SP.UserProfiles.js file is loaded before the custom code runs. 
SP.SOD.executeOrDelayUntilScriptLoaded(getUserProperties, 'SP.UserProfiles.js'); 

function getUserProperties() { 
    // Get the current client context and PeopleManager instance. 
    var clientContext = new SP.ClientContext.get_current(); 
    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext); 

    // Get user properties for the target user. 
    // To get the PersonProperties object for the current user, use the 
    // getMyProperties method. 

    personProperties = peopleManager.getMyProperties(); 

    // Load the PersonProperties object and send the request. 
    clientContext.load(personProperties); 
    clientContext.executeQueryAsync(onRequestSuccess, onRequestFail); 
} 

// This function runs if the executeQueryAsync call succeeds. 
function onRequestSuccess() { 
var appInsights=window.appInsights||function(config){
function s(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},r=document,f=window,e="script",o=r.createElement(e),i,u;for(o.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",r.getElementsByTagName(e)[0].parentNode.appendChild(o),t.cookie=r.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)s("track"+i.pop());return config.disableExceptionTracking||(i="onerror",s("_"+i),u=f[i],f[i]=function(config,r,f,e,o){var s=u&&u(config,r,f,e,o);return s!==!0&&t["_"+i](config,r,f,e,o),s}),t
    }({
        instrumentationKey:"XXXX"
    });
    window.appInsights=appInsights;
    appInsights.trackPageView(document.title,window.location.href, {User: personProperties.get_displayName()});
} 

// This function runs if the executeQueryAsync call fails. 
function onRequestFail(sender, args) { 
} 
</script>

Langkah berikutnya