Перейти к содержанию

Выбор формата фрагмента кода

RUM JavaScript — будь то автоматически внедрённый или вставленный вручную в ваше веб-приложение — состоит из двух ключевых компонентов:

  • Код мониторинга: JavaScript-код, предоставляющий возможности RUM, такие как захват действий пользователя.
  • Конфигурация: Конфигурация приложения, изначально используемая кодом мониторинга. Она обновляется позднее через ответ RUM-маяка при изменении конфигурации.

Dynatrace RUM предоставляет несколько форматов фрагментов кода, которые интегрируют эти компоненты в ваши страницы различными способами, каждый из которых адаптирован для конкретных требований.

На этой странице приведены рекомендации для выбора формата, наиболее подходящего для ваших требований, а также подробное описание каждого формата.

Рекомендации по выбору формата фрагмента кода

Для большинства сценариев использования мы рекомендуем следующее:

Если вы хотите воспользоваться функцией браузера «целостность подресурсов» (SRI) для обеспечения неизменности кода мониторинга, используйте OneAgent JavaScript tag with SRI для вставки вручную и автоматического внедрения.

Чтобы избежать блокирующего выполнения кода мониторинга при разборе страницы, настройте параметр script execution выбранного формата фрагмента на async или defer. Инструкции по настройке этого параметра приведены в документации для каждого отдельного формата ниже. Имейте в виду, что пока код мониторинга ещё не загружен и не инициализирован, некоторые тайминги и действия пользователя будут потеряны.

Доступные форматы фрагментов кода

JavaScript tag

OneAgent JavaScript tag

OneAgent JavaScript tag with SRI

Встроенный код

Фрагмент кода

JavaScript tag ссылается на внешний файл, содержащий как код мониторинга, так и конфигурацию. JavaScript tag доступен только для вставки вручную.

Получить JavaScript tag через API

Обновления

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

Источник кода мониторинга

Внешний файл загружается из Dynatrace CDN.

Продолжительность кэширования

Внешний файл, содержащий код мониторинга и конфигурацию, обновляется в соответствии с продолжительностью кэширования, которая по умолчанию составляет один час и может быть настроена. Доступные значения — небольшие: несколько часов или дней — для обеспечения регулярного обновления конфигурации. Продолжительность кэширования определяет, как долго браузеры могут кэшировать файл. Dynatrace CDN кэширует его в течение одного часа.

Настройка продолжительности кэширования

  1. Перейдите в раздел Web.
  2. Выберите приложение, которое нужно настроить.
  3. В правом верхнем углу страницы обзора приложения выберите More (…) > Edit.
  4. В настройках приложения выберите Injection > Manual insertion.
  5. В разделе JavaScript tag используйте раскрывающийся список Cache monitoring code and configuration for, чтобы выбрать нужную продолжительность кэширования.
Выполнение скрипта

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

  • С атрибутом async код мониторинга загружается параллельно с разбором страницы и выполняется сразу после его готовности.
  • С атрибутом defer код мониторинга также загружается параллельно, но его выполнение откладывается до завершения разбора страницы.

С обоими атрибутами некоторые тайминги и действия пользователя будут потеряны, пока код мониторинга не загружен и не инициализирован полностью.

Настройка выполнения скрипта

  1. Перейдите в раздел Web.
  2. Выберите приложение, которое нужно настроить.
  3. В правом верхнем углу страницы обзора приложения выберите More (…) > Edit.
  4. В настройках приложения выберите Injection > Manual insertion.
  5. В разделе JavaScript tag установите Script execution attribute на async, defer или No attribute.
  6. Скопируйте фрагмент и вставьте его на свою страницу.

При получении JavaScript tag через API вы можете управлять выполнением скрипта, передав параметр. Подробнее см. в разделе GET JavaScript tag.

Добавление атрибута crossorigin="anonymous"

🟢 Включено по умолчанию

Внешний скрипт, на который ссылается JavaScript tag, загружается из Dynatrace CDN, что приводит к кросс-доменному запросу. Чтобы включить сбор подробных сообщений об ошибках JavaScript и тайминги ресурсов W3C, необходимо включить атрибут crossorigin="anonymous" в тег скрипта.

Включение добавления атрибута crossorigin="anonymous"

  1. Перейдите в раздел Web.
  2. Выберите приложение, которое нужно настроить.
  3. В правом верхнем углу страницы обзора приложения выберите More (…) > Edit.
  4. В настройках приложения выберите Injection > Manual insertion.
  5. В разделе JavaScript tag включите Add the crossorigin=anonymous attribute.
  6. Скопируйте фрагмент и вставьте его на свою страницу.

При получении JavaScript tag через API вы можете управлять добавлением атрибута crossorigin="anonymous", передав параметр. Подробнее см. в разделе GET JavaScript tag.

OneAgent JavaScript tag включает конфигурацию и ссылку на внешний файл, содержащий код мониторинга. Доступен как для вставки вручную, так и для автоматического внедрения.

Получить OneAgent JavaScript tag через API

Обновления

При вставке OneAgent JavaScript tag вручную его также необходимо обновлять вручную при каждом изменении конфигурации. Для поддержания актуальности рекомендуется использовать его совместно с полностью автоматизированными обновлениями через API. Использование OneAgent JavaScript tag из веб-интерфейса не рекомендуется, если своевременное обновление конфигурации не является критичным.

В случае автоматического внедрения OneAgent всегда внедряет OneAgent JavaScript tag с текущей конфигурацией. Однако обратите внимание, что политика кэширования вашего приложения может влиять на частоту внедрения. Подробнее см. в разделе Cache control header optimizations.

Источник кода мониторинга

В случае безагентного мониторинга код мониторинга доставляется из Dynatrace CDN. В случае автоматического внедрения или вставки вручную для страниц приложения с автоматическим внедрением файл по умолчанию доставляется OneAgent, инструментирующим ваше приложение. Также возможна загрузка из Dynatrace CDN, см. Request the monitoring code from the Dynatrace CDN.

Продолжительность кэширования

Браузеры и Dynatrace CDN могут кэшировать код мониторинга до одного года. Такой расширенный период кэширования стал возможным благодаря встраиванию версии RUM JavaScript и хэша активных модулей в URL файла.

Выполнение скрипта

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

  • С атрибутом async код мониторинга загружается параллельно с разбором страницы и выполняется сразу после его готовности.
  • С атрибутом defer код мониторинга также загружается параллельно, но его выполнение откладывается до завершения разбора страницы.

С обоими атрибутами некоторые тайминги и действия пользователя будут потеряны, пока код мониторинга не загружен и не инициализирован полностью.

Настройка выполнения скрипта для автоматического внедрения

  1. Перейдите в раздел Web.
  2. Выберите приложение, которое нужно настроить.
  3. В правом верхнем углу страницы обзора приложения выберите More (…) > Edit.
  4. В настройках приложения выберите Injection > Automatic injection.
  5. Если Snippet format установлен на OneAgent JavaScript tag, станет доступен параметр Script execution attribute. Выберите async, defer или No attribute из раскрывающегося списка.
  6. Нажмите Save changes.

Настройка выполнения скрипта для вставки вручную

  1. Перейдите в раздел Web.
  2. Выберите приложение, которое нужно настроить.
  3. В правом верхнем углу страницы обзора приложения выберите More (…) > Edit.
  4. В настройках приложения выберите Injection > Manual insertion.
  5. В разделе OneAgent JavaScript tag установите Script execution attribute на async, defer или No attribute.
  6. Скопируйте фрагмент и вставьте его на свою страницу.

При получении OneAgent JavaScript tag через API вы можете управлять выполнением скрипта, передав параметр. Подробнее см. в разделе GET OneAgent JavaScript tag.

OneAgent JavaScript tag with SRI позволяет воспользоваться функцией браузера «целостность подресурсов» (SRI) для обеспечения неизменности кода мониторинга, см. Use Subresource Integrity (SRI) for Real User Monitoring code browser feature to ensure the integrity of Real User Monitoring code."). Включает конфигурацию, ссылку на внешний файл с кодом мониторинга и хэш целостности для этого кода. Поддерживается как для автоматического внедрения, так и для вставки вручную.

Получить OneAgent JavaScript tag with SRI через API

Обновления

При вставке OneAgent JavaScript tag with SRI вручную его также необходимо обновлять вручную при каждом изменении конфигурации. Для поддержания актуальности рекомендуется использовать его совместно с полностью автоматизированными обновлениями через API. Использование OneAgent JavaScript tag with SRI из веб-интерфейса не рекомендуется, если своевременное обновление конфигурации не является критичным.

В случае автоматического внедрения OneAgent всегда внедряет OneAgent JavaScript tag with SRI с текущей конфигурацией. Однако обратите внимание, что политика кэширования вашего приложения может влиять на частоту внедрения. Подробнее см. в разделе Cache control header optimizations.

Источник кода мониторинга

Код мониторинга всегда доставляется из Dynatrace CDN.

Продолжительность кэширования

Браузеры и Dynatrace CDN могут кэшировать код мониторинга до одного года. Такой расширенный период кэширования стал возможным благодаря встраиванию версии RUM JavaScript и хэша активных модулей в URL файла.

Выполнение скрипта

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

  • С атрибутом async код мониторинга загружается параллельно с разбором страницы и выполняется сразу после его готовности.
  • С атрибутом defer код мониторинга также загружается параллельно, но его выполнение откладывается до завершения разбора страницы.

С обоими атрибутами некоторые тайминги и действия пользователя будут потеряны, пока код мониторинга не загружен и не инициализирован полностью.

Настройка выполнения скрипта для автоматического внедрения

  1. Перейдите в раздел Web.
  2. Выберите приложение, которое нужно настроить.
  3. В правом верхнем углу страницы обзора приложения выберите More (…) > Edit.
  4. В настройках приложения выберите Injection > Automatic injection.
  5. Если Snippet format установлен на OneAgent JavaScript tag with SRI, станет доступен параметр Script execution attribute. Выберите async, defer или No attribute из раскрывающегося списка.
  6. Нажмите Save changes.

Настройка выполнения скрипта для вставки вручную

  1. Перейдите в раздел Web.
  2. Выберите приложение, которое нужно настроить.
  3. В правом верхнем углу страницы обзора приложения выберите More (…) > Edit.
  4. В настройках приложения выберите Injection > Manual insertion.
  5. В разделе OneAgent JavaScript tag with SRI установите Script execution attribute на async, defer или No attribute.
  6. Скопируйте фрагмент и вставьте его на свою страницу.

При получении OneAgent JavaScript tag with SRI через API вы можете управлять выполнением скрипта, передав параметр. Подробнее см. в разделе GET OneAgent JavaScript tag with SRI.

Встроенный код содержит как конфигурацию, так и RUM-код мониторинга, сводя количество веб-запросов к минимуму. Обратите внимание, что код мониторинга Session Replay не встраивается, поэтому при использовании Session Replay будет выполняться дополнительный запрос. Если ваш сайт состоит из множества отдельных страниц, использование встроенного кода может быть нецелесообразным, так как он увеличивает размер каждого документа. Однако это может быть подходящим выбором для одностраничных приложений (SPA).

Получить встроенный код через API

Обновления

При вставке встроенного кода вручную его также необходимо обновлять вручную при каждом изменении конфигурации. Для поддержания актуальности рекомендуется использовать его совместно с полностью автоматизированными обновлениями через API. Использование встроенного кода из веб-интерфейса не рекомендуется, если своевременное обновление конфигурации не является критичным.

В случае автоматического внедрения OneAgent всегда внедряет встроенный код с текущей конфигурацией. Однако обратите внимание, что политика кэширования вашего приложения может влиять на частоту внедрения. Подробнее см. в разделе Cache control header optimizations.

Источник кода мониторинга

В случае безагентного мониторинга код мониторинга Session Replay доставляется из Dynatrace CDN. В случае автоматического внедрения или вставки вручную для страниц приложения с автоматическим внедрением код мониторинга Session Replay по умолчанию доставляется OneAgent, инструментирующим ваше приложение. Также возможна загрузка из Dynatrace CDN, см. Request the monitoring code from the Dynatrace CDN.

Продолжительность кэширования

Поскольку RUM-код мониторинга встроен, его продолжительность кэширования совпадает с продолжительностью кэширования вашей страницы, которая определяется настройками кэша на вашем веб-сервере. Код мониторинга Session Replay может кэшироваться до одного года как браузерами, так и Dynatrace CDN. Такой расширенный период кэширования стал возможным благодаря встраиванию версии RUM JavaScript в URL файла.

Выполнение скрипта

Код мониторинга загружается и выполняется браузером синхронно.

Фрагмент кода содержит конфигурацию и базовую функциональность кода мониторинга. Доступен как для вставки вручную, так и для автоматического внедрения.

  • В случае вставки вручную он внедряет в страницу ещё один элемент скрипта, ссылающийся на внешний файл, содержащий полную функциональность кода мониторинга.
  • В случае автоматического внедрения этот второй элемент скрипта внедряется OneAgent при внедрении фрагмента кода.

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

Получить фрагмент кода через API

Получить фрагмент кода в отложенном режиме через API

Обновления

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

В случае автоматического внедрения OneAgent всегда внедряет фрагмент кода с текущей конфигурацией. Однако обратите внимание, что политика кэширования вашего приложения может влиять на частоту внедрения. Подробнее см. в разделе Cache control header optimizations.

Источник кода мониторинга

В случае безагентного мониторинга внешний файл с полной функциональностью кода мониторинга доставляется из Dynatrace CDN. В случае автоматического внедрения или вставки вручную для страниц приложения с автоматическим внедрением он по умолчанию доставляется OneAgent, инструментирующим ваше приложение. Также возможна загрузка из Dynatrace CDN, см. Request the monitoring code from the Dynatrace CDN.

Продолжительность кэширования

Кэширование фрагмента кода соответствует кэшированию страницы, которое определяется конфигурацией вашего веб-сервера. Внешний файл может кэшироваться до одного года как браузерами, так и Dynatrace CDN. Такой расширенный период кэширования стал возможным благодаря встраиванию версии RUM JavaScript и хэша активных модулей в URL файла.

Выполнение скрипта

Внешний файл с полной функциональностью кода мониторинга можно настроить для загрузки синхронно или асинхронно с использованием атрибута defer. При асинхронной загрузке скрипт загружается параллельно с разбором HTML и выполняется только после полного разбора всего документа. Пока код мониторинга не загружен полностью, некоторые тайминги и действия пользователя будут потеряны.

Настройка выполнения скрипта для вставки вручную

  1. Перейдите в раздел Web.
  2. Выберите приложение, которое нужно настроить.
  3. В правом верхнем углу страницы обзора приложения выберите More (…) > Edit.
  4. В настройках приложения выберите Injection > Manual insertion.
  5. В разделе Code snippet используйте раскрывающийся список Load the monitoring code, чтобы выбрать synchronously или deferred.
  6. Скопируйте фрагмент и вставьте его на свою страницу.

Настройка выполнения скрипта для автоматического внедрения

  1. Перейдите в раздел Web.
  2. Выберите приложение, которое нужно настроить.
  3. В правом верхнем углу страницы обзора приложения выберите More (…) > Edit.
  4. В настройках приложения выберите Injection > Automatic injection.
  5. В разделе Snippet format выберите Code snippet.
  6. В разделе Load the monitoring code выберите synchronously или deferred.
  7. Нажмите Save changes.