?? Advanced Hotjar Setup: Track Dynamic Elements & SPAs Like a Pro! ??

Hotjar is an excellent tool for user behavior analysis, but its default tracking can struggle with SPAs (Single-Page Applications) and dynamic elements. Since SPAs load content dynamically without full page reloads, standard tracking setups often fail to record critical interactions, causing data gaps in heatmaps, session recordings, and event tracking.

This guide will provide an advanced setup to:

• Ensure accurate tracking of dynamic content
• Capture heatmaps and session recordings in SPAs
• Use JavaScript API for better event tracking

1. Understanding Hotjar's SPA & Dynamic Content Tracking Challenges

Hotjar typically initializes when the page first loads. However, SPAs dynamically update the content without refreshing the page. This can lead to:

? Heatmap misalignment – Elements may change position dynamically.

? Missing session recordings – Since Hotjar only loads on page load, interactions on new virtual pages may be lost.

? Broken event tracking – Clicking on dynamically inserted elements may not be recorded properly.

To resolve these issues, we must manually trigger Hotjar's tracking functions to ensure it recognizes new page states and elements.

2. Enabling SPA Support in Hotjar

Since SPAs do not reload the page, you need to manually trigger Hotjar's hj function to reinitialize page tracking when virtual page changes occur.

Solution: Using hj('stateChange') for Virtual Pageviews

Hotjar provides a built-in method to detect SPA state changes:

window.Hotjar = window.Hotjar || function() { (window.Hotjar.q = window.Hotjar.q || []).push(arguments); };

function trackSPA() {
  if (window.hj) {
    hj('stateChange', window.location.pathname);
  }
}

// Example: Trigger on history state change (for SPAs using History API)
window.addEventListener('popstate', trackSPA);
window.addEventListener('pushstate', trackSPA);
window.addEventListener('replacestate', trackSPA);
        

?? How This Works:

• This script listens for popstate, pushstate, and replacestate events—used by SPAs to navigate pages.
• Every time a virtual page changes, hj('stateChange') is called to notify Hotjar of the new URL.
• This ensures session recordings and heatmaps track correctly per virtual page.

3. Tracking Dynamic Elements & User Interactions

Hotjar does not automatically detect dynamically injected elements. You must manually trigger event tracking for clicks, form inputs, and other actions on these elements.

Solution: Using Hotjar's hj('event') API for Dynamic Interactions

To track interactions with dynamically generated elements:

document.addEventListener('click', function(event) {
    let target = event.target.closest('.dynamic-button'); // Adjust selector as needed
    if (target) {
        hj('event', 'Dynamic Button Click');
    }
});
        

?? How This Works:

• It listens for clicks on elements with the .dynamic-button class (or any custom selector).
• When clicked, hj('event', 'Dynamic Button Click') logs the interaction in Hotjar.
• You can now filter session recordings and create heatmaps based on this event.

Other Useful Dynamic Event Examples:

Track Form Submissions (AJAX Forms)

document.addEventListener('submit', function(event) {
    if (event.target.matches('.dynamic-form')) {
        hj('event', 'Form Submitted');
    }
});        

Track Hover Interactions (For Tooltips, Dropdowns)

document.addEventListener('mouseover', function(event) {
    if (event.target.matches('.tooltip-trigger')) {
        hj('event', 'Hovered Tooltip');
    }
});
        

4. Enhancing Heatmaps for SPAs & Dynamic Pages

By default, Hotjar assigns heatmaps to the URL at the time of page load. However, in SPAs, multiple views may exist under the same URL.

Solution: Dynamically Assign Heatmap Views Using Custom Attributes

For dynamic pages, assign a unique attribute to elements so Hotjar can track them correctly:

document.body.setAttribute('data-hj-page', window.location.pathname);
hj('stateChange', window.location.pathname);        

This ensures that Hotjar recognizes different states within the same URL for more accurate heatmaps.

?? Alternative Approach: Inject data-hj-include on Key Elements

<div data-hj-include>
    <!-- Hotjar will always track this area -->
</div>        

This forces Hotjar to always track the section regardless of URL changes.

5. Debugging & Validating Your Setup

Check If Hotjar is Tracking Events

Run the following in the browser console:

hj('debug', true);        

You’ll start seeing debug messages confirming events and state changes.

Test Event Tracking

1. Click dynamic elements and check Hotjar’s Event Insights
2. Use browser DevTools (Network > Fetch/XHR) to ensure events are being sent.

Validate Heatmaps

1. Go to Hotjar > Heatmaps > Inspect Click Data
2. Change virtual pages and verify if heatmaps update dynamically.

6. Automating Hotjar Tagging in Google Tag Manager (GTM)

For a no-code SPA implementation, use GTM to fire Hotjar state changes and event tracking.

Trigger: History Change Listener (for SPAs)

1. In GTM, create a new trigger:

• Trigger Type: "History Change"
• Fire on all changes

2. Tag: Hotjar Virtual Page Tracking

• Create a Custom HTML Tag with:

<script>
  hj('stateChange', '{{Page Path}}');
</script>
        

• Trigger on History Change

Tag: Hotjar Event Tracking (for Clicks)

• Create a Click Trigger for dynamic elements
• Create a Custom HTML Tag with:

<script>
  hj('stateChange', '{{Page Path}}');
</script>
        

• Attach trigger to CTA Clicks

Now, Hotjar will automatically track dynamic content changes without modifying site code!

Final Thoughts

By default, Hotjar struggles with SPAs and dynamic elements, but with the advanced tracking techniques above, you can:

? Ensure session recordings accurately reflect virtual page changes

? Track dynamically inserted elements using event listeners

? Enhance heatmaps for SPAs by manually setting page states

? Automate tracking with GTM for a scalable setup

This setup allows you to fully leverage Hotjar for deep behavioral insights—even on modern JavaScript-heavy websites! ??

Would you like additional custom JavaScript snippets or GTM-ready templates for this setup? Let me know! ??

I’m passionate about empowering organizations with data-driven decision-making while respecting user privacy.

Here’s how you can connect with me or view my work:

Upwork Profile: Upwork

Freelancer Profile: Freelancer

My Blog on GTM & Website Analytics: Google Tag Manager Solution

If you or someone in your network is looking for an experienced professional in this space, I’d love to connect and chat further!