Select Page

What is Smartlook and how does it work?

by | Apr 20, 2022 | UX optimization

Smartlook is an analytics tool for UX professionals, product owners and marketers that want to find improvement potentials in their websites and apps – with a javascript tag installation for the website, or an SDK integration into your mobile app.

Smartlook tries to strike a balance between quantitative and qualitative analytics, but its qualitative analytics features (heatmaps, session recordings with debugging possibilities, etc.) are no match for its quantitative features (funnel stats, event tracking) but together they can help you get a clearer picture on what users really think of the user experience you offer. In this blog post, we’ll go into the details on its features to help you see whether or not it’s a tool for you to get the insights you need.

Getting started

You start with creating an account on smartlook’s website. You can choose one of the following plans when you sign up:

  • Free: 1500 sessions / mo
  • Start-up: € 31 / month & 5K sessions
  • Business: € 79 / month & 15K sessions
  • “Ultimate” (for custom limits)

It’s pretty handy that they have the free forever plan you can use as a gateway just to get the taste of what they offer. Besides the limit of sessions, there’s also different limits on events, funnels & heatmaps for each of the plans.

When you’re new to the tool and test out the free plan, you can also make use of a “demo” property that they’ve set up that users can try out to see what the tool can do. 

Web project set up

For a web project, as with any other similar web ux tracking tool from Google Analytics to Mixpanel, you get a javascript tracking code to install. You can install in with multiple ways: 

  • Install it in hardcode on every single customer-facing part of your website (not recommended). 
  • Install it with Google Tag Manager with smartlook tag template or as a custom HTML script. 
  • You can use one of their plugins – if you have one of the supported CMSes: WordPress, Shopify, etc.

Mobile app project set up

For mobile app projects, you have to integrate the Smartlook SDK into your app. Smartlook has some pretty detailed documentation on how to do so for both Android and iOS.

What can Smartlook do?

Smartlook has a bunch of features you can use to draw insights. Here’s a list:

  • Heatmaps
  • Session recordings
  • Events
  • Funnels
  • Dashboards

Here are some example questions that Smartlook can help you answer in terms of UX:

  • Do you know where your users are hovering but not clicking?
  • Just how much of your content do your users actually scan through and how much of it do they completely ignore?
  • How many seconds are they active on your landing page before they lose interest?
  • Are users having trouble navigating your site menus on mobile devices?
  • Do other language users find your language switcher, or is it not visible enough?
  • How many users of other languages ​​have difficulty navigating your site menus on mobile devices, even after returning to your site for the second time in a day?

Smartlook walkthrough

Smartlook interface

Once you’ve created an account and installed your tracking code, you see a pretty handy quickstart guide that tells you how to create your first heatmap, event, funnel and dashboard tile.

Heatmaps

Heatmaps are a visual representation of how your users are behaving on your site or app. Heatmaps create a visual map of how users click, move, or scroll on your site or app and they highlight the hotspots that get the most interaction (warmer colours, like red) and the least (cooler colours like blue).

I’ve already written about heatmaps in a different blog post:

Creating heatmaps in Smartlook

Before you start heatmaps, you should know that in Smartlook, heatmaps are generated out of session recordings. So, it’s important that your recordings are turned on (which by default they are) as otherwise the heatmaps don’t work

  • To create a heatmap, you enter the URL of the webpage you want the heatmap of.
  • Precision: This refers to how many views you want to gather before the heatmap is finished. You’ll still be able to see it before it reaches that limit, so you’re just selecting a maximum cap but there is no minimum.
  • If you select use “history data”, Smartlook will also look at past data it has captured on this URL from the recordings. Particularly handy feature IMO that other tools don’t have.

Type of heatmaps

  • Click maps: In a click heatmap you can see where the users of your website have clicked. The colours of the heatmap basically show which elements are clicked quite often and others that are not so much. So, this heatmap is there to help you see which elements of your site/app your users consider most interesting or useful to them.
  • Move maps: A move heatmap shows how the users move their mouse over the website. Multiple studies have shown that the motion heatmap is very close to eye tracking. With this heatmap you can check which parts of your website stand out and which are actually not seen.
  • Scroll maps: The scroll heatmap indicates how far users scroll down the website. This heatmap gives you insight into the percentage of users that do or do not see certain elements below the fold.

In my experience, the most interesting insights come when you combine the different heatmaps. By combining a scroll heatmap and a click heatmap (or move heatmap), for example, you find out what percentage of users who actually have a button in their viewport have actually used it.

Session recordings

Smartlook is able to record and save session recordings of your visitors or app users: that means actual videos of what users do on your app or site! Think mouse clicks, mouse movements, keystrokes, the HTML of the page – all playing as a video. You see exactly what someone has done and how this person navigates through your site. 

There’s numerous things you can uncover these: e.g., find bugs, see what elements on your site or app are actually distracting users away from their original intent, how users behaving overall. The key is not to rely on any one single recording, but try to discover trends and patterns.

Session recordings in Smartlook: It’s all about the filters!

By default, session recordings are turned on in the tool. The way you sort through them is with filters.

You can filter and save those filters as segments to use in future, so that you can narrow down on the certain kinds of recordings you want to see.

Smartlook session recording filters include:

  • User behaviour recording data (duration of session/pages per visit/etc)
  • Location
  • Tech (browser/OS/etc)
  • User (new/returning/logged in/etc)
  • Custom events (user interactions that you define based on things like CSS element clicks)

Devtools – so your developers can debug the recordings

One of the most fascinating features of Smartlook has in its session recordings (that a lot of other tools like Hotjar don’t) is also its ‘devtools’ functionality that developers can use to find out what’s happening behind the code for the user – a vital tool for developers to understand what goes wrong when you show them bugs from your recordings.

Events

Pageviews, like Google Analytics uses by default, are for recording how a visitor navigates the content on your website across multiple pages. Events are what you need to use for recording how users interact with that content. That’s where tools like Smartlook come in play.

Event tracking feature in Smartlook is pretty nifty, as it can help you track several kinds of custom events without any technical skills (unlike if you were using Google Tag Manager).

Imagine events as basically “user interactions” that go beyond “page views”. An event is an interaction on your website that isn’t considered a pageview – For example, links to file downloads, outgoing links outside your site, and interactions with embedded video. All of these examples aren’t tracked by default in GA and setting them up actually can be complicated, that’s what makes Smartlook event tracking a handy alternative.

Events you can track in Smartlook

Have a look at the image to see what kind of new events you can track: from URL visits to text clicks to input of text, there’s an array of options. 

However, the number of choices for the pre-set events is slightly limited, and you’d need to use the advanced ones to track anything outside those (e.g. file downloads). 

What’s good though, is that there’s also an event picker that directly lets you go over a page and select a webpage element where you can focus the event’s interaction on.

Smartlook is also able to identify and track “rage clicks” events to help you solve user frustrations – when a user is clicking multiple times on a spot and nothing is happened, he’s probably frustrated. That’s a rage click. Smartlook sets it up by default so make sure you keep an eye on this one.

Funnels

Funnels feature in Smartlook is there to help visualize the user flow data into a single funnel: i.e. how many people go through each of the steps involved in the funnel. In other words, it’s a funnel mapping tool that lets you see the aggregate data behind your funnel.

Funnels only work with events – i.e. the “steps” I’ve just mentioned are “events” in Smartlook terminology – and what you should do is break down your funnel into the sequence of events that a user goes through to complete the funnel, and then voila, you can set up the funnel.

Here’s an example funnel set up report that I made for an email optin on my blog as a demo:

Dashboards & reports

Smartlook dashboard tiles are also a feature that put Smartlook higher than other similar UX tools IMO. They let you put together different kinds of stats from within your Smartlook set up into one clean view. The best use case for these IMO is if you work for a corporation with stakeholders that you need to communicate your UX data, or if you’ve got clients. 

I have to admit, most of these data you can also simply get from Google Analytics and visualize in a custom way in Google Data Studio. Smartlook’s tiles can still be pretty insightful though, if you make the tiles focused purely on your custom events and the data you’re tracking in Smartlook and turn it into a one-pager report, for example reporting the # of rage clicks, funnel progression, notes from recordings, etc.

Privacy First: How to be Compliant with Smartlook use

GDPR

Smartlook is EU based, so it falls under GDPR. Whether GDPR applies to your use of the tool or not depends on the question whether you are capturing personal data with it (e.g. user input in forms or using their API for integrations with tools where you have personal data of your customers, etc.). 

If you want access to the censored data, then you’d also have to sign an NDA with them as by default, the personal data is automatically anonymized in session recordings.

Cookie category

Since Smartlook tracking works with cookies, it’s also important to update your cookie statement to include the Smartlook cookie info.

You can use a cookie manager browser application to see exactly what cookies Smartlook is setting in your users’ browsers.

While the cookie classification can depend on how you use the tool, in most cases it’s an analytical cookie. If you capture also personal data, then you may be safer classifying it as a marketing cookie.