Get Better Insights About Your Hashnode Blog With Hotjar
The Hashnode team is shipping features almost weekly. Since I have started blogging on Hashnode, they have released lots of features such as:
- integrations with Fathom/Plausible analytics, Hotjar and so on
- disabling comments
- custom CSS styling
However, for the purpose of this article, we are interested in the integrations with Hotjar. More about Hotjar in the next section.
What is Hotjar
According to Wikipedia, "Hotjar is a behaviour analytics company that analyses website use, providing feedback through tools such as heatmaps, session recordings, and surveys".
In other words, it allows us to see how the readers are using our blog. That is, where do they click, what they visit, what their behaviour is, and many more. For example, we can use such data to decide where to place our newsletter in the blog to maximise the number of sign-ups. Hotjar is a useful tool, and you can read more here about it and why you should use it.
How to integrate it with Hashnode
The first step is to create an account on the Hotjar website. Go on hotjar.com and make the account. The process is straightforward, so I am not explaining it in the article.
After you successfully register your account, you should get the following screen:
As shown in figure 1, click on the second tab saying "Install on your platform", and copy the "Site ID". You need the site id to add it to your Hashnode blog. Once you have the id, go to your Hashnode blog settings, to the "Integrations" tab. There you should have an option for Hotjar, where you can add the id.
Figure 2 illustrates where you should be, and where you should add the site id from Hotjar. Afterwards, save the changes and go back to the Hotjar website. Enter the correct URL of your blog, and click the button saying "Verify installation". Figure 3 illustrates what you should see on the Hotjar website.
At this point, your Hashnode blog should have Hotjar integrated. In the next section, you can see the basic uses of Hotjar with my blog.
How I use Hotjar
I use Hotjar to see how users behave on my blog. Figure 4, below, illustrates the percentage of mobile users that scroll on my blog. For instance, we can see that 75% of mobile users scroll past the header. The more you go down, the lower the percentage. The reason is that not many people scrolls to the bottom of the blog. However, all of them see the header of the blog.
Another example is the movement of people on desktop devices. In figure 5, you can see that most of the people clicked on the latest article. That is the only red area in the image. Also, you can see lots of people clicking on the "sign-in" button. Surprisingly, many people click on the description under my name, as well. Making a wild assumption, we can say that adding my newsletter form under my name might convert more sign-ups.
Besides that, I am collecting feedback about my blog. People can use emoji to rate the blog, and they can also send me an email through the form. Figure 6, below, only shows the emojis my blog received. However, there is another tab where you can see the messages you received through the form. Thus, it is a very useful feature to collect feedback from your readers.
Lastly, Hotjar shows you recordings with the behaviour of your blog readers. They are actual videos where you can see what the readers are doing on your blog. That is, what they click on, how they scroll, and so on. In other words, it records their screen, and you can watch it. As they are recordings, I cannot embed them in the article.
In conclusion, Hotjar is a handy tool that can help you improve your blog. You can see the behaviour of your blog readers, and you can collect feedback from them as well.
I used it for a while now, and it helped me draw some conclusions and take action. Feel free to drop questions in the comments.
I write daily web development tips that help you become a more efficient developer. 👨💻⚡️
Ah cool! Didn't know we had this integration. Just make sure you don't leave it on forever, it's quite heavy and blocking to load.
Use if for like 1/2 weeks and remove it after implementing changes.