Integrate Hotjar with Matrix

This guide shows you how to integrate Hotjar with Matrix, which allows you to 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.

Prerequisites

For this guide, 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 Users to display its page to the right.

  4. Click Invite Users on the Users 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, click the Tracking Code button 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 prerequisites 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, click the Copy to clipboard button 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. Click Save at the lower right in Matrix 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, click the Verify installation tab, followed by the Verify Installation button.

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.

© 2015-2020 Squiz Pty Ltd