How to Connect Hotjar to GA4: Step‑by‑Step Event Integration Guide

Introduction

Understanding user behavior is the cornerstone of any data‑driven digital strategy. Hotjar gives you heatmaps, session recordings, and feedback tools, while Google Analytics 4 (GA4) provides the robust event‑based analytics platform that marketers and product teams rely on. Linking the two lets you see qualitative insights alongside quantitative data in one place, creating a richer picture of why users act the way they do.

In this guide we’ll walk through the entire Hotjar‑to‑GA4 event integration – from setting up the required tags to verifying that your custom events fire correctly. No prior Tag Manager experience is required; beginners can follow along, and intermediate users will appreciate the detailed troubleshooting tips.

Why Integrate Hotjar with GA4?

• Combine heatmaps and recordings with event data to answer the "how" and "why" of user actions.
• Automate funnel analysis by sending Hotjar‑triggered events (e.g., clicks on a CTA) directly to GA4.
• Reduce manual reporting – once events are in GA4 you can use its exploration tools, audiences, and conversions.

Prerequisites

1. GA4 property already created.
2. Hotjar tracking code installed on your site.
3. Google Tag Manager (GTM) account (recommended for a clean implementation).

Step‑by‑Step Integration

1. Add Hotjar to GTM (if not already done)

Creating a dedicated tag ensures you can fire Hotjar only on the pages you choose.

1. Go to Tags → New → Tag Configuration → Custom HTML.
2. Paste the Hotjar script provided in your Hotjar dashboard.
3. Set the trigger to All Pages (or a specific page group).
4. Save and publish.

2. Create a Data Layer Variable for Hotjar Events

Hotjar can push an event to the dataLayer using hj('event', 'eventName'). We’ll capture this name in GTM.

window.dataLayer = window.dataLayer || []; window.hj = window.hj || function(){   (window.hj.q = window.hj.q || []).push(arguments); };  hj('event', 'button_click'); // example 

In GTM:

• Variables → New → Variable Configuration → Data Layer Variable.
• Name it dlv - Hotjar Event and set the Data Layer Variable Name to event.

3. Build a GA4 Event Tag

Now we’ll send the captured Hotjar event to GA4.

1. Tags → New → Tag Configuration → Google Analytics: GA4 Event.
2. Select your GA4 Configuration tag.
3. Enter an Event Name. Use the variable so the same tag works for every Hotjar event: {{dlv - Hotjar Event}}.
4. Optional: add parameters (e.g., page_path, event_category) for deeper analysis.
5. Trigger → New → Trigger Configuration → Custom Event.
   • Event name: hotjarEvent (you’ll push this name from Hotjar – see next step).
6. Save and submit.

4. Push Events from Hotjar to the Data Layer

Use Hotjar’s hj('trigger', 'eventName') method in your site’s JavaScript wherever you want an event recorded.

// Example: a CTA button click document.querySelector('.cta-button').addEventListener('click', function() {   // Send to Hotjar for internal analysis   hj('trigger', 'cta_click');   // Push to GTM so GA4 receives it   window.dataLayer.push({     event: 'hotjarEvent',     event: 'cta_click' // matches the Data Layer Variable name   }); }); 

Repeat this snippet for each interaction you want to track (form submissions, video plays, accordion expands, etc.).

5. Verify the Integration

• Use Preview mode in GTM to confirm the custom event fires and the GA4 tag triggers.
• In GA4, go to DebugView (under Configure → DebugView) and watch the event appear in real time.
• After 24‑48 hours, check the Events report to see the aggregated data.

Troubleshooting Common Issues

Problem	Solution
No events in GA4	Make sure the GTM container is published and the custom trigger name matches exactly (case‑sensitive).
Duplicate events	Verify you’re not pushing the same event twice – remove any extra dataLayer.push calls.
Event name appears as “undefined”	Check the Data Layer Variable name; it must be set to event (or the exact key you push).

FAQ

Do I need a paid Hotjar plan?

No. The free plan allows basic event triggering. Advanced recordings and heatmaps are optional.

Can I send multiple Hotjar events with one GTM tag?

Yes. By using the Data Layer Variable for the event name, a single GA4 Event tag can handle any number of Hotjar events.

Is there a limit to how many events I can send to GA4?

GA4 supports up to 500 custom events per property per day for most accounts – ample for typical website tracking.

Will this affect page load speed?

The added dataLayer.push calls are lightweight. The main impact is the initial Hotjar script, which is already present.

Conclusion & Call to Action

Integrating Hotjar with GA4 transforms raw clicks and scrolls into actionable insights that live side‑by‑side with your quantitative analytics. Follow the steps above, test thoroughly, and start building audiences and conversion events that truly reflect user intent.

Ready to level up your analytics? Implement the Hotjar‑GA4 bridge today and download our free GA4 Event Mapping Checklist to keep your implementation on track.