The definitive guide to Session Recording

Introduction 

To fully comprehend the value of UXtweak Session Recording, one only has to take a look at it alongside other tools commonly used for web analytics. The purpose of web analytics tools is to provide a website's product owners with more information about their users. Information such as:

• What exactly is this person trying to do?
• Is everything on the website working for them as it should?
• Are there any things that cause issues? Anything that frustrates the users?
• What is the user’s online experience?

All of this information is essential for designing optimal user experiences. After all, to fix an issue, we first have to pinpoint where and when (and preferably why) it shows itself. To help you navigate the sea of user interactions, the traditional web analytics tools provide you with various abstractions. The number of clicks. Visits. Retention. Conversion. These statistics may look good on paper and they're all good for informing you about the overall status. However, they do so without telling you anything at all about what’s actually going on.

Where the traditional web analytics tools can be your compass, UXtweak Session Recording is a sonar that helps you find the fish in the sea.

As the name implies, session replay is a tool that demystifies the goings-on on your website, allowing you to see all that is there for you to see (as long as it's safe and plausible). Let’s say you have a button on a particular screen that you want the users to click. Session Recording lets you see anything, from how many people have visited that screen but didn’t click the button, down to being able to replay the very sessions where it happened and view the whole interactions. As such, session replay allows you to connect the dots and comprehend the user experience as a whole.

So who’s this session replay for? Frankly, anyone, as long as your business has anything to do with having presence online. It doesn’t matter whether you’re a tech startup, a public institution or an online store. The knowledge of your users is useful to anyone, be it for improving your product, helping your customers or building better sales and marketing strategies.

What is session replay? 

As the name itself implies, session replay gives you the ability to view a reproduction of a user’s interaction with a website or web application. The playback itself looks just as if you were replaying a video. Session replay portrays everything exactly (or as exactly as the circumstances allow) like the user was seeing and experiencing it. The session replay capture collects data about the changes of the viewed page as well as user actions - movements between different pages, clicks, movements of the cursor, scrolling, tapping, dragging the cursor or typing among others. This data is then interpreted by session replay to become viewable as video of the session.

Session recording as a concept is not something brand new. It dates back over 10 years ago (depending on your criteria of what still counts as session replay). You may have encountered it already in different forms and under different names, such as session playback, user replay, session recording, user experience replay and mouse recording.

What session replay isn't 

While session replay might seem like your standard-fare video player software, with buttons like Play ► and Stop ■, under its hood is something quite different from simple recorded video. Rather, it collects events from the browser and interprets them in such a way that what we see and whatever the user on the other side of the screen was seeing are one and the same.

One could make a comparison to a court report in law. Imagine that a court reporter - the person charged with taking notes of everything that is said and done in the courtroom - were making a very exact log of not just that, but every little detail of what was happening. They would note down things like what people were present and where they were sitting, what they looked like, how they were dressed, how and when they moved and everything else they did - from the start of the court session until the trial was over. One could then take this log and use it as a script to reenact the trial exactly as it happened in the first place.

Such a reenactment would be more of a play than just a video. It could tell us much more than a video, as our viewing angle would not be restricted by the angle of the camera and what it captured. Since the log used to make it was so detailed, perhaps we could notice some suspect behavior from one of the jurors. Session replay is the same, as it collects a quantum of data, which, unlike a video is open to mining for various meaningful information or even use of machine learning algorithms.

How does session replay work? 

Seeing session replay for the first time can feel like there’s some sorcery at hand. How can you replicate what the user was experiencing so faithfully and then play it back like a video? What’s more, it’s not just some sort of screen capture either. Rather, it’s the exact replication of the web as the user was seeing and interacting with it. How do you do that?

Well, the technical ins and outs are not at all simple, but this guide should give you a good idea of how something like this is done.

The DOM basics 

The first concept that we have to grasp to understand session replay is the Document Object Model, or the DOM for short. It is through this DOM that all of the interaction between the user and the web site happens, whether it be the actions of the user, or changes of the web itself.

What Session Recording does, is that it records the DOM. We won’t go into everything that you could learn if you were to google DOM (which we recommend in case you’re interested in all of the nitty-gritty). Instead, we’ll use an analogy to help you understand how the DOM helps us make session replay possible.

Let’s compare a website or a web application to a different product of engineering, for example a physical building. Similar to how a building has a construction made up of the concrete and steel foundations and panels, the brickwork, the plaster, doors and windows, etc. ; a website has the DOM built up from things like HTML, CSS and Javascript. This DOM determines what the website looks like to a visitor.

While a visit is being recorded, we collect data about the DOM itself, as well as all of the mutations that are applied to it while a visitor is present. (In case of a building, that would be actions like opening doors, moving pieces of furniture from one place to another, watering the plants, the visitor doing some renovations of their own or maybe even the roof collapsing due to a sudden storm).

And now we can return from the realm of physical buildings back to the web, because this is exactly what replay does in the virtual space. All of the ‘building blocks’ required for put together the exact picture of the user experience that we want to analyze and learn from are gathered from the DOM, which is done by the session recorder. As to what exactly the session recorder collects and the session player uses to re-interpret, there are the events and the assets.

Events 

Session Recording is like a play that repeats the user experience based on a script - a script that is made up of many and many small events. Anything that happens on the web, be it what a user does - like clicking and scrolling, filling out a form - or even things they have no control over - like the automatic shifting an animated banner - is represented by information in the form of events. Session Recording interprets these events in the same order they happened and so recreates the experience.

Assets 

If events are the script of the of the session replay theatre, the assets are the actors, the sets and the props that physically make the replayed session look just like it did when the user was originally experiencing it. The collective scene put together from various pieces such as HTML, CSS, images etc. Session Recording needs to be able to reach assets links in order to use the assets correctly. If you change the images or CSS on the live website, they will also change in Session Recording and so the replayed session will look different from what it looked like originally.

What can be recorded? 

The are various special cases that any session replay tool including Session Recording has to account for. Most modern websites use Javascript and AJAX calls to serve dynamic content in dynamically changing form. Websites are also responsive, sometimes looking quite different on mobile, or even on desktop, provided the size of the browser window is different. There are web apps with graphical elements such as popup windows and side menus and buttons that come out or vanish under varying conditions. Session Recording deals with all of these issues and more to make it work.

The following is a list of various web presentation technologies and phenomena that can be recorded with Session Recording:

• HTML and CSS (plus any of the basic elements that you might find on a website)
• CSS animations
• Hover cursors and effects
• Script-modified user inputs
• Window resizing
• AJAX URL navigation
• HTML5 audio and video playback
• Multi-touch events on mobile

What can’t (yet) be recorded? 

• Canvas
• WebGL
• Shadow DOM
• Inline frames (iframes)
• Plugins such as Flash, Java, Silverlight, etc.
• Web components
• Local resources (e.g. "blob" URLs, Cordova apps, and Chrome extensions)

What about session replay and privacy? 

You're most likely a user of more than one web app or website yourself. After hearing about session replay and giving it some thought, you’ve probably got the following questions on your mind: “What about user privacy? Doesn’t session recording invade user's personal space?” Well, those are good questions to ask.

If you’ve already used any tools for web analytics, you may already know that it is necessary to disclose within a privacy policy when data about usage is being collected. Even if you don’t have such experience, you’ve probably already come across a pop-up window while browsing some web app, asking whether you want to allow the collection of data to help improve the application. For session replay, it is no different. And that’s because there is not difference between how Session Recording and any other web analytics tool collect usage data.

What’s more, Session Recording provides additional tools that allow you to keep your customer’s privacy well protected. Afraid that information which should be kept secret (e.g. passwords, credit card numbers) will be recorded? Fear no more, because in your Session Recording study, you can set up parts of the page that won’t be recorded at all. Only blank gray areas will be displayed in in their place. Don’t want to record some pages at all? Session Recording studies have an entire section of settings dedicated to user privacy to allow you this and more.

To make the best use of these settings, weigh carefully which segments of your website are suitable for recording and which less so.

What is session replay useful for? 

Ok. Now that we’ve explained how session replay is a tool that allows for user experience to be played back like a video, the next question one might have is “What is that good for?”.

Well, quite a few things actually. Session replay is a gold mine when it comes to observing and learning from experience of your users, and once you get your hands on it, you yourself should be able to see the various ways in which searching through the session data can provide you with actionable insight, like no previous web analysis tool could.

This chapter is dedicated to a comprehensive (but by no means complete) list of scenarios, where the use of session replay comes as a great benefit. After reading it, you should have a good idea in what sort of use cases this extremely powerful tool can help you in.

11 problems solved by session replay 

Here is a list of 11 problems that session replay can help you defeat. With each problem we present a detailed explanation of the problem itself as well as the proposed solution by using Session Recording.

1. Reproduce and solve bugs faster 

The inherent complexity of websites gives rise to the fact that some things just won't always work as they should. There are so many conditions to take into consideration, such as the various types of devices, operating systems and browsers, as well as different screen resolutions or localizations... and that's not even taking into account the factor of the user, who given the opportunity have an infinite ability to break things in ways a developer could never expect. Testing so many possibilities in order to achieve a piece of software that is completely bug-free quickly becomes outright impossible.

When a bug gets discovered and reported, we often run into another problem. That is, how to reproduce the issue either at all, or without the QA spending inordinate amount of hours looking for the root of the problem.

Developers trying to fix a bug report often struggle with some of the following problems:

• When i try to reproduce the bug, everything seems fine. If I lack the information to reproduce it, I can’t find out what’s wrong and fix it.
• I know the website has some errors but I want to know under what circumstances they appear
• I need to identify the people affected by the bug (e.g. if the bug requires a manual fix of the customer’s record in the database)
• I need to determine the impact of individual bugs in order to assign them priority

Adding session replay to the equation can completely change your way of dealing bugs that appear on your website. Instead of having to ask the user to reiterate the steps that lead to the error or asking them to provide a screenshot, now you can look up their session and see the bug appear with your own eyes!

The time of developers is expensive and so the less of it they have to spend on hunting for bugs, the better. Session replay is a powerful weapon for tracking down any type of glitch or coding error and will help you eliminate them swiftly without increased costs.

2. Conversion rate optimization (CRO) 

Conversion rate optimization is a continuous process. No matter what kind of business you’re running (e-commerce, software as service, development, sales, marketing), the number of conversions is something that you always strive to improve.

Optimizers commonly face struggles like the following:

• I need to find the obstacles that get in the way of conversions (or other KPI) taking place
• Are there any issues with the landing page?
• What are the reasons why people disregard the call to action?
• I need to determine the points when users become disinterested

Session replay combined with search is a great tool for conversion rate optimization because it allows you to look and replay anything that happens on any chosen screen of the website. With such exact data, there is nothing that stands in your way to finding out why conversions don’t happen.

There are various problems that session replay allows you to detect just by giving it a plain look. Do the users appear to not understand the UI? Do they backtrack a lot or seem to be looking for more information? Do they ignore the CTA completely? Does something get in their way, like obtrusive onboarding or some error messages? Such insights can be used as basis for future testing. In combination with A/B testing, Session Recording can help you pick the best options for your UI.

3. Support customers faster through context 

The job of technical support is a tough exercise of both technical and soft skills, as well as patience. When helping people resolve the trouble they encounter online, one might come face to face with some of the following problems:

• How do I get the user to provide the whole context so I can solve their issue?
• Isn’t there a better way than always having to ask the user for a screenshot?
• Users are usually already frustrated if things don’t work as they should. How do I get more information from an irate person?

With Session Recording integrated into your website, all of these questions will become a non-issue. Using just the user’s identification, Session Recording grants your technical support the ability to directly see what’s wrong and act accordingly.

4. Understand the user experience (UX) 

The ways in which developers and product designers envision a product to be used and in which the users then actually interact with it often wary quite a bit. This is why paying close attention to user experience and testing is so important for making a good product. When designing a user experience however, one might come face to face with the following problems:

• Can the users use and understand my design?
• How do I verify that that the design works for anyone, on any device, operating system, browser, etc.
• Realization of a UX study takes a lot of time, preparation and expenses. Depending on how properly the study was conducted, the results could end up insufficient or even outright wrong. And once we make changes to fix the problems we found, we can do it all over again.

Session replay employed as a tool in service of UX can be used to gather knowledge about user experience from real users, unobtrusively and on all the types of devices. We can easily introduce and test up-to-date changes to the UX just by updating the website and evaluating the results.

5. Understand and improve onboarding 

Aside from monitoring sessions in general in order to spot issues with user experience, a separate way to evaluate user experience is to watch replays of the user’s behavior after passing onboarding. This has to do with the learnability of your website/web app - the website’s ability to be understood by newcomers. Keeping an eye on onboarding can help us find out whether there are any important learning points that remain missed or misunderstood.

6. Measure and understand feature adoption 

One of the reasons why session replay can be so useful for evaluating user experience is because it enables measuring the adoption of new features by users. Once a new feature has been added, you can look up sessions specifically where the users come into contact with the new feature and check on whether its use was according to expectations.

What's more, if your integration with Session Recording includes the identification of users, you can use this to follow up with a survey aimed specifically at the users of your new feature. (This can be useful even if they didn’t use the feature in the end despite interacting with it, as the opinion of such a person can be quite valuable)

7. See how users interact with dynamic web app states 

Dynamic UI elements such as pop-up windows, error messages, side menus or endlessly scrolling content and the user's interaction with them are notoriously difficult to grasp when using traditional web analytics tools. There's no such limitations for session replay, where you can look up relevant sessions by UI element easily.

8. Understand marketing funnels 

Because Session Recording gives you the ability to filter sessions by user activity, one of the uses for your marketing specialists is to observe sessions in order to keep track of the marketing funnels, especially for the sessions that leave these funnels without a single conversion.

9. Analyze the effectiveness of online advertising 

By using Session Recording’s feature to keep track on UTM parameters and referrer URLs, your marketing specialists can use Session Recording to determine the reactions of visitors from various advertising campaigns to your landing page and the other features and content on your website.

10. Measure how page load and site performance varies across different browsers and devices 

Are you worried about how the various operating systems, browsers and devices handle your beautiful website which is full of complex animations? Just use replay to extract sessions by user agent and take a look at the loading metrics yourself to see if it’s fine, or perhaps needs some work to provide equally good user experience to everyone.

11. Legal evidence, fraud protection 

Speculants and fraudsters might appear to try to take advantage of your business at any time. Use session replay to always have proof of whether a user saw or did something when they then try to blame you for something bad that was their own fault.

The Qualitative and The Quantitative, best of both 

Session Recording as qualitative research 

At its core, session replay is a textbook example of qualitative research - the researcher examines the individual sessions of users interacting with a website, aided by all sorts of detailed information that originates from the session event log, such as what UI element the user clicked and when.

Thanks to session replay data being collected from real users in real life scenarios of app or website usage, session replay by its very nature avoids the observation bias that can appear in user testing, which is known as the Hawthorne effect.

Furthermore, unlike traditional user testing, pure recording of visitors in session replay doesn’t carry with it the rather expensive requirements of user testing such as complex setup, costing a lot of time to execute, the need to compensate the respondents, etc.

Session Recording as quantitative research 

Although the act of replaying a session by itself belongs firmly into the category of to qualitative research, the recording of sessions that enables this collects a quantum of data that’s just asking to be analyzed using the methods found on the quantitative end of the research spectrum.

In Session Recording, you can filter through user sessions depending on a variety of aspects, ranging from the characteristics of the user themselves (such as their identifiers), through the properties of the session (like the geographical location or the device being used) and going right into the user activity (such as what pages the user visited and how they interacted with the elements found there).

What jobs benefit from session replay 

If your job has anything to do with user’s online experience, session replay is a tool for you. Among users of Session Recording, you’ll find professionals from the ranks of developers and engineers, UX researchers, product managers and designers, technical support, marketers and others.

Product management, development and engineering 

As we’ve mentioned in the list of problems that session replay can help you solve, session replay can offer great help to product managers, developers and QA. Session replay makes debugging easier, as once you know of a session where a bug occured, it’s just a question of looking it up and playing it back to find out what happened. This saves the developers time, as they don’t need to try reproduce the bug through trial and error. It’s also a more streamlined approach than having to decipher user-written bug reports, which might require further back-and-forth.

Design and user experience (UX) research 

As anybody who makes designing user interfaces and experiences on the web their bread and butter probably knows, even a straightforward website designed with utmost care will have some users interact with it in ways that nobody predicted. What may seem obvious to a designer might remain a complete mystery to the user. What a designer thinks is in plain sight might go unnoticed. And so on.

With Session Recording, it’s easy to deepen your understanding of user experience by watching sessions of users interacting with the website. With such knowledge, it becomes easier to make informed decisions about how users shoud interact with your design.

Customer support 

Customer support also belongs among the professions that become easier with the use of session replay. Since customers often lack the ability to explain their own user experience in proper detail, assuring that every customer gets the help that they need can be a pain. Replaying the session helps the support team get inside the customer’s shoes, which in turn helps them resolve the support ticket better and more efficiently. What’s more, because session replays can be shared easily within the team, your support can follow up on any issues that appear repeatedly by taking them up with the product manager so the problem can get resolved for good.

Marketing 

A big part of a marketing team’s job is to assess the return of investment from marketing campaigns. The success of a campaign can be measured by various key performance indicators such as clicks, visits and conversions. However, these are just abstract metrics. Unlike those, replay can show you the exact behavior of people once they first visit your website thanks to finding it through a marketing campaign. This level of subtlety allows you to look at your landing page and all the screens that follow from the first arrival to conversion in a new light.

As a plus, because you can search and analyze session replays based on the referrer or user behavior, this gives you a good picture of which channels of customer acquisition are the most effective.

A different marketing use is to make a selection of users by certain search criteria (such as by selecting the top active users of your website or the users who use a certain operating system) and create a mailing list (say, to promote a new mobile app for iOS).

Session Recording also allows for the look-up of any marketing funnels that can be defined by user activity or other events. You can use this to gain knowledge of what prevents your users from converting.

Why UXtweak Session Recording? 

UXtweak’s Session Recording is a brand new state-of-the-art tool for session replay and it supplies you with all the power you need to satisfy your UX demands. Here’s some points to consider that will make your decision to pick UXtweak as your session replay tool of choice well founded and much easier.

Search, segment and filter with SmartSearch 

Session Recording indexes all user behavior to allow for lookup of interesting sessions to replay. For data exploration, we have SmartSearch, a unique feature of Session Recording that makes search helpful and intuitive.

You can seach for sessions by attributes such as location, device, browser, time, visited and referrer URLs, CSS selectors of clicked elements, inserted text and many more. Using SmartSearch can be as simple or complex as you like. It all depends on the complexity of the query that you want to make. Simply start typing into the SmartSearch bar and see what pops up.

Looking for visitors in Chrome? Start typing 'Chrome' into the SmartSearch bar. If at least one visitor was using Chrome, SmartSearch will offer to segment out Chrome users before you even finish typing. Want to see sessions where the visitor clicked a certain button? Copy and paste the element's id into the SmartSearch bar and see if it comes up. These are just two examples of how handy and easy to use the SmartSearch bar can be.

However, SmartSearch is a lot more than a quick lookup tool. Any query that you create with the SmartSearch bar is transformed into a SmartSearch filter. You can put these filters atop one another like building blocks to create more complex filters. By editing the custom filter, you can define what sessions you're looking for in even greater detail. Let's say you're looking for users who were using an iOS smartphone, first visited the website no more than a week ago and they placed a product into their shopping cart on the product page, before removing it on the shopping cart page. The power of SmartSearch makes even an advanced query like this entirely possible.

Session player overflowing with information 

The session player was built to be easy to use and understand while still maintaining loads of complex information. In the most simple use case, the session player controls just like a normal video. You can pause and resume playback, change the playback speed and rewind playback to any point on the timeline.

However, since Session Recording is actually a pixel-perfect reproduction of the session, not a video, we can do a lot more with the data it offers. Atop the player, you will find a dropdown list with all the pages that were visited during the session. Clicking any of them will take you directly to when the page opened.

The side panel gives you even more information and ways to control session playback. If you want to analyze the user's story as a whole, you can view and select which of their sessions to play back. Under more details, you will find everything that is possible to know about the user and the session - how long the session lasted, how much of that time the user was actually active, how many unique pages they viewed, what gear they were using and much, much more. If the user has more than one session, you will also find useful aggregations, such as the user's total number of events and average page load. On the session timeline, you will find the sequence of pages in the order they were viewed in, along with all the clicks and form change events inside them. You can analyze how the pages loaded or rewind the player to any pageview or event of your choosing.

Language and code capabilities 

Session Recording records everything we named in What can be recorded? Even with the web technologies that currently cannot be recorded, we strive to cover as many of them in the future as is technologically possible.

Single page apps 

Session Recording welcomes SPAs and generally has no issue with them, in contrast to some other session recording tools.

Implementation 

Starting to use Session Recording will take you about 10 minutes and only requires that you plant a piece of javascript into your website’s / web app’s source code.

Price 

The UXtweak Professional pack is easy to understand and it provides you with a certain number of sessions that can be recorded, which will be stored for a certain time period after which they expire. You can prolong this time or increase your session recording quota by customizing your pack.

The full UXtweak experience 

Unlike most session replay tools, UXtweak provides a full toolbox for tweaking of your user’s experience, all are available in a single package. By purchasing Session Recording, you will get access to Tree Testing and Card Sorting as well, so you can tweak your web from top to bottom.