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

Однако есть один сценарий использования, с которым традиционные инструменты воспроизведения сессий по-настоящему справиться не могут: поддержка сессий в реальном времени.

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

В обычном сценарии, когда вы настраиваете приложение на запись сессии пользователя, вы получали бы обычные события, ошибки и проблемы вашего приложения, доставленные в ваш экземпляр OpenReplay (или в SaaS-версию) через несколько минут после закрытия вкладки (в конце концов, приложению нужно убедиться, что вы не закрыли её случайно). Вы сможете шаг за шагом проанализировать, что делал пользователь, но если вы найдёте проблему, вы не сможете разобрать её непосредственно с этим пользователем.

Однако благодаря Assist теперь вы сможете:

• Напрямую наблюдать, что делает пользователь, в реальном времени, с того момента, как он открывает страницу.
• Благодаря использованию WebRTC между клиентом и оператором создаётся канал «один к одному». Это позволяет вам открыть звонок прямо из приложения, без необходимости устанавливать стороннее коммуникационное программное обеспечение на любом из задействованных компьютеров.
• Перехватить управление мышью пользователя (с его разрешения, конечно) и показать ему, куда именно нажать.

Взгляните на интерфейс функции Assist, каким его видит оператор, наблюдая за тем, что пользователь делает в любой момент времени:

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

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

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

npm install @openreplay/tracker-assist

А затем используйте следующий код, чтобы включить его:

//...
import { tracker } from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
//...
tracker.configure({
  projectKey: "your project key"
});
tracker.use(trackerAssist({})); //add this line
tracker.start();

Если же, с другой стороны, вы используете JS-сниппет, который вы получили с платформы при первой настройке, всё, что вам нужно сделать, — это обновить один путь. Ваш исходный сниппет должен был быть похож на этот:

<!-- OpenReplay Tracking Code for HOST -->
<script>
  var initOpts = {
    projectKey: "your project key",
    defaultInputMode: 0,
    obscureTextNumbers: false,
    obscureTextEmails: true,
  };
  var startOpts = { userID: "" };
  (function(A,s,a,y,e,r){
    r=window.OpenReplay=[e,r,y,[s-1, e]];
    s=document.createElement('script');s.src=A;s.async=!a;
    document.getElementsByTagName('head')[0].appendChild(s);
    r.start=function(v){r.push([0])};
    r.stop=function(v){r.push([1])};
    r.setUserID=function(id){r.push([2,id])};
    r.setUserAnonymousID=function(id){r.push([3,id])};
    r.setMetadata=function(k,v){r.push([4,k,v])};
    r.event=function(k,p,i){r.push([5,k,p,i])};
    r.issue=function(k,p){r.push([6,k,p])};
    r.isActive=function(){return false};
    r.getSessionToken=function(){};
  })("//static.openreplay.com/latest/openreplay.js",1,0,initOpts,startOpts);
</script>

Обратите внимание на путь к файлу openreplay.js внизу. Нам нужно изменить его и вместо него указать openreplay-assist.js, чтобы получилось примерно так:

<!-- OpenReplay Tracking Code for HOST -->
<script>
  var initOpts = {
    projectKey: "your project key",
    defaultInputMode: 0,
    obscureTextNumbers: false,
    obscureTextEmails: true,
  };
  var startOpts = { userID: "" };
  (function(A,s,a,y,e,r){
    r=window.OpenReplay=[e,r,y,[s-1, e]];
    s=document.createElement('script');s.src=A;s.async=!a;
    document.getElementsByTagName('head')[0].appendChild(s);
    r.start=function(v){r.push([0])};
    r.stop=function(v){r.push([1])};
    r.setUserID=function(id){r.push([2,id])};
    r.setUserAnonymousID=function(id){r.push([3,id])};
    r.setMetadata=function(k,v){r.push([4,k,v])};
    r.event=function(k,p,i){r.push([5,k,p,i])};
    r.issue=function(k,p){r.push([6,k,p])};
    r.isActive=function(){return false};
    r.getSessionToken=function(){};
  })("//static.openreplay.com/latest/openreplay-assist.js",1,0,initOpts,startOpts);
</script>

И это должно быть всё, что вам нужно изменить в вашей базовой настройке, чтобы получить доступ к возможностям Assist.

Здорово, не правда ли?!

Обратите внимание, что если вы вдруг столкнётесь со следующим сообщением об ошибке (как это случилось у меня), вам следует выполнить эти шаги, чтобы исправить их.

“Critical dependency: the request of a dependency is an expression”

Исправления из этого тикета должно быть достаточно, чтобы вы могли продолжить.

Теперь вы можете начать полноценно использовать Assist от OpenReplay, так что давайте взглянем на это.

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

Прямо на платформе нажмите на пункт Assist в навигационном меню, как показано ниже:

После того как вы нажмёте там, вы получите список активных сессий Assist. Как только ваш пользователь откроет приложение, сессия появится здесь автоматически, и вы увидите её в списке вот так:

Там вы увидите следующую информацию:

• ID пользователя — вон та электронная почта? Вы задали её с помощью метода setUserID в трекере.
• Время и дату начала каждой сессии.
• Длительность сессии (показана как «14 seconds» на скриншоте).
• Наконец, геоинформацию о пользователе. Вы можете видеть там, что я нахожусь в Испании, а также что я использую Firefox на моём настольном macOS.

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

Как только вы нашли искомую сессию, нажмите на значок «Play» этой сессии. Это перенесёт вас в просмотр клиентского приложения в реальном времени.

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

Теперь, как вы можете заметить, есть несколько различий между тем, что видит пользователь, и тем, что видит оператор. И не зря. Приватная информация автоматически скрывается или полностью игнорируется. Это сделано для защиты наблюдаемого пользователя; в конце концов, как оператору, вам не обязательно нужно видеть номер телефона или адрес электронной почты. Важно отметить, что это поведение по умолчанию: трекер, установленный в клиентском приложении, определяет тип вводимых вами данных и их формат (как в поле электронной почты) и тут же решает их защитить.

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

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

А чтобы получить доступ к этой функции, всё, что вам нужно сделать, — это нажать на ссылку «Remote Control» в правой верхней части вашего экрана. Когда вы это сделаете, ваш клиент увидит модальное окно с запросом разрешения.

После подтверждения вы получите управление его мышью, или, точнее, ваш указатель появится на его экране, и вы сможете нажимать и взаимодействовать с приложением, как если бы вы напрямую использовали его мышь. На следующем скриншоте вы можете видеть, что красная точка — это ваша мышь assist, а чёрный указатель — это указатель пользователя.

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

Если у вас возникнут какие-либо проблемы с настройкой плагина Assist в вашем проекте, свяжитесь с нами в нашем сообществе Slack и спросите наших разработчиков напрямую!