In this tutorial I will show you how you can record your visitors and see heatmaps entirely FREE
👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support my channel? Leave a like or buy Divi with 20% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
Get Divi with 20% discount ⇒ https://wpressdoctor.com/getdivi/
Hosting & Domain provider ⇒ https://wpressdoctor.com/nr1webhosting/
Speed up your WordPress website ⇒ https://wpressdoctor.com/nr1cachingpl…
I want you to succeed with your website, so lets get started.
⏱️Timestamps⏱️
0:00 Record Your Website Visitors & Click Heatmaps – Intro
0:29 Free signup with a Microsoft account
1:29 Add project / your website
1:50 Add code to your website manual
2:52 Install with plugin
3:50 Integrate Google Analytics
4:29 Dashboard overview
6:47 Recordings overview
9:29 Heatmaps overview
10:43 Heatmaps CSS errors
✅For tips and tricks on getting the most out of WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub
📖Transscript📖
Wouldn’t it be awesome if you could see your visitors moving throughout your website? See their cursor moving across the screen, what they are clicking, and what they are ignoring, and where they are rage clicking? In this video I’m going to show you how to set up this free tool from Microsoft. And we’re going to install it, and I’m going to show you how you can use those heatmaps, those click rage heatmaps, and also the recordings of your visitors to actually improve your website. It’s very valuable, so let’s start right now.
So the first thing we’re going to do is: we’re going to Google and we’re going to type in “Microsoft Clarity”, and then we go to https://clarity.microsoft.com. So when you click on ‘Get started’ you can actually sign up with Microsoft’s Clarity with Microsoft Facebook or Google. Well let’s use Microsoft. And here you can type in your Microsoft account if you have one, and if you don’t have one we click on create one. And then we do the@wpressdoctor.com. I press next. I’m going to create a password right here. Then you fill in the place where you live, and you can just fill in something for your birthday and press next. Then you need to verify your email. My code I just received is 2313. I don’t like information, tips and offers about Microsoft products and I press next. Enter the Captcha. And we press ‘Next’. So now we have ourselves a Microsoft account. We press ‘Yes’, than press ‘I accept the Clarity terms’ and press ‘Ok continue’. And now we’re going to create a new project and the project is actually your website. So what you want to call this? Well the name of our website is ‘My website’, and my website is wpressdoctor.com. And I’m in the education business so I press ‘Create’. They have now created our project so now we can start recording our visitors.
So the next thing we need to do is: we need to install clarity on our website. We can do that on different ways. We can use the plugin for WordPress or we can just add this code to the heading of your website. Now how are we going to do it? I’m going to show you. You just copy this code. So you head over to your WordPress website, and I am using the Divi theme, its the most awesome theme there is in the world! I’m sorry I’m just enthusiastic. If you want a discount of 20% check the link in the description of this video. So we go to ‘Divi’ we go to ‘Theme options’ because in Divi you can just integrate everything you want on your website. So let’s enable our Clarity code. We just go into the header code, and we just paste in the code we just got from Microsoft Clarity. And now when I just save these changes. Now we have our settings are saved at the front side of the website. Don’t forget to clean your cache -if you have one- clear your cache, and now we are all good to go. So if you don’t know how to add this code easily to your theme, there is another way. Just go to ‘Plugins’, go to ‘Add new’ and search for Microsoft Clarity. And now you have this one. We press ‘Install now’, you press ‘activate’. Then you press on setup Clarity. And here you only have to do and enter your project ID. Now your project ID can be found just in the page we just left. You just copy this little code, and we go back to WordPress. And we paste in the code that we just got from the Clarity website. Then we press Save Changes. Settings saved and don’t forget to clear your cache. And now we are up and running and Microsoft clarity is running on your website. As you know, I prefer to have the least plugins available on my website. So I am going with the version to add it to our header. But feel free, whatever you want to do. Now you have just installed Microsoft Clarity on your website. Congratulations. It wasn’t that hard.
So the only thing we need to do right now is just to integrate Google Analytics with Microsoft Clarity. So we’re going to press this button and get started. Then you have to choose your account. Choose your Google account, then you press allow. And that’s it!Now your website is connected and you just use this drop down to select your website that you have used with Google Analytics. So now we have connected our website to Google Analytics and let’s go to the dashboard which says “Hey, it may take up to two hours before you see your first results.
So let’s take a look at the dashboard. Well the first thing you notice of the dashboard is that it’s a combination of the Clarity statistics and Google Analytics. So we now have 118 sessions from 108 users because one user can have multiple sessions, they have for average 3.8 pages per session and the scroll depth is 45% so how many do they scroll down on your page. And the engagement of course. Now here is where it starts to get interesting from Microsoft Clarity. We have the ‘Dead clicks’, so how many clicks have been done without a action. And you can see the recordings right there. The ‘Rage clicks’ which is very interesting someone’s just trying to get somewhere and it doesn’t do anything. And we have the ‘Excessive scrolling’. The public pages, we have right there which very interesting, you can see the heatmaps and the recordings of that particular page. And of course the referrers. Now, the next things…. The ‘Quick backs’ is also interesting, this is when people click on your page and quickly click on another page and quickly return to the previous page. So this is very interesting, why are they doing that. Maybe because the page behind that page, didn’t get… didn’t satisfy the information they wanted. And this is somethings from Google Analytics. The browsers and devices the operating systems and countries. Alright, so the first thing you want to do on your dashboard is: you go over here and you’re going to change this filter. Because the last three days is not giving you any much information. Let’s go with last 30 days. In this filter you can change a lot of bunch of things. It’s a very good filter if you want to have insights on rage clicks or dead clicks or scrolling or quickbacks, you can just click them right there and you press the apply and you only see the insights of this particular filter that you have selected. So this is really great. Let’s just go for the last 30 days and press ‘Apply’. Now you can see the total sessions, users, etc. for the last 30 days. The popular pages…. well, AmusementparksUSA.com, it is January. Of course not many people are visiting amusement parks right now. So that’s why you have the low sessions and users. But let’s go to the recordings button right there. Now you have to change your filter back again to the last 30 days because the filter only applied on the dashboard. Alright so now we have a lot of sessions we can just click on and see what happens on your website. However, you don’t want to watch every single recording but because it’s gonna take a lot of time. So we’re gonna press the sort button right there, and we’re going to change the clicks from high to low, because those are the most interesting viewers right there. So let’s use this one. And we can actually see now what is happening on our website, which is pretty awesome. How is this guy navigating throughout the website. As you look at the video you see that something’s when his mouse, pointing right now it is not an error. Those are just generated information by the website, for example the titles that one is a title. And as you can see it’s trying to click on the title but the title, isn’t a link right now. So, that’s a thing that I have to notice that people are trying to click on titles but they can’t, so we’re going to fix that on the website. Now what you see right here is the pause button on the recording session, and this button is very important: ‘Skip inactivity for the user’. Because sometimes users are just visiting your website and they are just doing nothing with their mouse, they’re just reading your page. So we can just skip this inactivity, or we can’t do that, you can toggle the switch right there. So let’s take a look what happens when there is inactivity. It just pops over to there you see? It just pops on and the user just continues browsing the website. The recordings are very nice but the most important thing is: what are you going to do with that information? So for example, as we see right now the user is clicking on the length of ‘Formula Rossa’ – it’s the world’s fastest roller coaster in the world. So maybe expects another page and when you click on that link, you go do the tallest or the longest roller coaster in the world. We have pages about that, so it’s a very good one to change the titles that he wants to click on, and also the length, duration, heigt, maximum speed through all the landing pages are created about that specific subject. So here you go, I have learned – only by watching this recording – I have learned a couple of things that people are some times trying to click on those things. So I can change that so that people stay longer on the website, and maybe they go convert. Alright, so those are the recordings let’s head back to – let’s go to the heatmaps.
Allright so if you go to heatmaps, what you will see is that it will the visited URL right from the recordings page. So we’re going to change this because I want to see all of them. So we press the asteric. ‘Get results’ that start with your entry and we press filter. We’re going to do it the last 30 days, and we want to have at least five clicks and we press ‘apply’. So, let’s see what happens on mobile. We have nine elements on the website. Oh this looks hideous! Is this really my website on mobile? Well then I really have to change this thing! I will investigate later. So let’s see where those heat maps are. As you can see I can scroll down the entire page but it’s a pretty long page. So what I’m going to do: I’m going to press these buttons right there. Ranked by most clicks. And you can see that people are clicking, of course, on the YouTube elements. And the first one. Well, it’s only two clicks – so this really doesn’t give us a very great idea about the clicks on this website so what I would like to see is: I would like to have a lot of more data on this particular website. Just one more thing guys, if you see this on your heatmaps, you’ll notice that the page has not generated any CSS. So Microsoft Clarity just didn’t pick up your CSS. I’ve talked to Microsoft and they told me that they’re working on a fix right now to make this work on every single WordPress website. That’s basically it! If you have questions, put them in the comments and I’ll be glad to answer them. Feel free to subscribe if you want to see more WordPress related videos. So, I’ll see you next time!
