Help Center

Menu

Use Hotjar to monitor heatmaps and conversion funnels

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

For instance, Matrix 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 Matrix site on which to configure Hotjar - you must have admin permissions granted on this Matrix site, which is usually a Matrix 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 Matrix site within your organisation.

If you want to administer Hotjar for this Matrix 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 Matrix 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 Matrix 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 Matrix site

  1. Ensure you are logged in to your Matrix 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 Matrix 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 Matrix 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 Matrix website, refer to Hotjar’s instructions on how to integrate this code snippet into Google Tag Manager for use with your Matrix site.

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

Confirm Matrix 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.