What is Hotjar

A tool for analysing user behaviour on websites. Heatmaps, session recordings, funnels and surveys help you understand how users interact with your website.

Cookie category

Hotjar belongs to the analytics category.

Installation with Consentio

Add the Hotjar tracking code with type="text/plain" and data-category="analytics" attributes, so it only loads after analytics consent is granted:

<!-- Hotjar - blocked until analytics consent -->
<script type="text/plain" data-category="analytics">
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

JavaScript API alternative

Dynamically load Hotjar after consent is granted:

Consentio.onConsentChange((consent) => {
  if (consent.analytics) {
    // Load Hotjar
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  }
})

Integration via GTM

In Google Tag Manager, add a Hotjar tag with a consent requirement for analytics_storage. Hotjar is available as a community template in the GTM Template Gallery.

Google Consent Mode v2

Verification

1. Open DevTools (F12)
2. Before consent: the Hotjar script should not load
3. Grant analytics consent
4. Verify in the Network tab that the Hotjar script has loaded
5. Check in Hotjar dashboard → Sites → verify installation