Skip Navigation

Intro Getting Started with HotJar

In this episode, we will show you HotJar. HotJar is a must have tool for seeing what your users are really doing on your website. Where are they clicking, how far did they scroll? We will show you some HotJar basics and show you how we use it here at codetime.io

Transcript

Hello, and welcome to Code Time. My name's Trevor Greenleaf, and today I want to talk about Hotjar. For the past year, year and a half, I've been using Hotjar on the websites. It's on Code Time IO, and it's on a lot of other websites that I produce for my clients and for internal projects that I'm building and I'm wanting to test things out on. And today I'm going to show you some of the things that Hotjar can do. Hotjar's not paying me for this, it's just one of those products that I'm super excited about. And when I found out and integrated, I was like, this is crazy, like a must-have. And, I want to show you that must-have product today.

So this is Hotjar, this is their current homepage as of the recording of this video. They have a try it free, no credit card required, and that is true. You can just set up Hotjar for free and integrate it onto your project directly, onto your website. It doesn't even matter what kind of website you have, it just works and runs.

So, it's made up of various things, such as heat maps, recordings, conversions. It also has incoming feedback, feedback polls and surveys. It's an all-in-one tool to really track your users and what they're doing on your website. Now you say, "Well, I have Google Analytics, why do I need Hotjar? What's the benefit for doing that? Google Analytics provides me what pages they're on, where they're clicking throughout my website." And it does, and I suggest you keep Google Analytics, because that's also free and it's a great tool, but Hotjar's going to do a lot more and in a way more visual way.

So, I do want to talk about pricing really quick. This scales based on your page views per day. For example, if you had 20,000 pages per day, you could see your pricing here. So, you're at $89 a month. Now if you're at 20,000 page views a day, I would hope you already know about this or other services, because that's quite a bit of page views and the $89 a month is not a big deal.

Now, it's got 30-day money back guarantee, it's a great sort of solution. Again, you have personal option as well. The basic, which is forever, 2,000 page views a day, and you also have an agency plan, which you can set up for your clients. So if you're doing this and let's say you want to do some AV testing on some of your clients' projects and want to see what's the best results for things and be able to create reports and share that data with them, Hotjar can go and set you up with that.

So there's a lot you can check out on the website, I just want to jump in and show you what's up. It's pretty easy here at the interface. You can add a new site or add new users directly right there, you can also refer a friend, so you can get it essentially for free, I believe, if you refer enough friends.

I have just the free basic plan right now for Code Time. And I think it's important to sort note a couple of things. I ran this on Code Time for maybe almost a year or so I think. Yeah, just about a year, about 11 months. And it's a really great... I mean, at Tesla, you can go and see, I'll just show you, hey, let's just go in there and see the first heat map. So this is a heat map. Again, this is from a quite a bit data. And so you can see visually almost immediately, like where are people clicking?

Now, something like this here is, this is the most popular here. It says layer of site map. That's not the most popular series here on Code Time, but that's the area in which people most click. And so it's not going to dynamically change because when I add a new series, that's going to be the very first one again. But you can see here, the search is getting quite a lot and these other filters are getting good amount of clicks as well. But you can also see, people are just clicking on the watch, reference and learn code. Looks like some people are clicking on the ad and some people click on the social media.

Also on the about, and the navs links across the top here, you can see quite a bit of clicks on there. It gives you an example of the average fold here, and we can see we scroll down here. Now that's clicks. You can also see move. And again, these are really cool because there are visual representations of all your data versus Google Analytics doesn't really show you too much of that. So here you can see this really great spread, also on the average fold amount here. And then finally this one I really like is the scroll, right?

The thing is people talking about it so all you have a really long page, where do they fall off at. So you can see a 100% of the visitors get to this place here. And then about 82%. And this is where it is at 75% of the users here reach this. And then it starts still pretty good all the way down to the end here. 50% of the users get to this. So that's pretty impressive while if your site sees people just get cut off right here. I think for the homepage at Code Time, it looks like you can scroll on forever because it's just series after series after series. So you can get all this, you can download this, you can also see this for tablets and you can see it for phones.

So you'll be able to get that data that you want. So here's on a phone. Let's see how many people scroll on an iPhone or just a phone I think it doesn't specify, but most users are iPhone users. Let's just scroll down here and you can still see very good scroll. We're still at 80, 70, 75% of users get that far down. So we're talking about, oh, wow, that's quite a bit, maybe like 30 series that they actually scroll through, 75% of the users. So that's recordings or that's heat maps. There's also recordings. On recordings, you can record actual users and how they navigate your website. I don't have this feature enabled anymore, but when we first set up clue time. We put this on there and we were able to watch users.

Now important things to note here, you need to include something about Hotjar in your terms of using your privacy policy, as you're recording users behaviors on your website. And that's a big thing like, "Hey, maybe I don't want to be tracked. Maybe I don't want that information collected about me." Now you might not be able to identify the user, but you're still getting data and you're still getting quite a bit of data from them. So keep that in mind, put that in your terms of use or your privacy policy so that you let them know. You also have funnels in here where you can funnel to see where you lose your users. And so you can set up a range across the system.

You can see something sort of like this funnel on Google Analytics. This is a little bit more visual, easier to use. You also have forms. Then this is a feedback tool here. You can see incoming feedback. This is pretty old. The last 30 days somebody said, "This is great." On the 11th. And they gave a little happy heart face I guess. You can also create polls and surveys and all that other stuff. It's all part of it, it's all for free. So a couple of things to think about then, and I'll wrap this up. One, must include this on your terms of use and privacy policy somewhere in there. And if you don't have one already get something like termly set up so that you have a terms of use or privacy policy that's going to specify that.

Two, what I noticed for Code Time is that actually slowed down the website a good amount. And so if I go in here and I open say like Code Time IO, that's pretty fast, they're trying to get that in like a second or so. This would add maybe about a second, maybe two seconds onto it because it is loading a good amount of JavaScript. And I guess just processing that, from their destination, whatever reason, it seemed a little strange that it was that slow. So that's something to note. That one or two seconds is quite a bit to add to your website. So I don't know if it's something that you really necessarily need like forever and you need to collect data forever about your users, or maybe that's something you put on there for like a couple months, and then you can take it off, after you've collected enough information. It's really up to you and how you want to use that.

As far as integrating this, it's super easy. Just click add a new site, put in your website, choose the type of website. So I'll put in something like I'll do a http://moodzer.com and then I'll select a Moodzer is, I guess, software as a service. I'll say that the owner of this is Code Time and Code Time here by owns. It's actually the other way around Moodzer owns Code Time. And we will add that, now this is the basic I have Code Time and I have Moodzer, here I can add a tracking code, just click on the tracking code. And you're going to just drop this into, or just click copy and drop this into your head. Just like your Google Analytics. Again, this will work on WordPress. This'll work on, you can put it in a Google Tag Manager.

You can put it into Drupal or Joomla or Shopify or whatever a Shopify. What is the other Squarespace you could put into wherever you can sort of have a place where you embed code. You can drop this in there and integrate it, once you've dropped it in there and integrated, you can verify the installation. And now you can start tracking on that page or that multiple pages across that website. You get some other options in here, for example, integrations, IP, blocking users and things like that, that you can configure. So definitely check out Hotjar especially, if you're getting like a portfolio or something like that, ready to go, and you want to see where people are navigating, what are they really viewing? What did they spend the time on? What don't they spend the time on? You'll be able to see all that information here with Hotjar.


Back to Series Overview