Hotjar Integrations | Blue Frog Docs

Hotjar Integrations

Integration options for connecting Hotjar with Google Tag Manager, Segment, HubSpot, Slack, and other tools.

Hotjar Integrations

Integration Overview

Hotjar integrates with a wide range of tools to extend its functionality and embed user insights into your existing workflows. Whether you're deploying Hotjar via Google Tag Manager, syncing data with Segment, or sending notifications to Slack, these integrations help you get more value from behavior analytics.

Integrations fall into three main categories:

  1. Deployment & Data Collection: GTM, Segment, custom implementations
  2. Data Activation: CRMs, marketing automation, support tools
  3. Collaboration & Notifications: Slack, Microsoft Teams, project management tools

Deployment Integrations

Google Tag Manager (GTM)

Google Tag Manager is the most popular way to deploy Hotjar without touching production code.

Benefits

  • Deploy and update Hotjar without developer involvement
  • Version control for tracking changes
  • Test in preview mode before publishing
  • Manage multiple tracking tools in one place
  • Trigger Hotjar based on GTM variables and events

Setup Instructions

Step 1: Create Hotjar Tag

  1. In GTM, go to Tags > New
  2. Click Tag Configuration > Custom HTML
  3. Paste your Hotjar tracking code:
<!-- Hotjar Tracking Code -->
<script>
  (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>
  1. Replace YOUR_HOTJAR_ID with your Hotjar Site ID

Step 2: Configure Trigger

  1. Under Triggering, select All Pages
  2. Optionally, exclude pages using URL or Page Path conditions

Step 3: Publish

  1. Click Save
  2. Submit changes with a descriptive version name
  3. Click Publish

Advanced: Conditional Loading

Load Hotjar only on specific pages or for specific users:

<script>
  // Only load on product pages
  if (window.location.pathname.includes('/products/')) {
    (function(h,o,t,j,a,r){
      // Hotjar code here
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  }
</script>

Or use GTM's built-in triggers:

  • Trigger Type: Page View
  • This trigger fires on: Some Page Views
  • Page Path contains: /checkout

Sending Events via GTM

Use GTM to trigger Hotjar events from your data layer:

Data Layer Push:

dataLayer.push({
  'event': 'userAction',
  'actionType': 'signup',
  'actionLabel': 'header_cta'
});

GTM Custom HTML Tag:

<script>
  hj('event', {{actionLabel}});
</script>

Trigger: Custom Event matching userAction

Segment

Segment is a customer data platform that unifies tracking across tools.

Benefits

  • Single codebase for all analytics tools
  • Consistent event tracking across platforms
  • Easy to add or remove tools without code changes
  • Historical data replay when adding Hotjar
  • Centralized data governance

Setup Instructions

Step 1: Enable Hotjar in Segment

  1. Log in to Segment
  2. Go to Destinations > Add Destination
  3. Search for "Hotjar" and select it
  4. Click Configure Hotjar
  5. Select the source(s) to connect
  6. Enter your Hotjar Site ID

Step 2: Map Events

Segment automatically forwards:

  • Page views → Hotjar page tracking
  • Identify calls → Hotjar Identify API
  • Track events → Hotjar custom events

Example Segment implementation:

// Page view
analytics.page('Homepage');

// Identify user
analytics.identify('user123', {
  email: 'user@example.com',
  plan: 'premium',
  signup_date: '2024-01-15'
});

// Track event
analytics.track('Button Clicked', {
  button_name: 'signup_cta',
  location: 'homepage_hero'
});

These automatically translate to Hotjar:

// Equivalent Hotjar calls
hj('stateChange', '/homepage');
hj('identify', 'user123', {
  email: 'user@example.com',
  plan: 'premium',
  signup_date: '2024-01-15'
});
hj('event', 'Button Clicked');

Event Mapping

Segment event properties aren't passed to Hotjar (since Hotjar doesn't support event properties). Use descriptive event names instead:

// Instead of:
analytics.track('Button Clicked', { button_name: 'signup' });

// Use specific event names:
analytics.track('Signup Button Clicked');

Limitations

  • Event properties are not forwarded to Hotjar
  • Some Segment destinations may cause conflicts if they also load Hotjar
  • Data replay doesn't retroactively create recordings (only events are logged)

CRM & Marketing Automation

HubSpot

Connect Hotjar to HubSpot to enrich contact records with behavior insights.

What Gets Synced

  • Hotjar recordings linked to HubSpot contacts
  • User feedback and survey responses
  • Event tracking data tied to contact timeline

Setup

  1. In Hotjar, go to Settings > Integrations
  2. Click Connect next to HubSpot
  3. Authenticate with your HubSpot account
  4. Map Hotjar user attributes to HubSpot properties

Use Cases

  • View session recordings directly in HubSpot contact records
  • Segment contacts by Hotjar events (e.g., users who watched product video)
  • Trigger HubSpot workflows based on Hotjar feedback
  • Enrich lead scoring with engagement signals

Example Workflow

  1. User submits a form on your site
  2. Hotjar identifies the user and tracks the session
  3. Recording appears in HubSpot contact record
  4. Sales rep reviews recording before outreach call
  5. Personalized pitch based on observed behavior

Salesforce

While there's no native Hotjar-Salesforce integration, you can connect via middleware tools like Zapier.

Via Zapier

  1. Trigger: New Hotjar response (survey or feedback)
  2. Action: Create/Update Salesforce record
  3. Map Hotjar fields to Salesforce fields

Example: When a user submits negative NPS feedback, create a task for the account manager to follow up.

Intercom

Connect Hotjar with Intercom to link recordings with support conversations.

Setup

  1. Install Intercom on your site
  2. Ensure Hotjar is also installed
  3. Use Intercom's user_id with Hotjar Identify API:
// When user logs in
window.Intercom('boot', {
  user_id: user.id,
  email: user.email
});

hj('identify', user.id, {
  email: user.email,
  plan: user.plan
});

Now when a user reaches out via Intercom, you can search Hotjar recordings by their user ID to see what they experienced.

Collaboration & Notifications

Slack

Get Hotjar notifications in Slack for real-time awareness of user feedback.

What You Can Receive

  • New survey responses
  • Incoming feedback from widgets
  • New recordings matching specific filters
  • Daily/weekly summary reports

Setup

  1. In Hotjar, go to Integrations > Slack
  2. Click Add to Slack
  3. Authorize Hotjar to access your Slack workspace
  4. Choose which notifications to receive and which channel

Example Notifications

Survey Response:

New NPS Survey Response Score: 3/10 Feedback: "Checkout process is too complicated" View Response

Incoming Feedback:

New Feedback Submitted Page: /pricing Message: "Can't find the annual plan option" View Recording

Custom Alerts

Create custom Slack alerts using Zapier:

  1. Trigger: New Hotjar survey response
  2. Filter: Only responses with NPS < 5
  3. Action: Send Slack message to #customer-success

Microsoft Teams

Similar to Slack, you can send Hotjar notifications to Microsoft Teams channels.

Setup

  1. In Hotjar, go to Integrations > Microsoft Teams
  2. Click Connect to Teams
  3. Authenticate and select a channel
  4. Configure notification preferences

Zapier

Zapier enables hundreds of integration possibilities beyond what Hotjar natively supports.

1. New Survey Response → Google Sheets

  • Log all survey responses to a spreadsheet for analysis

2. Negative Feedback → Jira Ticket

  • Automatically create tickets when users report bugs or issues

3. Recording Available → Notion Database

  • Add new recordings to a Notion database for team review

4. User Identifies → Mailchimp Tag

  • Tag users in Mailchimp based on Hotjar identify calls

Example Setup

Trigger: New Hotjar Survey Response (choose survey) Filter: Response contains "bug" or "error" Action 1: Create Slack message in #bug-reports Action 2: Create Trello card in "Bugs" list

Analytics & Data Warehouse Integrations

Google Analytics

While Hotjar doesn't sync data directly to Google Analytics, you can use events to correlate insights.

Parallel Event Tracking

Send the same events to both platforms:

function trackUserAction(eventName) {
  // Hotjar
  hj('event', eventName);

  // Google Analytics
  gtag('event', eventName);
}

// Usage
trackUserAction('signup_completed');

Linking Sessions

Use Google Analytics Client ID with Hotjar Identify:

// Get GA Client ID
gtag('get', 'G-XXXXXXXXX', 'client_id', (clientId) => {
  hj('identify', clientId, {
    ga_client_id: clientId
  });
});

This lets you cross-reference users between GA and Hotjar for deeper analysis.

BigQuery / Data Warehouses

Hotjar doesn't export raw data directly to data warehouses, but you can use their API to pull data programmatically.

Via Hotjar API

  1. Generate API token in Hotjar settings
  2. Use API to fetch recordings, surveys, and feedback
  3. Transform and load into your warehouse

Example (Python):

import requests

headers = {
    'Authorization': 'Bearer YOUR_API_TOKEN'
}

response = requests.get(
    'https://api.hotjar.com/v1/sites/{site_id}/recordings',
    headers=headers
)

recordings = response.json()
# Load into warehouse

WordPress Integration

For WordPress sites, use a plugin or manual code insertion.

Via Plugin

  1. Install Insert Headers and Footers plugin
  2. Go to Settings > Insert Headers and Footers
  3. Paste Hotjar tracking code in the header section
  4. Save changes

Via Theme Functions

// Add to functions.php
function add_hotjar_tracking() {
    ?>
    <!-- Hotjar Tracking Code -->
    <script>
        (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:YOUR_SITE_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>
    <?php
}
add_action('wp_head', 'add_hotjar_tracking');

Shopify Integration

Setup

  1. In Shopify admin, go to Online Store > Themes
  2. Click Actions > Edit code
  3. Open theme.liquid
  4. Paste Hotjar tracking code just before </head>
  5. Save

Tracking E-commerce Events

// Track add to cart
document.querySelectorAll('.add-to-cart').forEach(button => {
  button.addEventListener('click', () => {
    hj('event', 'add_to_cart');
  });
});

// Track checkout initiation
if (window.location.pathname.includes('/checkout')) {
  hj('event', 'checkout_started');
}

// Track purchase (on thank-you page)
if (window.location.pathname.includes('/thank-you')) {
  hj('event', 'purchase_completed');
}

Single Page Application (SPA) Integrations

React

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function useHotjarPageTracking() {
  const location = useLocation();

  useEffect(() => {
    if (window.hj) {
      window.hj('stateChange', location.pathname);
    }
  }, [location]);
}

// In your App component
function App() {
  useHotjarPageTracking();
  return <YourAppContent />;
}

Vue.js

// In your router config
router.afterEach((to) => {
  if (window.hj) {
    window.hj('stateChange', to.path);
  }
});

Angular

import { Router, NavigationEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      if (window['hj']) {
        window['hj']('stateChange', event.urlAfterRedirects);
      }
    }
  });
}

Custom API Integration

For advanced use cases, use Hotjar's API to build custom integrations.

API Capabilities

  • Fetch recordings, surveys, and feedback
  • Retrieve user data and session details
  • Export data for custom reporting
  • Build internal dashboards

Authentication

curl -X GET "https://api.hotjar.com/v1/sites/{site_id}/recordings" \
  -H "Authorization: Bearer YOUR_API_TOKEN"

Example: Daily Slack Digest

const fetch = require('node-fetch');
const { WebClient } = require('@slack/web-api');

async function sendDailyDigest() {
  // Fetch Hotjar data
  const recordings = await fetch(
    'https://api.hotjar.com/v1/sites/SITE_ID/recordings',
    {
      headers: { 'Authorization': 'Bearer API_TOKEN' }
    }
  ).then(r => r.json());

  // Send to Slack
  const slack = new WebClient(SLACK_TOKEN);
  await slack.chat.postMessage({
    channel: '#analytics',
    text: `${recordings.length} new recordings captured today`
  });
}

Integration Best Practices

Do:

  • Test integrations in staging before production
  • Use GTM or Segment for centralized tracking management
  • Document which tools send data to Hotjar and why
  • Monitor integration health with alerts
  • Review data flow quarterly to remove unused integrations

Don't:

  • Load Hotjar multiple times (via GTM and hardcoded)
  • Send PII through integrations without user consent
  • Integrate without understanding data retention policies
  • Forget to update integrations when tools are deprecated
  • Over-engineer: start simple, add complexity only when needed

Troubleshooting Common Integration Issues

Hotjar Not Loading via GTM

  • Check: GTM container is published
  • Check: Hotjar tag fires on All Pages (or intended trigger)
  • Check: No JavaScript errors blocking execution
  • Fix: Use GTM Preview mode to debug

Segment Events Not Appearing in Hotjar

  • Check: Hotjar destination is enabled in Segment
  • Check: Event names are strings (not objects)
  • Check: Hotjar Site ID is correct in Segment settings
  • Fix: Review Segment debugger and Hotjar event logs

User Attributes Not Syncing

  • Check: Identify API is called with correct user ID
  • Check: Attributes match expected format (key-value pairs)
  • Check: Users have consented to tracking
  • Fix: Test identify call in browser console

Slack Notifications Not Sending

  • Check: Slack workspace permissions allow Hotjar
  • Check: Correct channel is selected in Hotjar settings
  • Check: Notification filters aren't excluding all events
  • Fix: Reconnect Hotjar to Slack workspace

Compliance & Security Considerations

  • GDPR: Ensure integrations respect user consent and data deletion requests
  • CCPA: Verify integrations support opt-out mechanisms
  • Data Processing Agreements: Review DPAs for all integrated tools
  • Data Residency: Understand where integrated tools store data
  • Access Controls: Limit integration permissions to necessary scopes

Future Integration Opportunities

Consider exploring integrations with:

  • Customer data platforms (CDP) like mParticle or RudderStack
  • Product analytics tools (Mixpanel, Amplitude) for combined insights
  • A/B testing platforms (Optimizely, VWO) to link tests with recordings
  • Data visualization tools (Tableau, Looker) for custom reporting
  • Support platforms (Zendesk, Freshdesk) for enriched context

Additional Resources:

↑ Back to top
// SYS.FOOTER