Have you ever wondered about session replay, the recording of your visitors’ actions on your website? Here is how you do it using a website session recording tool.
Your web analytics solution is intended to capture exactly what a user does on your website.
Google Analytics is one of the best for the purpose. But how visual is it really? Can it show you a video recording of a visitor’s exact actions on your web pages? Not yet!
Google Analytics by default tracks only your website’s page views. To track additional activities, such as mouse middle-click, page scrolling, or the playback of a YouTube video, you need to create custom events (by combining Google Analytics and Google Tag Manager, for instance).
I was in the lookout for a cool product that could show me what my visitors are doing on my site, through video recordings, heat maps, scroll details, clicks, etc. That’s how I came across Mouseflow.
Mouseflow is a solution to track digital customer experience; hence, it provides features such as session replay, website heatmaps, and form analytics, which are extremely essential for conversion rate optimization (CRO).
Strangely enough, these CRO features are not available on Google Analytics.
As an example, check out the following video illustrating the session replay feature of Mouseflow.
In this article, let me give you a detailed review of Mouseflow and its advanced features:
- User action recordings (session replay)
- Heatmaps (click, movement, scroll, attention, geography)
- Custom funnel visualizations
- Form analytics
- Visitor feedback campaigns
In 2015, Mouseflow became the market leader in web customer experience analytics, according to Marketshare.
Live Stream & Session Replay of User Actions on Your Website
As mentioned, the main feature of Mouseflow is the live streaming of user actions and session recordings, also known as “session replay.”
After you install Mouseflow on your website, you can get to the Mouseflow dashboard and click the “Recordings” option on the left sidebar. It will bring up a list of all the user actions captured as video recordings.
You will find a filter on the top right to change the date range of recordings (just as in Google Analytics).
The session replay list also shows you other key parameters of the visitor, such as the referring URL, entry page, number of pages in the session, session (recording) duration, device details (OS, browser, device), and various Mouseflow custom tags.
The session replay list also shows you the number of pages seen by the visitor.
The visited pages list is a dropdown, and if you click it, it shows you a waterfall model of all the visited pages. The dropdown is a perfect visualization of a user’s page view activity—showing the landing page, the visited pages, and the exit page.
If you click one of the recordings, it will open in a new window where you can view the playback of the session. The entire actions, such as scrolls, page views, clicks, form signups, etc., can be seen on the session replay window.
Here is a sample of a session replay window from ZoomOwl itself.
If you want to get a taste of the recording, you can check out the demo of Mouseflow.
At the top left-hand side of the session replay window, you will see a dropdown of all the pages viewed by the visitor in the current session, along with the time spent in each.
Since the dropdown also gives you the time spent on each page, you can get an idea of which page has made the user stick around longer—it may indicate an issue with the page or something interesting that the user wanted to check out. The recording will show you exactly what happened.
Within the session replay window, you have a toggle button (marked in the Image 1c.5 as “visit details”) that provides you with the entire details of the visitor.
Details such as location, IP address, ISP, OS, browser, device, screen resolution, language, referring URL, time of visit, and the duration can be seen here.
The session replay timeline will show user actions with specific color codes:
- Red: Mouse movement and scrolls
- Yellow: Mouse click or tap on mobile devices
- Green: Form interaction
- Black: There is no activity (the user may have navigated to some other application).
You can also speed up the recording playback to twice or four times the original speed.
When you watch a recording with multiple page views, Mouseflow automatically switches among the pages during the playback, just as the user does.
If you want to come back later to a recording, you can favorite it by clicking the star icon on the top right. This will allow you to mark the session for future reference. Further, you can add custom tags or notes to the recording, share it, or download it.
Getting Started With Mouseflow: Installation
Installation of Mouseflow is quite similar to the installation of Google Analytics tracking code on your website.
After you sign up, open the “Settings” option on the left-hand side and find the “</>” icon to get your tracking code, which looks like this.
Just take it to your website and paste it before the closing </body> tag on all the pages you want to track. Mouseflow also provides integration options with popular content management systems such as WordPress.
Since I use Google Tag Manager, I implemented the tracking code through it.
Once installed, Mouseflow starts tracking all the details about your visitors and their interaction on your site. These will be available on the side in the various sections: Recordings, Heatmaps, Funnels, Forms, and Feedback.
Viewing and Filtering Through the Data
When you visit your “Recordings” section, you may want to segment the data and filter it down to certain minute detail: For instance, data of the last week’s visitors from the iPhone.
Such filtering is done from the filter icon and the date selection options found at the top right; they are available on all kinds of reports.
The filter button opens a plethora of options that you can apply to your list.
You can filter based on:
- Country
- Operating systems
- Browser
- Traffic sources
- Visitor type
- Screen resolution
- Devices (smartphone, tablet, PC/laptop)
- Number of pages viewed
- Visit duration
- Navigation tags (entry page, exit page, etc.)
- Built-in and custom tags
- Custom variables
It lets you segment your visitors every which way to achieve an astounding level of specificity.
Built-in Tags
Along with data filters, you also have certain built-in tags in your reports to identify certain types of traffic. For instance, a form interaction or anomalous clicking is tagged with a built-in tag.
Here are some important built-in tags.
Click-Error: This tag is applied to a recording when a user comes across some error while clicking an element on a web page. This tag helps you identify website issues, such as JavaScript errors. Your session replay will show you exactly where the error occurred.
Click-Rage: This tag is applied when a user clicks repeatedly on an element, indicating frustration. For instance, you may have colored a plain piece of text in blue and the user expects a link at that place. Such web design gaffes can be spotted with this tag.
Form-Interact: This tag is added to the sessions which include an interaction with a form.
Submit: This is tagged to a session when the visitor submits a form. This makes it extremely easy to identify form submissions and conversions among your web sessions.
Bounce: Applies to a user who navigates away from a page to another for a very short duration. This is different from the typical bounce you come across on Google Analytics.
Mouse-out: Is applied to a visit in which the visitor navigates away from your website to another application or browser tab.
In addition to the above, Mouseflow provides several other built-in tags. You can also create your own custom tags.
Key Features of Mouseflow Other Than the Session Recording
Session replay is not the only feature of Mouseflow.
This web analytics product is replete with features and allows you to get detailed information about your visitors.
Let’s see some of the additional features that are useful to webmasters.
1. Website Heatmaps
Do you want to see where your visitors are clicking, where they are scrolling to, and which parts of the website they are looking at? For this, you need website heatmaps, the visual overlay that shows you which parts of your site are attention-grabbing.
Mouseflow features five types of heatmaps. Four of them for your web pages, and the fifth for the visitor geography.
Let’s look at each heatmap in detail.
1.a. Click Heatmap
When you click the “Heatmaps” section in your Mouseflow dashboard, you will see a list of pages along with the number of visits, visit duration, engagement time, aggregate number of clicks, rendering time, scroll percentage, page size, etc.
This is by default the click heatmap list you are seeing.
The click heatmap is shown on the Image 1c.a above.
It shows all the clicks and touches (in case of mobile devices) by the users on your page. This will give you an instant picture of your entire click activity on that page.
Hovering over a portion of the heatmap brings up a click hover view with certain key information.
Image 1c.c. Click Hover View
The click hover view shows you what percentage of the visitors click, how much time it takes for an average visitor to click that element, how long they hover before clicking, etc.
This information can be extremely essential for improving your site’s user experience and increasing your conversion rate.
1.b. Movement Heatmaps
Being able to track the eyes of a visitor is every marketer’s dream. We want to place our most effective content and CTAs where users are looking. Movement heatmap may be the next best thing.
Imagine the way most of us browse web pages. When we are looking at a piece of information, we subconsciously move our mouse cursor over it.
Mouseflow’s movement heatmap captures the mouse movements and provides you with a snapshot of that. For every single page.
This heatmap will tell you exactly where you should place your CTAs.
1.c. Scroll Heatmap
Now, let’s talk about scrolling, a clear indicator of whether users are consuming your content.
Users who scroll down till the end are enjoying your content and getting something good from it. Those who want out as soon as they see your first sentence do not scroll.
Essentially, you want to encourage scrolling.
The scroll heatmap tells you what percentage of visitors are scrolling through your content and which parts of the website are getting maximum attention.
The top of the page (above the fold) is almost always fully red, indicating that almost all of the visitors see that part. Moving further down, the color gets lighter, indicating that the scroll activity is reducing. By the end of the page, the color is generally the lightest, indicating reduced scroll activity.
The heatmap will tell you how you should structure your content to improve its overall visibility.
Also, you will see a tiny snippet that shows you the percentage of visitors who scrolled to the current region, average time spent, and the average engagement time.
1.d. Attention Heatmap
The attention heatmap is alike the scroll heatmap. But here, you get to view the exact percentage of visitors who have seen a part of the page.
As you can see, it shows a snippet with the percentage of visitors who viewed a line, average time spent, and average engagement time.
1.e. Geo Heatmap
Mouseflow also provides off-page analytics, such as the information of the geography of your visitors through the geo heatmap.
This is not generated on your web page as an overlay. Instead, it forms an overlay on the top of a world map, showing the locations of most of your visitors.
This is perfectly similar to the geography data provided by Google Analytics.
The geo heatmap helps you optimize your ad spending. You can learn where to concentrate your efforts to get maximum results.
The geo heatmap lets you zoom into a neighborhood level to learn exactly where your visitors are coming from.
As seen in the Image 1c.h above, one of ZoomOwl’s visitors from New York has viewed the website from Manhattan’s Washington Square Park. (Thank you 🙂 and visit again, if you are seeing this.)
This level of detail is not available even on Google Analytics.
2. Custom Funnels
Custom funnel creation is extremely simple and entirely intuitive on Mouseflow. Click the “Funnels” option in the sidebar and then “Add new funnel.”
This way, you can create as many funnels as you want, without having to tie it to any specific goal. Note that the custom funnel is an advanced feature available in Google Analytics 360.
Once you identify the navigation path you want your visitors to follow (such as Home -> Pricing -> Signup -> Thank You), you can simply add them into the funnel steps and create your funnel.
As soon as the funnel is created, Mouseflow shows you the conversions based on the existing visit data.
You may notice the “watch dropped” and “watch converted” buttons.
Use “watch dropped” to view the session replays of all the users who dropped in each step. This will give you important information on why people are dropping off and how to improve the retention rate.
“Watch converted” shows you the recordings of converted visitors.
The funnel, as you can see, shows you the real conversion rate based on the extant traffic data. Use the extensive filters provided by Mouseflow to identify segment-specific conversion rates.
For instance, you can apply filters such “as all mobile devices using Chrome browser” to find conversion rate specific in that segment. This way, you can zoom in on the conversion rates for all kinds of segments on your traffic.
3. Form Analytics
Do you have forms on your site to capture users’ information before you let them download something from your site? You want to ensure that these forms don’t alienate or frustrate your users.
The form analytics provided by Mouseflow is simple and straightforward. Click the “Forms” option on the sidebar, and you will see all the forms you are tracking.
They show up as tiny snippets with basic information, such as number of visits, interactions, and conversions. You can click on any of these snippets to see actual recordings of people interacting with the form.
You can also add new forms from this page. Mouseflow can automatically detect all kinds of forms, so it’s perfectly easy.
The form analytics gives you a comprehensive report on all the fields and shows you how many people interacted with each form field. Dropoff percentage tells you important UX insights on your forms.
Another intelligent metric that form analytics gives you is the refill rate. This is the percentage in which users refill the data on a field.
For instance, if the refill rate for an element such as “Email” is higher than 50%, it means more than 50% of the people interacting with that element are refilling that field.
This clearly indicates that the users are confused about that field, doesn’t it?
Another intuitive information is the “blank submit,” which indicates that a user hasn’t filled a field. This is high for optional fields as well as required fields without the asterisk indicator.
These metrics can clearly provide an indication of your forms’ user experience.
4. Feedback Campaigns
Have you seen short feedback forms at the end of some websites?
Such forms are used to collect opinions from the visitors themselves about content and user experience. This is known as the feedback campaign.
Mouseflow lets you launch a feedback campaign on your website easily.
Navigate to the feedback section on your Mouseflow dashboard and click “Add New Campaign.”
Simply fill up the questions and options of the campaign and launch it on your site.
Mouseflow lets you add multiple questions to your feedback form and multiple options for each.
You can change the appearance of the form in several ways: colors, location of the form on the website, etc.
You can trigger the form at page load, with a delay, while scrolling down, during inactivity, while mouse leaves the page, or manually. You can also show the form on all web pages or some, as well as for all visitors or some.
You can also set Mouseflow to notify you via email whenever a feedback is given.
Once the feedback form is added on your website and is collecting data, you will be able to see the detailed stats on the feedback section.
As you can see Mouseflow is a feature-rich application for session replay, website heatmaps, form analytics, custom funnels, and user feedback. Such an analytics application is absolutely essential for improving your conversion rates over time.