Включение мониторинга реального пользователя Azure Monitor Application Insights

  • Статья

Приложение Microsoft Azure Monitor Аналитика пакет SDK JavaScript собирает данные об использовании, что позволяет отслеживать и анализировать производительность веб-приложений JavaScript. Обычно это называется реальным мониторингом пользователей или RUM.

Пакет SDK javaScript для приложений Аналитика содержит базовый пакет SDK и несколько подключаемых модулей для получения дополнительных возможностей.

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

По умолчанию мы собираем представления страниц. Но если вы хотите также собирать щелчки по умолчанию, рассмотрите возможность добавления подключаемого модуля автосбора Click Analytics:

  • Если вы добавляете расширение платформы, которое можно добавить после выполнения описанных ниже действий, вы можете добавить click Analytics при добавлении расширения платформы.
  • Если вы не добавляете расширение платформы, добавьте подключаемый модуль Click Analytics после выполнения действий по началу работы.

Мы предоставляем подключаемый модуль отладки и подключаемый модуль производительности для отладки и тестирования. В редких случаях можно создать собственное расширение, добавив пользовательский подключаемый модуль.

Необходимые компоненты

Начать

Выполните действия, описанные в этом разделе, чтобы инструментировать приложение с помощью пакета SDK для JavaScript для приложения Аналитика.

Совет

Отличная новость! Мы упрощаем включение JavaScript. Узнайте, где доступно внедрение скрипта загрузчика пакета SDK JavaScript (Web) по конфигурации!

Добавление кода JavaScript

Два метода доступны для добавления кода для включения Аналитика приложения с помощью пакета SDK javaScript для приложений Аналитика:

Способ Когда бы я использовал этот метод?
Скрипт загрузчика пакета SDK для JavaScript (Web) Для большинства клиентов рекомендуется скрипт загрузчика пакета SDK JavaScript (Web), так как вам никогда не нужно обновлять пакет SDK и автоматически получать последние обновления. Кроме того, вы можете контролировать, к каким страницам добавляется пакет SDK для JavaScript для приложений Аналитика.
Пакет npm Вы хотите перенести пакет SDK в код и включить IntelliSense. Этот параметр необходим только для разработчиков, которым требуется больше пользовательских событий и конфигурации. Этот метод необходим, если планируется использовать расширение React, React Native или Angular Framework.

  1. Вставьте скрипт загрузчика пакета SDK JavaScript (Web) в верхней части каждой страницы, для которой требуется включить Аналитика приложения.

    Желательно добавить его в качестве первого скрипта в <head> разделе, чтобы он смог отслеживать любые потенциальные проблемы со всеми зависимостями.

    Если обнаружена Обозреватель Интернета 8, пакет SDK JavaScript версии 2.x автоматически загружается.

    <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. (Необязательно) Добавьте или обновите необязательную конфигурацию скрипта загрузчика пакета SDK JavaScript (Web) в зависимости от необходимости оптимизировать загрузку веб-страницы или устранить ошибки загрузки.

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

Настройка скрипта загрузчика пакета SDK для JavaScript (Web)

Имя. Тип Обязательный? Description
src строка Обязательное поле Полный URL-адрес для загрузки пакета SDK. Это значение используется в качестве атрибута src динамически добавляемого тега <script />. Вы можете использовать общедоступное расположение CDN или собственное размещение.
name строка Необязательно Глобальное имя инициализированного пакета SDK. Используйте этот параметр, если необходимо инициализировать два разных пакета SDK одновременно.

Значением по умолчанию является приложение Аналитика, поэтому window.appInsights ссылка на инициализированный экземпляр.

Примечание. Если вы назначите значение имени или если предыдущий экземпляр был назначен приложению глобального имени Аналитика SDK, код инициализации пакета SDK требует, чтобы он был в глобальном пространстве имен, чтобы window.appInsightsSDK=<name value> обеспечить правильный скелет скрипта загрузчика пакета SDK JavaScript (Web) и методы прокси-сервера инициализированы и обновляются.
ИД число в мс Необязательно Определяет задержку загрузки ожидания перед попыткой загрузить пакет SDK. Используйте этот параметр, если HTML-страница не загружается, так как скрипт загрузчика пакета SDK JavaScript (Web) загружается в неправильное время.

Значение по умолчанию — 0 мс после времени ожидания. Если вы используете отрицательное значение, тег скрипта немедленно добавляется <head> в область страницы и блокирует событие загрузки страницы до тех пор, пока скрипт не будет загружен или завершается сбоем.
useXhr boolean Необязательно Этот параметр используется только для регистрации сбоев загрузки SDK. Например, этот параметр полезен, если скрипт загрузчика пакета SDK JavaScript (Web) запрещает загрузку HTML-страницы, что приводит к недоступности получения().

Отчеты сначала пытается использовать выборку() в случае доступности, а затем вернуться к XHR. Установите этот параметр для true обхода проверка получения. Этот параметр требуется только в том случае, если приложение используется в среде, в которой не удалось отправить события сбоя, например если скрипт загрузчика пакета SDK JavaScript (Web) не загружается успешно.
crossOrigin строка Необязательно Включив этот параметр, тег скрипта, добавленный для скачивания пакета SDK, включает атрибут crossOrigin с этим строковым значением. Используйте этот параметр, если необходимо предоставить поддержку CORS. Если он не определен (вариант по умолчанию), атрибут crossOrigin не добавляется. Рекомендуемые значения не определены (значение по умолчанию), "" или "анонимный". Все допустимые значения см. в документации по атрибутам HTML между источниками.
Oninit function(aiSdk) { ... } Необязательно Эта функция обратного вызова вызывается после успешной загрузки и инициализации основного скрипта SDK из CDN (на основе значения src). Эта функция обратного вызова полезна при вставке инициализатора телеметрии. Он передает один аргумент, который является ссылкой на экземпляр пакета SDK, который вызывается и также вызывается перед первым начальным представлением страницы. Если пакет SDK уже загружен и инициализирован, этот обратный вызов по-прежнему вызывается. ПРИМЕЧАНИЕ. Во время обработки массива sdk.queue вызывается обратный вызов. Вы не можете добавить в очередь больше элементов, так как они игнорируются и удаляются. (Добавлено в составе скрипта загрузчика пакета SDK JavaScript (Web) версии 5-sv:"5" в скрипте.
Cr boolean Необязательно Если пакет SDK не удается загрузить, а значение конечной точки, определенное для src этого общедоступного расположения CDN, этот параметр конфигурации пытается немедленно загрузить пакет SDK из одной из следующих конечных точек 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
ПРИМЕЧАНИЕ. az416426.vo.msecnd.net частично поддерживается, поэтому не рекомендуется.

Если пакет SDK успешно загружается из конечной точки CDN резервной копии, он загружается из первой доступной, которая определяется, когда сервер выполняет успешную загрузку проверка. Если пакет SDK не удается загрузить из любой из конечных точек CDN резервной копии, появится сообщение об ошибке пакета SDK.

Если значение по умолчанию не определено, значение trueпо умолчанию . Если вы не хотите загрузить пакет SDK из конечных точек CDN резервного копирования, задайте для этого параметра конфигурации значение false.

Если вы загружаете пакет SDK из собственной частной конечной точки CDN, этот параметр конфигурации не применяется.

Вставьте строка подключения в среду

Чтобы вставить строка подключения в среду, выполните следующие действия.

  1. Перейдите в область обзора ресурса Аналитика приложения.

  2. Найдите строку Подключение ion.

  3. Щелкните значок копирования в буфер обмена, чтобы скопировать строка подключения в буфер обмена.

    Screenshot that shows Application Insights overview and connection string.

  4. Замените заполнитель "YOUR_CONNECTION_STRING" в коде JavaScript строка подключения скопированным в буфер обмена.

    Формат connectionString должен соответствовать "InstrumentationKey=xxxx;....". Если указанная строка не соответствует этому формату, процесс загрузки пакета SDK завершается сбоем.

    Строка подключения не считается маркером безопасности или ключом. Дополнительные сведения см. в статье о том, требуются ли новые регионы Azure для использования строка подключения?.

(Необязательно) Добавление конфигурации пакета SDK

Необязательная конфигурация пакета SDK передается приложению Аналитика пакета SDK JavaScript во время инициализации.

Чтобы добавить конфигурацию пакета SDK, добавьте каждый параметр конфигурации непосредственно в connectionString. Например:

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

(Необязательно) Добавление расширенной конфигурации пакета SDK

Если вы хотите использовать дополнительные функции, предоставляемые подключаемыми модулями для конкретных платформ, и при необходимости включите подключаемый модуль Click Analytics, см. следующие сведения:

Подтверждение передачи данных

  1. Перейдите к ресурсу приложения Аналитика, для который вы включили пакет SDK.

  2. В меню ресурсов приложения Аналитика слева в разделе "Исследование" выберите область поиска транзакций.

  3. Откройте раскрывающееся меню "Типы событий" и выберите "Выбрать все", чтобы очистить проверка boxes в меню.

  4. В раскрывающемся меню типов событий выберите:

    • Представление страниц для приложения Azure Monitor Аналитика реального пользователя
    • Настраиваемое событие для подключаемого модуля автоматической коллекции Click Analytics.

    Отображение данных на портале может занять несколько минут. Если отображаются только данные, которые отображаются, это исключение сбоя загрузки загрузки, см. статью "Устранение неполадок с загрузкой пакета SDK для веб-приложений JavaScript".

    В некоторых случаях, если на одной странице запущено несколько экземпляров разных версий приложений Аналитика, ошибки могут возникать во время инициализации. В этих случаях и появившемся сообщении об ошибке см. раздел "Выполнение нескольких версий пакета SDK для JavaScript для приложений Аналитика в одном сеансе". Если вы столкнулись с одной из этих ошибок, попробуйте изменить пространство имен с помощью name параметра. Дополнительные сведения см. в статье о конфигурации скрипта загрузчика пакета 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. Если вы хотите запросить данные для подтверждения потока данных:

    1. Выберите журналы в левой области.

      При выборе журналов откроется диалоговое окно "Запросы", содержащее примеры запросов, относящихся к данным.

    2. Выберите "Выполнить" для примера запроса, который требуется запустить .

    3. При необходимости можно обновить пример запроса или написать новый запрос с помощью язык запросов Kusto (KQL).

      Основные операторы KQL см. в статье Learn common KQL operators.

Часто задаваемые вопросы

В этом разделы приводятся ответы на часто задаваемые вопросы.

Что такое количество пользователей и сеансов?

  • Пакет SDK для JavaScript создает файл cookie пользователя в веб-клиенте для определения возвращающихся пользователей и файл cookie сеанса для группировки действий.
  • Если на сервере нет клиентского скрипта, вы можете задать файлы cookie на сервере.
  • Если один реальный пользователь использует свой сайт в разных браузерах или использует в частном/инкогнито просмотр или разные компьютеры, они считаются более одного раза.
  • Чтобы определить пользователя, выполнившего вход на компьютерах и браузерах, добавьте вызов setAuthenticatedUserContext().

Что такое производительность и издержки пакета SDK для JavaScript?

Пакет SDK javaScript для приложения Аналитика имеет минимальные затраты на веб-сайт. Всего в 36 КБ gzipped и занимает около 15 мс для инициализации, пакет SDK добавляет незначительное время загрузки на веб-сайт. Минимальные компоненты библиотеки быстро загружаются при использовании пакета SDK, а полный скрипт загружается в фоновом режиме.

Кроме того, при скачивании скрипта из CDN все отслеживание страницы помещается в очередь, поэтому данные телеметрии не теряются во время всего жизненного цикла страницы. Такой процесс установки обеспечивает полноценный анализ страницы, невидимый для пользователей.

Какие браузеры поддерживаются пакетом SDK для JavaScript?

Chrome Firefox IE Opera Safari
Chrome (последняя версия) ✔ Firefox (последняя версия) ✔ v3.x: IE 9+ и Microsoft Edge ✔
v2.x: IE 8+ Совместим и Microsoft Edge ✔		 Opera (последняя версия) ✔ Safari (последняя версия) ✔

Где можно найти примеры кода для пакета SDK для JavaScript?

Готовые к запуску примеры см. в разделе Примеры пакетов SDK JavaScript для Application Insights.

Что такое совместимость ES3/Internet Обозреватель 8 с пакетом SDK для JavaScript?

Мы должны принять необходимые меры, чтобы убедиться, что этот пакет SDK продолжает работать и не прерывает выполнение JavaScript при загрузке более старым браузером. Хотя идеальным решением был бы отказ от поддержки браузеров более ранних поколений, множество крупных клиентов не могут управлять выбором браузера своих пользователей.

Это не означает, что мы поддерживаем только самый низкий общий набор функций. Нам придется поддерживать совместимость кода с ES3. Новые функции необходимо добавить таким образом, чтобы не прерывать синтаксический анализ JavaScript ES3 и добавлять их в качестве необязательной функции.

Подробные сведения о поддержке Internet Explorer 8 см. в GitHub.

Открыт ли пакет SDK для JavaScript?

Да, пакет SDK javaScript для приложения Аналитика открытый код. Чтобы просмотреть исходный код или принять участие в проекте, см. официальный репозиторий GitHub.

Поддержка

  • Если вы не можете запустить приложение или вы не получаете данные, как ожидалось, см. статью об устранении неполадок в выделенной статье.
  • Часто задаваемые вопросы о пакете SDK для JavaScript см. в разделе часто задаваемых вопросов.
  • Чтобы получить сведения о проблемах поддержки Azure, сделайте запрос в службу поддержки Azure.
  • Список открытых проблем, связанных с пакетом SDK javaScript для приложений Аналитика, см. на странице проблем GitHub.
  • Используйте расширение средства просмотра телеметрии, чтобы вывести список отдельных событий в полезных данных сети и отслеживать внутренние вызовы в приложении Аналитика.

Следующие шаги