How To Track and Measure UX on Your HubSpot Website

You can't optimize what you don't measure. But, how can you measure the user experience on your website—how people reach the pages they land on, where they stop scrolling, where they hover or click the most, and other key usage data?

This is where heat mapping solutions like Hotjar can help.

What Is Heat Mapping Software?

Heat mapping software is a solution that tracks how visitors interact with your website. These solutions typically create a heatmap highlighting where users click and scroll on your web pages.

This software gives you a great understanding of how your visitors interact with your website. You can monitor user interactions and make edits to your site that optimize user experience (UX), streamline the buyer's journey from website visitor to customer, or meet other goals you may have.

For example, is there an image on your site that users frequently click on, but doesn't link to anything? If you see that on a heatmap, you might consider adding a link to the image so that it opens a relevant service or product page when clicked.

Hotjar is one example of a popular heat mapping solution. 

What Is a Heatmap?

A heatmap is a visual representation of where website visitors click on a website page. This map is generated by heat mapping software and is used for analyzing how users interact with a webpage.

Adding Hotjar Tracking Code to Your HubSpot Pages (The Old Method)

So, you're on HubSpot and want to manually add Hotjar to your website. Well, the process is pretty simple! To add Hotjar's tracking code to your HubSpot pages, simply follow these steps:

Step 1: Verify Your HubSpot and Hotjar Access

To add the Hotjar tracking code to your HubSpot pages, you'll need access to edit the header HTML code of the page (or pages) you want to create heat maps of. 

Similarly, you'll need access to your Hotjar account's "Sites page" so you can copy the tracking code.

Step 2: Copy and Paste the Tracking Code

• In HubSpot, go to "Settings" (click the gear icon in the upper right of your main HubSpot nav menu)
• Go to the "Content" dropdown under the "Tools" header in the left nav menu of your Settings
• Click "Pages" from the dropdown menu
• Choose the domain you want to add the tracking code to or select "Default settings for all domains" to add the code to the header HTML for all HubSpot-hosted content
  • To edit the HTML code for a specific page, click "Override default settings" in the "Site Header HTML" or "Site Footer HTML" section
• Copy the Tracking Code from your Hotjar account and paste it into the header HTML code section
• Click "Save" to apply your changes

This will add the tracking code to your domain.

You can also manually add the code to the header or footer of individual pages using the content editor tools in HubSpot. This is most useful when you want to track results for a specific page and don't need heatmaps for the entirety of your site.

Installing the Hotjar Integration for HubSpot (The New Method)

Want to create a two-way sync between your HubSpot and Hotjar accounts? Well, now there's an integration for that! The integration allows users to:

• Watch Hotjar session recordings in your HubSpot contact timeline.
• See survey responses in your HubSpot contact timeline.
• Use Hotjar session properties to create HubSpot lists and trigger automation.

The integration is compatible with the following HubSpot plans:

• Free Tools & CRM. The free HubSpot account.
• Content Hub. Starter, Professional, and Enterprise.
• Marketing Hub. Starter, Professional, and Enterprise.
• Operations Hub. Starter, Professional, and Enterprise.
• Sales Hub. Starter, Professional, and Enterprise.
• Service Hub. Starter, Professional, and Enterprise.

Here's the guide to setting up the integration:

Step 1: Download the Hotjar Integration in the HubSpot Marketplace

Go to the App Marketplace in HubSpot and search for "Hotjar" then click the Hotjar integration from the list of apps. Or use this handy link to go directly to the Hotjar integration page. 

Step 2: Log Into Your Hotjar Integrations Page

Go to your Hotjar account and log in. Then, navigate to the "Integrations" page in your Hotjar account.

Step 3: Select the Site You Want to Integrate

From the integrations page, select the site you want to activate the integration for. Then, choose the HubSpot integration and click "Connect with HubSpot"

Step 4: Log Into Your HubSpot Integrations

In your HubSpot account, go to the "Integrations" menu of your HubSpot Settings and click on the "Hotjar" integration.

Click "Grant Access" to approve the integration.

Step 5: Customize the HubSpot/Hotjar Integration

Now it's time to start customizing your HubSpot integration with Hotjar. You can enable or disable specific elements of the integration, such as recordings and surveys, from the Integrations tab of your HubSpot settings menu.

Viola! You now have Hotjar integrated with your HubSpot account! From here, you can do things like enable Hotjar-based filters in your HubSpot timeline, create lists and automations in HubSpot, and more!

Need Help Integrating HubSpot with Hotjar?

Need help making the most out of your HubSpot integration with Hotjar? Book a meeting with the experts at Bluleadz!

We have years of experience in combining HubSpot with other tools to help our customers drive traffic, leads, and customer conversions from their online marketing efforts.