Внедрение Мониторинга реального пользователя JavaScript

Применение АппОптима / Мониторинг реального пользователя / Установка и конфигурация / Веб приложения / Начальная конфигурация / Внедрение Мониторинга реального пользователя JavaScript

АппОптима Real User Monitoring (RUM) собирает метрики из веб-браузеров ваших клиентов и сопоставляет данные браузера с информацией на стороне сервера, полученной от ЕдиныйАгент. Данные веб-браузера собираются RUM JavaScript, который помещается в HTML веб-страниц ваших веб-приложений. Мы называем это размещение RUM JavaScript «инъекцией».

Как работает внедрение RUM JavaScript?

Вы можете инициировать инъекцию одним из двух способов:

Внедрение JavaScript в ЕдиныйАгент RUM выполняется автоматически для технологий, перечисленных в разделе Технологическая поддержка — Мониторинг реальных пользователей — Веб-серверы и приложения . Все, что вам нужно сделать, чтобы начать внедрение, — это перезапустить процессы вашего веб-сервера после установки ЕдиныйАгент. ЕдиныйАгент идентифицирует ответы HTML-содержимого и автоматически внедряет RUM JavaScript в раздел заголовка каждой страницы.
В качестве альтернативы вы можете вставить RUM JavaScript в HTML-код вашего веб-приложения вручную, не устанавливая ЕдиныйАгент. Мы предоставляем вам RUM JavaScript в процессе установки. Вы можете вставить тег на страницы, которые вы собираетесь отслеживать.

Для управления закачкой можно использовать альтернативные форматы закачки .

В зависимости от того, как вы включаете RUM, данные мониторинга отправляются в АппОптима в различных типах запросов:

Если у вас установлен ЕдиныйАгент: RUM JavaScript отправляет данные обратно на ваш веб-сервер или сервер приложений. ЕдиныйАгент выполняет некоторый первоначальный мониторинг данных, а затем перенаправляет их в кластер АппОптима. Данные передаются с помощью запросов XHR POST. По умолчанию конечная точка маяка относится к текущему домену. Также возможно отправлять данные через АктивныйШлюз.
Если у вас не установлен ЕдиныйАгент: данные отправляются непосредственно в АппОптима, минуя вашу инфраструктуру.

Куда внедряется RUM JavaScript?

АппОптима RUM JavaScript работает только с действительным HTML. Грязный код страницы часто является причиной сбоя потока данных мониторинга. Поэтому обратите особое внимание на основные передовые методы работы с HTML, например, убедитесь, что в вашем коде нет незакрытых или отсутствующих тегов.

Наш RUM JavaScript внедряется только в HTML. Мы не изменяем изображения, CSS, службы REST или XML-файлы. ЕдиныйАгент всегда пытается внедрить свой RUM JavaScript в качестве первого скрипта на странице. Это помогает сохранить ваше веб-приложение в целости, но также гарантирует более надежные результаты мониторинга (например, время). Если вы вставляете RUM JavaScript вручную, убедитесь, что это первый исполняемый скрипт на каждой странице.

Следующие правила определяют критерии определения подходящего места в HTML-документе для внедрения RUM JavaScript.

Правила инъекции

Имена правил отображаются в журнале ЕдиныйАгент в следующем формате: (NAME rule). Пример: (</head> tag rule).

Имя Условие Действие Отменяет

<!ДОКТИП> Тег <!DOCTYPE>не тот <!DOCTYPE html>. Прервать и не вводить. Примечание: разрешено только одно деклерирование Doctype.

начальный тег

Перед <html>этим появляется тег, не являющийся одним из следующих:

<!DOCTYPE ...>
<html>
<link>
<meta>
<script>
<style>

Прервать без инъекции.

<?xml?>

встречается <?xml ...?>спецификация.

Игнорируйте и продолжайте сканировать документ.

не-тег <meta>

не-тег <head>

начальный тег

тег <html>

Тег <html>встречается.

Если потенциальная точка инъекции обнаружена раньше, введите туда и не сканируйте дальше. При наличии нескольких потенциальных точек впрыска используется самая ранняя из них.

В противном случае продолжайте сканировать документ

Тег <script src>

Тег <script src="...">находится внутри <head>.

Если потенциальная точка инъекции обнаружена раньше, введите туда и не сканируйте дальше. При наличии нескольких потенциальных точек впрыска используется самая ранняя из них.

В противном случае введите перед этим <script>тегом и не сканируйте дальше.

не-тег <meta>

Тег <base>/<meta>

Тег <title>/<noscript> Обнаружен тег <title>или .<noscript> Игнорируйте все до тега </title>или </noscript>, затем продолжайте сканировать документ. Тег <тело>

Тег <base>/<meta>

Встречается либо тег , <base>либо .<meta>

Отбросьте любую условную точку впрыска, найденную ранее. Продолжайте сканировать документ.

любая условная точка впрыска, найденная ранее:

не-тег <meta>

незакрытый <мета>

не-тег <head>

не-тег <meta>

Внутри находится тег, <head>который не является ни , <meta>ни <title>.

Вводить перед ним (условный впрыск).

Продолжайте сканировать документ на случай, если этот вариант инъекции будет отменен.

незакрытый <мета>

Тег </head>появляется после <meta>тега, который не закрыт ни закрывающим </meta>тегом, ни тегом в стиле XML <meta ... />.

Добавить </meta>с последующим впрыском, как перед </head>(условным впрыском).

Продолжайте сканировать документ на случай, если этот вариант инъекции будет отменен.

комментарий

Тег <!- comment ->встречается.

Игнорируйте и продолжайте сканировать документ.

не-тег <meta>

не-тег <head>

Тег найден после , <html>но до <head>него нет ни , <head>ни <body>.

Вводить перед ним (условный впрыск).

Продолжайте сканировать документ на случай, если этот вариант инъекции будет отменен.

тег </head>

Обнаружен </head>тег.

Если потенциальная точка инъекции обнаружена раньше, введите туда и не сканируйте дальше. При наличии нескольких потенциальных точек инъекции используется самая ранняя.

В противном случае продолжите сканирование документа.

румянец

только Java

Flush вызывается для внедряющего потока/записи за пределами <head></head>раздела, и условное внедрение ожидает подтверждения.

Отбросьте условную точку вставки, распространите сброс и продолжайте сканирование документа в поисках новой точки вставки.

любая условная точка впрыска, найденная ранее:

не-тег <head>

залить в <head>

только Java

Flush вызывается для инъекционного потока/записи внутри <head></head>, и условное внедрение ожидает подтверждения.

Сохраняйте точку инъекции и продолжайте сканировать документ.

Не обращайте внимания на флеш.

Тег <тело>

Тег <body>встречается.

Сканирование документа останавливается. Используется любая найденная ранее потенциальная точка инжекции. При наличии нескольких потенциальных точек инъекции используется самая ранняя из них.

Если ранее не было найдено ни одного правила, введите его после файла <body>.

конец файла

Достигнут конец файла, а сканирование до этого не прекращалось.

Не делайте инъекцию.

любая условная точка впрыска, найденная ранее:

не-тег <meta>

незакрытый <мета>

не-<head тег |- |ошибка синтаксического анализа |Содержимое документа не демонстрирует базовую структуру, ожидаемую от тегов и атрибутов HTML. |Сканирование документа останавливается.

Если потенциальная точка инъекции обнаружена раньше, введите туда и не сканируйте дальше. При наличии нескольких потенциальных точек впрыска используется самая ранняя из них.

Если ни одно правило не обеспечивает более раннюю точку внедрения, не выполняйте внедрение. | |} Если ЕдиныйАгент не вставляет RUM JavaScript автоматически на страницы вашего приложения из-за ошибок проверки HTML, сначала проверьте возможные ошибки, выполнив приведенные выше инструкции. В качестве альтернативы можно определить пользовательские правила внедрения, чтобы контролировать, когда и где происходит автоматическое внедрение на страницах вашего приложения. Вы также можете отключить внедрение RUM JavaScript для определенных ресурсов.

Чтобы создать пользовательское правило инъекции

# В меню АппОптима выберите Web . # Выберите приложение, которое вы хотите настроить. # В правом верхнем углу страницы обзора приложения выберите Дополнительно ( … ) > Изменить .

В настройках приложения перейдите в Injection .

В разделе «Определить настраиваемые правила внедрения » выберите « Добавить настраиваемое правило » .
Определите оператора и, при необходимости, соответствующий шаблон URL -адреса, чтобы контролировать, к каким страницам применяется ваше пользовательское правило внедрения.
Определите правило, используя Перед конкретным HTML или После определенного HTML и введите соответствующий шаблон HTML. Чтобы отключить внедрение RUM JavaScript для определенных ресурсов, выберите Не вводить .
Выберите Добавить , чтобы создать пользовательское правило внедрения.

Как контролировать впрыск?

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

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

Форматы инъекций

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

Автоматический впрыск
Ручная вставка
Получить через REST API

Автоматический впрыск

Автоматическая инъекция поддерживает все форматы инъекций и обеспечивает бесшовные автоматические обновления, выполняемые ЕдиныйАгент.

Формат инъекции	Описание	Кэширование	Мониторинг обновлений кода	Обновления конфигурации	Когда использовать
Все форматы	АппОптима ЕдиныйАгент может использовать все форматы инъекций, перечисленные в разделе « Вставка вручную » , для автоматической интеграции RUM в ваше приложение. Единственным исключением является формат тега JavaScript, поскольку тег JavaScript ЕдиныйАгент по сути такой же, с той разницей, что включает конфигурацию , поскольку ЕдиныйАгент может автоматически обновлять ее.				Используйте, когда возможна автоматическая инъекция в ваше веб-приложение. Независимо от выбранного формата внедрения ЕдиныйАгент автоматически обновит вашу конфигурацию и код мониторинга .

Ручная вставка

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

Формат инъекции	Описание	Кэширование	Когда использовать
Тег JavaScript ( `jsTagComplete`)	Предоставляет вам тег JavaScript, чтобы вручную вставить его в код вашего веб-приложения. Файл JavaScript, на который указывает ссылка в теге, содержит код конфигурации и мониторинга , что снижает возможную продолжительность кэширования.		Используйте, если вы не хотите заниматься конфигурацией или отслеживать изменения кода вручную. Часто используется в сочетании с менеджером тегов для интеграции RUM.
Синхронный фрагмент кода ( `syncCS`)	Предоставляет вам фрагмент кода JavaScript (включая конфигурацию ) с базовыми функциями для ручной вставки его в код вашего веб-приложения. Полная функциональность кода мониторинга загружается синхронно	Фрагмент кода: Код мониторинга: 1 год	Используйте, когда обновления конфигурации должны немедленно отражаться на клиентах ваших реальных пользователей и когда вы не хотите вручную обновлять конфигурацию или код мониторинга. Имейте в виду, что эта опция блокирует рендеринг! 1
Фрагмент кода отложен ( `asyncCS`)	Предоставляет вам фрагмент кода JavaScript (включая конфигурацию ) с базовыми функциями для ручной вставки его в код вашего веб-приложения. Полная функциональность кода мониторинга загружается асинхронно (отложенно) .	Фрагмент кода: Код мониторинга: 1 год	Используйте, когда обновления конфигурации должны немедленно отражаться на клиентах ваших реальных пользователей, когда вы не хотите вручную обновлять конфигурацию или код мониторинга, и когда вы хотите отложить загрузку АппОптима RUM. 1
Встроенный код ( `jsInlineScript`)	Предоставляет вам полный код конфигурации и мониторинга , чтобы вручную встроить их в код вашего веб-приложения.		Используйте, если вы хотите избежать повторного запроса и свести количество веб-запросов к минимуму. В идеале используйте это в сочетании с полностью автоматическим обновлением встроенного кода через API , чтобы гарантировать, что код мониторинга и конфигурация всегда актуальны.
Тег JavaScript ЕдиныйАгент ( `jsTag`)	Предоставляет вам тег JavaScript (включая конфигурацию ), чтобы вручную вставить его в код вашего веб-приложения. Код мониторинга загружается отдельным файлом из CDN 2	1 год	Используйте тот же тег JavaScript, который автоматически вставляется АппОптима ЕдиныйАгент с включенным автоматическим внедрением. Используйте его только в целях тестирования или в сочетании с полностью автоматическими обновлениями API встроенного кода , чтобы убедиться, что код мониторинга и конфигурация всегда актуальны.

1

Имейте в виду, что это требует регулярных обновлений фрагментов кода, чтобы гарантировать совместимость (проверено в течение 1 года).

2

Для управляемого используйте собственный CDN. Для SaaS используется CDN АппОптима.

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

Обновления в ручной вставке

Настроено в АппОптима.	Код мониторинга и конфигурация обновляются в соответствии с продолжительностью кэширования, пока изменения не станут активными. Вы можете настроить продолжительность кэширования при настройке инъекции.
Настроено на ваших серверах	Мы рекомендуем вам регулярно обновлять фрагмент, чтобы новая конфигурация была доступна с самого начала. В противном случае новая конфигурация будет доступна только после первой перезагрузки страницы. Вы должны настроить кэширование в своей среде, используя конфигурацию вашего веб-сервера.

Все указанные длительности кэширования относятся к тому, как долго АппОптима CDN будет кэшировать ваш код мониторинга и/или конфигурацию. Если вы используете собственную CDN (в АппОптима Managed), указанные длительности неприменимы, поскольку они зависят от вашей собственной конфигурации.

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

Используйте API АппОптима, чтобы вставить RUM JavaScript с помощью скриптов сборки.

Использовать ручную вставку для групп процессов

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

Чтобы подавить автоматическую инъекцию и вручную вставить RUM JavaScript

В меню АппОптима выберите Web .
Выберите приложение, которое вы хотите настроить.
В правом верхнем углу страницы обзора приложения выберите Дополнительно ( … ) > Изменить .

В настройках приложения перейдите в Injection .

В разделе «Определить настраиваемые правила внедрения » выберите « Добавить настраиваемое правило » .
Определите оператора и, при необходимости, соответствующий шаблон URL -адреса, чтобы контролировать, на каких страницах вам нужно подавить автоматическую инъекцию.
В разделе Правило выберите Не вводить .
Выберите Добавить , чтобы сохранить пользовательское правило инъекции.
Перейдите на вкладку Вставка вручную , выберите нужный формат инъекции и скопируйте предоставленный фрагмент.

Если вы не уверены, работает ли Real User Monitoring для вашей среды, или если у вас возникли проблемы с настройкой, ознакомьтесь со статьей Почему я не вижу свои приложения или данные мониторинга? .

Как обеспечить своевременное обновление конфигурации для автоматической инъекции?

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

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

Когда оптимизация заголовка управления кешем включена и конфигурация RUM изменена, запросы, которые в противном случае привели бы к ответу 304 Not Modifiedс помощью 200 OK, дают ЕдиныйАгент возможность внедрить JavaScript RUM в HTML-код вашего приложения. Если конфигурация RUM не была изменена, запросы приводят к 304 Not Modifiedответу.

Измененные заголовки

ЕдиныйАгент изменяет следующие заголовки ответов и запросов:

Заголовки ответа

ETag
Last-Modified

Заголовки запроса

If-None-Match
If-Modified-Since
If-Unmodified-Since1
If-Match1

1

Не изменено для запросов диапазона, которые обычно исключаются из мониторинга RUM.

ЕдиныйАгент не изменяет заголовки Expiresи Cache-Control, которые содержат явное время истечения срока действия ресурсов. Чтобы гарантировать своевременные обновления, мы рекомендуем указывать более короткие сроки действия в этих заголовках.

Вот как ЕдиныйАгент изменяет заголовки управления кешем.

При изменении конфигурации RUM

Заголовки входящих сообщений If-None-Matchи If-Modified-Sinceзапросов удаляются.
Изменения, внесенные в заголовки If-Unmodified-Sinceи If-Match, удаляются.
Когда используются оба ETagи Last-Modifiedзаголовки:
- ETagК заголовку добавляется суффикс .
- Одна секунда вычитается из Last-Modifiedзаголовка.
Когда ETagиспользуется только заголовок:
- ETagК заголовку добавляется суффикс .
Когда Last-Modifiedиспользуется только заголовок:
- Заголовок ETagсоздан.
- Одна секунда вычитается из Last-Modifiedзаголовка.

Когда конфигурация RUM не изменена

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

Если приложение состоит из нескольких инструментированных уровней, изменения заголовков ETagи Last-Modifiedприменяются на каждом уровне.

Оптимизация заголовка кеша для ресурсов, отличных от HTML

Иногда ЕдиныйАгент изменяет заголовки элементов управления кэшем не-HTML-ресурсов. Это происходит потому, что изменение заголовка происходит до того, как становится известен точный тип содержимого. АппОптима исключает определенные ресурсы из оптимизации заголовка кэша на основе суффикса URI, но невозможно охватить все ресурсы, отличные от HTML.

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

Исправление проблем

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

Чтобы отключить оптимизацию заголовка управления кешем

В меню АппОптима выберите Web .
Выберите приложение, которое вы хотите настроить.
В правом верхнем углу страницы обзора приложения выберите Дополнительно ( … ) > Изменить .

В настройках приложения перейдите в « Захват » > « Дополнительные настройки » .

В разделе «Настройки файлов cookie и заголовков » отключите параметр «Оптимизировать значение заголовков управления кешем для использования с АппОптима Real User Monitoring» .

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