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

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

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

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

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

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

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

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

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

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

npm install @openreplay/tracker-assist

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

//...
import OpenReplay from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
//...
const tracker = new OpenReplay({
  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”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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