If you haven’t already heard about Hotjar, you should really take a look at it. The tool doesn’t only allow you to create heatmaps, but allows you to view things as scroll depth, create funnels and ask your visitor questions. And it also allows you to view recordings of visits to your pages, which is a feature I really love.

And since Hotjar requires you to add its script on the page, why not do it via Google Tag Manager? That is really the purpose of using a tag management system, right?

Once you have your account setup, you will get a tracking code that looks like the one below that you need to insert on all pages on your domain.

[javascript]<script>
(function(f,b){
var c;
f.hj=f.hj||function(){(f.hj.q=f.hj.q||[]).push(arguments)};
f._hjSettings={hjid:XXXXX, hjsv:3};
c=b.createElement(“script”);c.async=1;
c.src=”//static.hotjar.com/c/hotjar-XXXXX.js?sv=3″;
b.getElementsByTagName(“head”)[0].appendChild(c);
})(window,document);
</script>[/javascript]

Only change being that XXXXX above should have your specific ID instead.

Setting up Hotjar & Google Tag Manager

This is really a very straight forward thing, but I still get a few questions about it so I thought that I might as well write it down. Since Hotjar isn’t available as a Template in Google Tag Manager we have to use the Custom HTML tag, which really is all there’s to it.

Hotjar Custom HTML Tag Google Tag Manager

Start by creating a new Custom HTML tag and give it a proper name, such as Hotjar Tracking Code or more specific such as HTML – Hotjar Tracking Code.

Then just copy your entire code snippet into the HTML section of the Tag, including the <script></script> tags.

Then make sure that you select to fire the tag on All Pages, so that you have the possibility to configure Hotjar to be used on any given page inside its interface.

That’s it, no more to it. A short post this time, it seems.

Tell your friends...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0