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:

  • widgets
  • 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:

Screenshot 2020-10-22 at 17.21.40.png Figure 1

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.

Screenshot 2020-10-22 at 17.26.14.png Figure 2

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.

Screenshot 2020-10-22 at 17.25.20.png Figure 3

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.

Screenshot 2020-10-22 at 17.39.59.png Figure 4

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.

Screenshot 2020-10-22 at 17.40.14.png Figure 5

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.

Screenshot 2020-10-22 at 17.58.16.png Figure 6

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.

Conclusion

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.

Chris Bongers's photo

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.

Joshua Oyewole's photo

Thanks for the article Cat

Tapas Adhikary's photo

Catalin Pit, Thank you for sharing. Followed the steps and integrated them.

Priyanka Yadav's photo

Thank you so much for sharing, very informative!

Victoria Lo's photo

Thanks for sharing such an insightful tool! :)

Sai Laasya Vabilisetty's photo

Awesome!!

Edidiong Asikpo's photo

This is an amazing article Catalin Pit. Thanks for sharing.