Help Center

Menu

Use Hotjar to monitor heatmaps and conversion funnels

This tutorial shows you how to integrate Hotjar with Squiz Content Management, which lets you monitor Hotjar’s heatmap and other analytics on your site.

For instance, Squiz Content Management can easily integrate with Hotjar’s user-tracking analytics and recordings, which can be represented as heatmaps and user conversion funnels.

Before you start

For this tutorial, you will require:

  • A Hotjar account with Admin access - details on how to set this up are provided in the instructions below.
    For more information about Hotjar’s pricing plans, consult their pricing page. Note also Hotjar’s Privacy Policy and Terms of Service, as well as their documentation.

  • A Squiz Content Management site on which to configure Hotjar - you must have admin permissions granted on this site, which is usually a Backend User with admin permissions granted at the top of the the site asset’s hierarchy.

Set up a Hotjar account

The assumption here is that you want to add another user in Hotjar to administer Hotjar for a Squiz Content Management site within your organisation.

If you want to administer Hotjar for this site yourself, however, then you can skip to the next section.

  1. Sign in to Hotjar.

  2. Click the very top-left 'organisation/building' icon and from the drop-down, choose Sites & Organizations settings to display its page to the right.

  3. On the left, click Team to display its page to the right.

  4. Click Invite Team Members on the Team page and under the first TEAM MEMBER field on the Invite people page, specify the user’s Email address.

  5. In the ACCESS field choose:

    • Read & Write - to allow the user to access and use Hotjar analytics features for your site.

    • Admin - to allow the user to do the same but administer your Hotjar service too.

Your specified user should receive an email message through which they can sign in to Hotjar.

Configure your site in Hotjar

  1. Ensure you are signed in to Hotjar as a user with Hotjar Admin access.

  2. Click the very top-left 'organisation/building' icon and from the drop-down, choose Sites & Organizations settings to display its page to the right.

  3. Click New Site on the Sites & Organizations page.

  4. On the New Site page, specify the URL for your site in the WEBSITE field.

  5. Choose an appropriate SITE TYPE from the drop-down menu.

  6. Select the declaration check box.

  7. Click Add Site.

  8. Back on the Sites & Organizations page, select Tracking Code alongside the new site you added and keep the resulting dialog box open (with the Tracking code tab selected).

Set your Hotjar configuration in your site

  1. Ensure you are signed in to your site in admin mode and have admin permissions to your site (according to the Before you start section above).

  2. Edit the contents of your site’s <head> asset. If you have difficulty locating this asset, it is usually located within the Configuration > Design Assets > Design Nesters folder of your site’s asset tree.
    (Begin editing this asset by right-clicking Design Nesters and choosing Content from the menu.)

  3. Back in the Hotjar dialog box with the Tracking code tab selected, select Copy to clipboard and paste this content into an appropriate area of your site’s <head> asset. The content of this snippet should look similar to:

    <!-- Hotjar Tracking Code for https://your.matrix.site -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:1234567,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>
    If you have Google Tag Manager configured for your Squiz Content Management website, refer to Hotjar’s instructions on how to integrate this code snippet into Google Tag Manager for use with your Squiz Content Management site.

  4. Select Save to save changes to the <head> asset.

Confirm Squiz Content Management and Hotjar are correctly configured

Back in the Hotjar dialog box with the Tracking code tab selected, select the Verify installation tab, then select Verify Installation.

A small browser window should open and if your URL’s page appears with an eventual Hotjar installation verified message at the top left of this window, then Hotjar has been successfully configured for your site.