How to set up Hotjar with Cookiequiet

What does Hotjar store in the visitor's browser?

Hotjar's documentation lists the cookies and storage items its tracking code uses, all first-party because the script runs on your domain. Among them:

Test cookies (_hjCookieTest, _hjLocalStorageTest, _hjSessionStorageTest, _hjTLDTest) are removed right after they are set. Hotjar sets its cookies on the top-level domain, so they cover every subdomain, and the documentation says this cannot be limited to one subdomain.

Beyond cookies, Hotjar collects what heatmaps and recordings need: clicks, scrolls, mouse movement and page content. Hotjar does not classify its cookies for you: its documentation tells site owners to ask their own counsel how to classify them and whether to use a consent tool. In Cookiequiet, Hotjar sits in the analytics category, and the scanner names it when it finds the tracking code.

How do I load Hotjar only after consent?

Option 1: mark the tracking code. Hotjar recommends placing the code in the head of every page, through your site template. Put it right after the Cookiequiet snippet and change only the opening tag:

html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
<script type="text/plain" data-cq-category="analytics">
  /* Hotjar Tracking Code from your Sites page, unchanged */
</script>

Cookiequiet runs it when analytics is granted: at once on later visits where the stored choice includes it, and at the moment of the click when the visitor accepts during the visit. Until then nothing loads from Hotjar and no _hj cookie is set. Only one Hotjar tracking code can run on a page, so remove any copy a plugin or platform setting adds. The guide on blocking scripts covers the markup in more detail.

Option 2: Google Tag Manager. Hotjar documents three ways to install through Tag Manager; the Hotjar Tracking Code tag from the template list is the simplest to put behind consent. Give it a Custom Event trigger on cq_consent, Some Custom Events, with the condition cq_analytics equals true, and set Tag firing options to Once per page: Cookiequiet pushes cq_consent on every page load where a choice is stored and after each choice. You can also add analytics_storage under Require additional consent for tag to fire, which Cookiequiet grants with the analytics category. The Google Tag Manager guide sets up the variables.

Option 3: the npm package. In an app that uses @hotjar/browser, call its init function only once analytics is granted, for example in a listener for the cq:consent event that Cookiequiet dispatches on window with the granted categories in detail.categories.

The auto-blocker also lists Hotjar's script host under analytics, so a copy injected by a plugin or a tag manager is held until consent. A tracking code hard-coded in the HTML without marking runs before Cookiequiet can stop it.

Does Hotjar have its own consent API?

Hotjar's tracking code documentation describes no consent command. The hj() function takes calls such as identify, event and stateChange, none of which pauses collection. The way to respect a refusal is not to load the script. For visitors, Hotjar runs a Do Not Track page where anyone can ask Hotjar to stop processing their data on every site that uses it.

What about single-page apps?

Hotjar detects URL changes in single-page apps by default, so it should load once per full page load, not on each route. Its Tag Manager guide warns that history-change triggers conflict with that detection. A cq_consent trigger fires on full loads and on choices, which matches. If you send hj('stateChange', url) manually, guard it with the same consent check. The framework guides, such as React, show how to read the choice in components.

EU-specific points

• Session recordings capture what visitors see on the page. Hotjar suppresses keystroke data by default and lets you suppress text, images and other elements with its suppression settings; review them before collecting data, because suppression happens in the browser and cannot be applied after a session is sent.
• _hjSessionUser lasts 365 days. The cookie table in your banner and your cookie policy should list it with that lifetime, which the scanner fills in.
• Identify API attributes are personal data about logged-in users. Send them only after consent, and mention Hotjar as a processor in your privacy policy.

How do I test it?

1. Open the site in a private window and click Reject all. In the developer tools, no cookie starting with _hj exists and the network tab shows no request to Hotjar.
2. Clear the cookies, click Accept all, reload: _hjSessionUser_ and _hjSession_ appear.
3. In Hotjar, the Sites page confirms the installation after a visit.
4. Check the consent log in the Cookiequiet dashboard.

Cookiequiet is free for one website with geo-targeting; Starter is €3 per website per month with unlimited pageviews.