True North Social Logo

What is Hotjar and how can it increase your conversion rate?

Hey there, guys, this is Kellis Landrum from True North Social. We are a Digital Marketing Agency in Los Angeles, California. And today we’re going to talk about exactly what people are doing when they come to your website. User feedback tools like Google Analytics can be very deep and get pretty complicated, but there may be a better solution. Have you tried Hotjar?

website-design-review

In a nutshell, Hotjar is a user recording tool.  As it says on their website, it will help you understand how your users interact on your site, and what they don’t know about necessarily what they need or how they feel. But it will show you what they do, which is super useful. Primarily, what we use it for is to record user sessions. They also have Heat maps, you can do incoming feedback polls and surveys. But recordings are generally the thing that Hotjar does that nobody else does. So, let’s start, let’s jump in and take a look.

what is hotjar

Now, when you first log in to Hotjar, you’ll be taken to the Dashboard, there’s a list of things over here you can check out, what we’re going to check out his recordings. And when we click on this, it will take us over to all the recordings that Hotjar is done.

feedback polls

If you pay for a subscription, you can get a filtering of a lot of different things. But let’s take a look at one of these and see what it does. I’ve taken the liberty of looking through a few of these to find a good one, I think it is interesting for you guys to check out. So, let’s take a look at what happens when you open one of these up. Initially, I believe I will immediately start playing. And it will show you user actions and precisely what they do. So, this is actually on a Mobile device. Hotjar will show you people who visit your site on mobile devices as well as desktops or tablets and show you what they do. One of the things you want to keep in mind when you’re looking at mobile is there is no hover state for mobile because everything is on tap. But as you can see, it displays the URL that this person is looking at. It shows them going through the site and shows our newsletter pop-up, and you’ll see them scroll through, you’ll see what they pause to look at or read, which are also recorded clicks.

incoming feedback

That’s what these little white dots are down here. And you can see, I’m going to stop this right here. When you’re talking about Conversion Metrics you can look at macro conversions, which are usually either someone fills out your form, gives you a call, or buys something off of your website. But there’s also something else called micro-conversion that you can look at. And that is generally- how do people interact with things on your website? If you have information and hide and show menus, do they click on them and use them? If you have a video on your website, do people stop and click on the video and watch it? There are a lot of different interactions that you might consider as a secondary goal to the big goal.

But if you’re thinking about how, you get people engaged and working with the site, these micro conversions are an important thing to look at. So, let’s watch this a little bit more. You’ll also see down here in the time bar; you can do this as a player. And it plays in a very similar way to a YouTube video at different points in time when people click on things. It’ll show you that this person just went to another page here. So, you can show them navigating between pages. But you’ll notice these little thin parts of the bar, this is where there’s inactivity. And this isn’t necessarily something bad, it could be somebody is stopping to take a look at something that is animating on your website, like these animations on our website, or they’re stopping to read. But if you don’t want to sit through this, you can click skip an activity and it will advance you forward to the next part. Generally, on a lot of our sites, what we see people doing is just scrolling down a page that is very typical. And when they find something, they like they find something they’re interested in, they’ll stop and take a look at it. Or a lot of times a user scrolls down to the bottom of the page, and then they’ll come back up. In this particular case, one of the reasons I picked this video is that this user does convert. So, at the bottom of most of the pages on our site, there’s a form to fill out. And that is what this person is doing. You can see people going through the conversion process and monitor form performance.

feedback polls

This is how we do basic form analysis. This is very important to watch people do on your website if you’re having problems with conversion because sometimes, you’ll see things like they hit the submit button and nothing happens. Or they click it a bunch and nothing happens. Form analysis is important because if people are getting to a certain point in your website, and they’re not getting the expected results they might just leave. This went white for a second. I’m going to rewind this just a little bit so you can see, pause it here and get to the right part. To play this, and you can see this thing goes white. Right here, it says the form was sent successfully.

That lets me know that my form is indeed working. And on most websites, if you had the option to fill out a form, most forms will generate some sort of messaging, letting the user know that their submission went through correctly. This is crucial for form analysis and form analytics. If it failed, it is important to make sure that your form sends a message that it is not going through successfully. If you’re not getting as many users through your conversion funnel as you’d like, this could be a major reason why. It could be that your form is broken, or that people can’t use it in the way they intended. If you don’t see the form confirmation it’s likely not counting in your form analytics platform, which is crucial for marketing managers.

You can see this person scrolls around a little bit, they hang around doing nothing for a minute or two. So, we’re going to jump over to the desktop version. So, the desktop, this is our homepage, I think this is pretty typical of what you’ll see when a user comes to our homepage. What do they do? What you want to look at is how real users interact, they look over the navigation a little bit, they scroll down the page, they hover over some things, we put a cool little anima… hover animation on these. So, they kind of brighten up a little bit. And they’re very visual. This was Intentional, we want people to look at these things. But they scroll down the site, you know, they’re not really stopping, they stop and read every once in a while. But mostly what they do is they look at big headlines.

And they kind of decide if this is something that they’re more interested in reading or not. And then if you know, they either keep moving on or they might go back to something like this person scrolls up a little bit. Oh, those things are animated. But on our homepage, our homepage is very long. So, a lot is going on with this guy stopping to look at our clients. And on this page, I picked this one as well, because this person decided to fill out our form and contact us. So, you can see some people convert very quickly, like this one, some people have to bounce around from page to page, to be convinced, I guess, that we are somebody that they would like to work with before they decide to fill out our form. And in fact, it looks like this person just sits there for a while. They filled out part of our form, but they haven’t gone all the way through it. So, skip this inactivity here. Sometimes people will do things as they’ll kind of write their message off-page. Let’s take a look at this one here. Yep, this guy pastes in a little bit longer message before he looks like he’s going to hit the submit button right here at the end. So, this is the Basics of what you’re looking at with Hotjar.

google tag manager

Okay, so aside from watching the actual video, there are a few other things that Hotjar tells us that can be very useful. One of the things is the session info over here on the right. So, this tells me this person was in the United States that this was recorded on November 29th. This is super [Chuckles] helpful. When you make changes to your site, and you’re going back and watching your videos, and you see things are out of place, it could be because you changed your site.

So, knowing the Date and the Time, that’s super helpful, what kind of monitor this person is using, it’s generally great to know, because sometimes you’ll get complaints about Bugs from people, and they show up on a certain size monitor a little bit differently because of responsive design. So, knowing the display size somebody is using can be very important, as well as which browser version they’re using, sometimes which operating system they’re using. But there are some bugs that you will find that are very browser-specific, especially when you’re using JavaScript. And you know, it can just change a lot from one browser to another. So, this is very good information to know. It’s also nice to know who referred this person to your site, this person came in through Google, which is pretty typical for our site. And over here on the right, if you click on this, it will also show you the actions that they took. So, all these little White Dots over here correspond to this.

powerful feedback collection features

So, this is telling you where someone clicked on the page. And this can be helpful for your development team. There’s some sort of bug, something’s not working right. You can tell them specifically which element on the page somebody was trying to work with. If I had a problem, now one of the things you’ll find over a period of time is that Hotjar will rack up a massive number of user recordings, I actually deleted a lot of user recordings from my list before I showed this to you guys, but your list of recordings here will get quite long. And it’s not really going to be helpful or maybe even feasible to watch every single one of them. If you have a paid subscription, you can filter these, and I highly recommend doing that. But Hotjar will give you quite a bit of information here about things that you may or may not be interested in. Now, when we’re running Hotjar campaigns, what we usually do is we’re focused on looking at certain pages. And this landing page here will tell me where people came in, exit page tells me where people left, this is the first page they looked at, this is the last page they looked at.

If you do filtering, you can also search by URL and click the visited page. And if there, somebody visited six or seven different pages, the one you’re interested in may have been the fourth or the fifth page rather than the landing and exit page. So that can be pretty helpful. Generally, we like to use this as a tool to kind of find bugs. So, we look at people who go through more than one page and spend more than a minute on their site. But we found if they’re spending more than 10 or 15 minutes on our site, it’s probably not super relevant. I would say; most people who come to our site and fill out the form will do so within five minutes. And some of them will only go through one page, some of them might go through four, five, or six pages. When I start seeing someone go through 20 pages. [Chuckles]

I kind of wonder what’s going on there. Some people are just Lookie-Loos, but I can tell you that on our site, they tend to convert very poorly. As far as Hotjar is relevant score here. I don’t put a lot of faith in this, I think it tends to place high relevance on people who spend a long time on your site and take a large number of actions. And what we found is that is not always necessarily the case, there’s a certain sweet spot. And for us, the most relevant thing is when either there is a bug or seeing the path people take to conversion. And unfortunately, Hotjar does not take conversion into account here. In fact, Hotjar does not even really have a mechanism for knowing when someone gets to a conversion, it really just sort of records but it’s not like Google Analytics, where it places Tracking Code into a form and records and conversion is actually happening. So, this list is going to become quite long.

hotjar's conversion funnel reports

And I would suggest just trying to be a little bit judicious about what you watch and what you kind of skipped over. So, the last thing I want to cover with you guys is Heat Maps. So, let’s go to the heat maps page. Just let you know Hotjar has revamped the way this works pretty recently; Today is December 9th. And I want to say they revamped this probably about three or four weeks ago, not too long before Thanksgiving. So, this is working a little bit differently. Now, Hotjar will automatically record continuous heat maps. So, you can look at the list of URLs and see what page on your site you want to check out for a Heat Map, I’m just going to check out our homepage to start. Now, this takes some time to accrue. You can see, we started doing this on November 30th. That was very shortly after they changed the way they do this. So, for this time period, we got 84 sessions showing 118 clicks, which is not a ton of Data. But over the course of a couple of months this will build up and we’ll start to see a lot more of this but let’s see what we’ve got so far.

So, these little dots indicate clicks so people have mostly been clicking on case studies and about us and our main menu, I think this is contact over here it’s got seven flex for whatever reason Hotjar has decided to cut off some stuff on the sides of our page here but you know, if you look at your page you can know what is going on over there and what’s not. This is our Banner that links to our About Us page. The button here is just to make it super obvious there’s a button in case you don’t know but most people don’t know that they’ll just click anywhere on here and convert through. But we can see there are a few things that people click on. In some cases, if you see a lot of clicks on stuff continuously, it could be that people think this is a link. But when it’s not, we may at some point decide to start linking these just in case people want to click over it there, they’re doing a lot of that already, we might decide to do that right here. In this section, there’s a video. So, you can see Hotjar does not necessarily load all of the elements into your Heat Map. It is there. I would imagine, at some point, we’ll start seeing some clicks on this after it’s had a little bit more time to record. But down here and are our case studies, looks like people are clicking on a few of these to view them. So far, I don’t think we’ve got a whole lot of other clicks on this page yet. This is a gallery with some photography. And it looks like people click on it to advance this little reel and look at a couple of our pictures, but still not a ton of clicks being recorded on this page yet. So, what we’ll see as we get down to the bottom is, this is not our footer, this is not the end of our page. So Hotjar, I guess will only record a certain length of a page, which for us is a little bit unfortunate, because our homepage is very long. for SEO purposes, we get quite a bit of traffic to this page because we have a lot of content on it, that’s kind of how SEO works if you’re an SEO agency. But we’re taking a look at clicks here and there. But it’s not the only thing that Heat Maps will show you, you can take a look at this on desktop, you can also take a look on mobile.

users hotjar

So, we’ll show you a lot of people clicking on our menu icon, which is where it’s not showing me the expanded state. Although this might be something that people click on in the expanded state, I’m not quite sure it looks like they are clicking on this. But you can kind of see like it will show you on mobile as well. One important thing to note is on the desktop, there is a little icon here to show you movement. And this will show users, hovering over things and things and moving their mouse around. When you watch recordings, you’ll see people do this a lot, just this little bit of mouse movement. And why did they do that? Maybe they’re thinking about something, sometimes people will Highlight things that they’re reading and go like this. I think we’ve seen a decent amount of that. In our recordings. But you’ll notice that this doesn’t appear on mobile. And the reason is that there’s no mouse on a mobile device. So, there is no hovering and there is no mass movement. That’s very subtle.

But if you’re not used to working on websites, it’s pretty easy to miss. So that’s click and mouse movement. But what I like the best is scroll. This is showing me how far users are getting on my page. Now obviously, everyone who comes to my site sees this far down the page, I’m not [Chuckles] sure who didn’t make it to this point right here. But What this is telling me is that different users have different Screen sizes, or I should say different Monitor sizes, and some monitors are very wide and not very tall. So, a lot of users see this with almost every monitor that loads a webpage, there’s some small amount of Real Estate being taken up here by the Browser, Tabs and the URL bar, and whatever kind of shortcuts people have. So, cut a little bit off the top. So, if users have a very wide monitor, it will be very short. Because it’s wide, some users have more of a Square Shaped Monitor. So, they’ll see a little bit more of what loads into the page here. And it gives me sort of an average fold here. I don’t know if I would take this with a Grain of Salt because if it’s average, it means that some users are seeing even more of this down here.

download session recordings

Which I think is unlikely, because it would make their monitor vertical. Although I have seen developers that orient their monitor vertically. But I don’t think there’s a lot of that happening. That’s very common. But what we can see is as we scroll down the page here, okay, 75% of our users made it here, 69% made it here, see, we actually get a little way down the page down to our third block before we hit 50%. And I would say; that’s pretty good. We rearrange the blocks on our homepage over the past couple of weeks or maybe a month to get more of our clients to see at the very least. Okay, here’s the banner. This is a little bit of marketing text and our services. We want them to see a video because some people would rather watch a video than reading and some Case studies that kind of make us look good. And these are very visual. They have very nice photography.

hotjar's rapid growth

So, I figured we could get a lot of people to at least get this far and then see that we’ve worked with a couple of credible clients here, which is great. But this is a whole strategy around, like, if people aren’t going to spend a whole lot of time looking at our homepage, what do we want them to see first? So, it looks like that is succeeding. Most of our users get at least down here, and then maybe they’ll scroll back up and click on something in the navigation, or they’ll click on something up here. But the rest of our users, I think what is very, very typical is users will just scroll down a page and get to the end, and then decide, is there anything that I thought was relevant, or that I want to look at a little bit more, I would say this is two-thirds of the way down our page, and 25% of our users made it to this point, which I would say is pretty good.

Because we have a very, very long page. And like I said, I think if 25% of our users have made it this far, the likelihood that they’ll make it down to the bottom of the page is pretty good. I would expect another maybe five or little, maybe 10% drop-off to get down to the bottom of the page. But actually, making it to the bottom of the page this long, getting 15% or 20% of our users to do that before they either leave, or they just go to a different page of the site is pretty good. So just looking at your page and seeing how far do people get? And if they’re only getting this far, do I want to show what I think is more relevant information higher up the page and get them to read that? Will that help? I can tell you for us, it did. Very literally.

So that’s our homepage. If you want to take a look at other pages on your site, you can just kind of hit show more here and look at whatever you think is relevant or interesting. I would recommend going to your analytics tools, going down to behavior overview and seeing what pages are the most Trafficked on your site and visualizing the user journey. You can also do this with Google Search Console if you click on performance. By default, it will load Queries. This shows you what people are searching for to get to your site. If you’re doing some SEO work, that’s helpful. But this will say most of those clicks go to these pages. And this is what I’d start with for sure. In terms of what pages am I going to look at and use those to start troubleshooting or you know, just seeing how people interact? Are there any problems? Are there? Are there any drop-off problems? Are there any bugs that this is what I would use as my list to start with Hotjar?

So, let’s talk about bugs. What is a bug versus what is not a bug, this might seem straightforward to you? But in my experience, it is not always, [Chuckles] I’ve had plenty of clients or co-workers come to me and say, hey, people can’t do this thing. There’s a bug, we got to fix it. And just because people can’t do something doesn’t necessarily mean there’s a bug. A bug is a technical problem with a website, it could be that a piece of code is not loading correctly, it could be that we have a button and the button either does not link at all or it links to the wrong place. Those are all problems with the website that need to get fixed. So, let’s talk on the other hand, about what is not a bug when users don’t behave the way we expect them to. This is not a bug, they might have several choices of Buttons, Links, or Navigation. And just because they click on the wrong thing, or they don’t understand that they need to click on one screen, and then they get presented with a set of choices. And they have to click on another one. And they can’t follow the right order of choices that they need to in order to get to their destination. Those are not bugs. There’s nothing technically wrong [Chuckles] with the website, the website performs as it was built to. But this is what we call an interaction problem. Interaction problems are when a user is trying to accomplish a goal and they can’t for some reason. Those reasons tend to be either because the user can’t intuitively understand what it is they’re supposed to be doing to accomplish their goal. Or it could be because the site simply hasn’t been Coded to allow them to do something that they want to do in the first place.

It’s one thing if the code doesn’t load properly to allow you to do something but if it was never designed or built to let you do a thing that you want to do in the first place. That functionality does not exist. It is not broken. It is simply not there. And this is one of the things that I think Hotjar is great for is sometimes you can tell Okay, a person is trying to do this thing, and they keep getting to this page, and then they are going back, sometimes you can kind of Reverse Engineer this process and figure out, hey, this person was trying to get here and they just can’t find the right way to go. And then you can create variations of a user flow, give them a different set of buttons. Sometimes it’s as simple as changing the wording on your buttons to be a little bit clearer. And maybe then you can help someone to figure out how to get where it is that they’re trying to get.

Alright, I hope Hotjar review this was useful for you guys. With any luck you have a better idea of what Hotjar offers. If you have any more questions, please leave them in the comments below. And feel free to reach out to us at truenorthsocial.com, as always, don’t forget to Like and Subscribe. Once again, my name is Kellis Landrum, and Thank you so much for watching.

Instagram

Facebook Ads

Social Media Management

SEO

Ecommerce Web Design