{"id":233,"date":"2020-12-05T20:40:16","date_gmt":"2020-12-05T20:40:16","guid":{"rendered":"https:\/\/conversionchris.com\/?p=233"},"modified":"2021-10-24T21:07:58","modified_gmt":"2021-10-24T21:07:58","slug":"how-to-install-hotjar-on-your-website","status":"publish","type":"post","link":"https:\/\/conversionchris.com\/how-to-install-hotjar-on-your-website\/","title":{"rendered":"A Simple Guide To Installing Hotjar On Your Website"},"content":{"rendered":"\n<h2>What is hotjar?<\/h2>\n\n\n\n<p>Hotjar is a website heatmaps and behavior analytics tool. It helps you to see how visitors are using your website.<\/p>\n\n\n\n<p>The main functions of Hotjar are&nbsp;<\/p>\n\n\n\n<ul><li>user sessions recording,&nbsp;<\/li><li>creating heatmaps&nbsp;<\/li><li>creating clickmaps<\/li><li>feedback surveys<\/li><\/ul>\n\n\n\n<p>Each of these has a different objective and can work as separately as a single analysis tool but give best results when mixed and used together.<\/p>\n\n\n\n<p>At the time of writing this article, Hotjar has notified that funnels and form tracking will be retired by 14 December 2020. This is a shame, since funnels those were crucial functions for power users. On the other hand there are some alternatives that we can use to get the same result.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2>Will Hotjar work on my website?<\/h2>\n\n\n\n<p>From the technical point of view the only requirement is that your website needs to support JavaScript. This means Hotjar will not work on AMP.&nbsp;<\/p>\n\n\n\n<p>Apart from this, there are no other requirements in particular.<\/p>\n\n\n\n<h2>How to install Hotjar manually (static code) ?<\/h2>\n\n\n\n<ol><li>Go to your hotjar dashboard, find the code snippet and copy it.\\<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/C1r6Q5vlbSdhE0YNsXd_l-3ma9Zdg5OmLSZ_hP7q6Zmz6BOJnYXAqlwzGQM_-7IKjVaoAcJdrGKROW9Smu6L04_MiAttbmTFoXlxRMK2iREabWbG4Cc_FPe312zXn7xnb-Ze2lz3\" alt=\"\"\/><\/figure>\n\n\n\n<ol start=\"2\"><li>Go into your code editor and find the head section. Paste the code snippet before the &lt;\/head&gt; tag. For example in wordpress you can go to the header.php file and find drop the code before the end of the head tag.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/p6W6XQqQDQW0js_grJqgcrOPuUOdxX2LVBDkRCbfaH1AlWEc16zbXVPt6XzddVTu7QOKnvxP7gOQVnXtTquCFygrFBEGMohgyq7hP_IGe1-EzynF6MkXfIjuXA7avGmRlqnnXcfJ\" alt=\"\"\/><\/figure>\n\n\n\n<ol start=\"3\"><li>Ready! Now we can see if it works.<\/li><\/ol>\n\n\n\n        <div class=\"ml-form-embed\"\n             data-account=\"3027247:x8q6y7n3n5\"\n             data-form=\"3812338:g9l8k0\">\n        <\/div>\n\n\n\n\n\n<h2>How to install Hotjar with Google Tag Manager?<\/h2>\n\n\n\n<ol><li>The first step is to copy the Hotjar code ID.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/MWgHpO3Xgxcvr-FJ08kD5LKvXiFALTo6SRvqEcfZ0HmJK1w9QKNFCGrJSkFjJ-JcxDaMak7TzoENOVWw6k-oORR7so8vGJ9FBYM_EibUc7qxKP1LxM3q021QTUJtNf4qEXq3cTW0\" alt=\"\"\/><\/figure>\n\n\n\n<ol start=\"2\"><li>Then go to your Google Tag Manager &gt; Tags section and click add Tag.<\/li><li>Find the hotjar template<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/6_PDrsiUObzdnMTvFXbouP4W-OPRT6v5o5dg8OrXVO-8o5ogEJ9VnfEj7Uv0h4c7ZdmF-u8gjrA1IJiOZoP67PeOrFNTDfpBmrm5rja6BPYntLFnfSsaQDje3f3SM2fig6wcPeLj\" alt=\"\"\/><\/figure>\n\n\n\n<ol start=\"4\"><li>Add your site ID and for the trigger please select \u201call pages\u201d.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/82qcfrBpzPZpbSH7_1SugP7qa2aavPwEqshjeEe9i3qZsYvVQsG5xSfUxbevCVt_nO3ilBUZKOGrqmqSoYnyt1IQtU03yQKzTDU3KmJR2CnndMIJ5x6ZdOop9bJh8h2HMNLnYzTe\" alt=\"\"\/><\/figure>\n\n\n\n<ol start=\"5\"><li>Publish the container.<\/li><li>Add all the heatmaps you need and want inside Hotjar\u2019s inference.<\/li><\/ol>\n\n\n\n<h2>How to install Hotjar on a Single Page Application website (for example React website) ?<\/h2>\n\n\n\n<p>With SPA (single page applications) the installation process is a bit different. We need to use the stateChange function instead of a standard pageView. In the default configuration, Hotjar is loaded with every page reload. On the other hand, web frameworks like React don\u2019t refresh the whole page, but they use VirtualDOM events to refresh only a section of the page. Thanks to this the website is faster, but it\u2019s a bit trickier to trigger tracking events.&nbsp;<\/p>\n\n\n\n<p>To track SPA we need to create a stateChange event that Hotjar will detect and tell the script \u201cthis should be treated as a new page\u201d.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nhj('stateChange', '{{PathName}}');\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p><strong>PathName <\/strong>&#8211; is a fragment that you want to send to Hotjar. This can be anything like \u201cThank-you\u201d \/\/ string<\/p>\n\n\n\n<p>To start tracking your SPA application please these steps:<br><\/p>\n\n\n\n<ol><li>First of all go to the your Hotjar\u2019s account Sites &amp; Organizations &gt; Site settings and change the tracking URL changes to track fragments:<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/lHEn7l2Pj-Y21lL9yAQopYtMmtyyNVh3BW6HXoU-ecJbb8KK5bugfw2ZF-U2BNMiOhgVtDznRsBGx7WajaFLpRjBYq1mTPo2p6fnD4DzGYQ_Bp5XvwPdGCAv0hYkDle2sGjYtkiY\" alt=\"\"\/><\/figure>\n\n\n\n<ol start=\"2\"><li>Whenever you want to signal a URL change to hotjar please execute the code below. This will send the information of a custom Page Path to Hotjar.<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nhj('stateChange', '{{PathName}}');\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h2>How to use Javascript triggers for Hotjar heatmap tracking?<\/h2>\n\n\n\n<p>Hotjar gives you the option of using Javascript triggers. This is useful when your website has an unconventional structure or you are doing A\/B tests. Using Google Tag Manager and triggers can take the load off your IT department.&nbsp;<\/p>\n\n\n\n<p>One of my clients wanted to get an overall heatmap for similar product pages but there was a problem with his URL structure. To make this happen I used JavaScript triggers to fire when the user entered the product page. In the end a very big issue was resolved in 5 minutes.<\/p>\n\n\n\n<p>To enable a trigger please select a <strong>Custom HTML <\/strong>tag in Google Tag Manager and use the code below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nhj('trigger', '{{triggerName}}\u2019);\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p><strong>triggerName &#8211; <\/strong>The name of your trigger. It can be anything for example \u201cproductPage\u201d \/\/ string<\/p>\n\n\n\n<h2>Checking if Hotjar is installed properly?<\/h2>\n\n\n\n<p>The easy option is to use the Verify installation button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/06lqwbMCzc8NnfkYVynlNHkX1SgI1vUBrfMJVPe8APIUErnZZXX7Od9fgUOupuHaXrHTm2l4mHw4FvvLDPMIgDZYTmBG8OBfWpSSo1XRbQkSlyGeH7_Vazd1BDe7Y-HSXy6pbOeJ\" alt=\"\"\/><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/lh5.googleusercontent.com\/IKASxTSouScoTAKTolrjSToJy_W2rpix02ZybczqeOw-H6vmit_W9J3eTLXNnvg3W7DkRjFlCGS3RI19Aqt6O92zessfxg8XCLIG1xE2_pa6W6SSTYQCUVw0oGM4V6nNAJrlicQb\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p>Another way to verify if Hotjar\u2019s code is triggering correctly is using the inspect tool in chrome. Go to Inspect-&gt;Network, in the search bar please type \u201chotjar\u201d and refresh the page. You should be able to see Hotjar\u2019s snippet triggering and sending data.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/lh3.googleusercontent.com\/MvS0pZePqRx2AvmAbAZZ7TPrUowsRvswgMXVnmEdGXEXmyVZfelZZtLx0dcYdgL0b_AsOBE9I0oyoGeNNRTC247qxvSd8Su-LIdl--JeVsc3uUQQp371zDfC9oW5q2aG0RiL6eWn\" alt=\"\"\/><\/figure><\/div>\n\n\n\n        <div class=\"ml-form-embed\"\n             data-account=\"3027247:x8q6y7n3n5\"\n             data-form=\"3812338:g9l8k0\">\n        <\/div>\n\n\n\n\n\n<h2>Bringing It All Together<\/h2>\n\n\n\n<p>Hotjar is an extremely useful tool for improving your website. The installation is easy but can be tricky at times. There are tons of resources if you get stuck. In particular I recommend <a href=\"https:\/\/help.hotjar.com\/hc\/en-us\/categories\/115001808227\" target=\"_blank\" rel=\"noopener\">Hotjar\u2019s installation documentation<\/a>, but if this still is not enough don&#8217;t hesitate to drop me a message.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is hotjar? Hotjar is a website heatmaps and behavior analytics tool. It helps you to see how visitors are using your website. The main functions of Hotjar are&nbsp; user sessions recording,&nbsp; creating heatmaps&nbsp; creating clickmaps feedback surveys Each of these has a different objective and can work as separately as a single analysis tool&#8230;<\/p>\n","protected":false},"author":1,"featured_media":239,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[67],"tags":[],"_links":{"self":[{"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/posts\/233"}],"collection":[{"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":1,"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"predecessor-version":[{"id":485,"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/posts\/233\/revisions\/485"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/media\/239"}],"wp:attachment":[{"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/conversionchris.com\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}