Hotjar Learning courses are live 🎓
Hotjar now has a beta training platform with courses on how to get the best out of Hotjar. Try out our How to install the Tracking Code course today!
This article steps through how to install your Hotjar Tracking Code on your Shopify site.
The built-in Shopify checkout doesn't allow any third-party scripts like Hotjar to be installed. However, we've provided a workaround for tracking your Shopify checkout flow in a separate section below.
The built-in Shopify checkout blocks third-party scripts like Hotjar
While you can install Hotjar on your Shopify storefront, the built-in Shopify checkout blocks third-party scripts, including Hotjar. This is a limitation within Shopify, however, we can suggest a workaround for tracking your Shopify checkout flow.
How to install Hotjar on your Shopify site
Go to your Hotjar Sites page and click on Install tracking code for your site.
Click on Add code manually.
Click on Copy to copy the Tracking Code to your clipboard.
Visit your Shopify Admin dashboard.
Click on Online Store, then click on Themes.
On your current theme, click on Actions and then select Edit code.
Within the Layout folder, click on theme.liquid.
Scroll down the theme.liquid page until you've found the </head> closing tag.
Some themes will use a variation of the <head> </head> tags such as {/head}, [/header], or other variations of [/head]. These all work in the same way.
Paste your Hotjar Tracking Code just before the closing </head> tag.
Click on Save to apply the changes.
Follow the next set of steps to also install Hotjar on your order status page
Using the steps above, the Hotjar Tracking Code should now be installed on your Shopify storefront. To also track the order status page, you'll need to install the Tracking Code in another section of Shopify. Follow the steps below for help with doing this.
To install the Tracking Code on your order status page, inside the Shopify Admin sidebar click on Settings.
Click on Checkout.
Scroll down until you reach the Order status page scripts section. Paste the Hotjar Tracking Code in the text field.
Click Save.
The Hotjar Tracking Code should now be installed on your order status page. This does not install the Tracking Code on your Shopify checkout, as Shopify's built-in checkout doesn't allow third-party scripts, such as Hotjar.
A workaround for tracking the Shopify checkout flow
Unfortunately, the built-in Shopify checkout does not allow third-party scripts, like Hotjar, to work on checkout pages. However, below is a possible workaround for tracking the Shopify checkout flow in Hotjar:
Track the order status page
Shopify allows Hotjar to work on your order status page. This means you can filter those users who made a purchase by using the URL contains filter for Recordings and Heatmaps, based on the order confirmation page URL for your site. For example, after a purchase, users may be shown a page with a URL that contains /thank_you and you can filter Recordings and Heatmaps based on this URL. You'll need to check the specific URL used for your website, which can be different to /thank_you, and use this when filtering.
Add event triggers to compare those who purchased against users who didn't finish the checkout process
If you're interested in comparing users who made a purchase versus those who began the checkout process, but didn't finish it, you can explore adding Event triggers to the buttons on your site that would take users to the checkout page. Recordings can then be filtered based on these events, to compare the following segments of users:
- Users that clicked the buttons and reached the order confirmation page.
- Users that clicked the buttons and did not reach the order confirmation page.
Having trouble installing the Hotjar Tracking Code?
Visit our articles on How to Check That Hotjar Is Working and Troubleshooting FAQS for Tracking Code Installation for troubleshooting guidance.
Once Your Tracking Code is Installed
You can start using any of the Hotjar tools: Heatmaps, Recordings, Surveys, and Feedback. Have a look at the guides below to get started.
Next Steps
- Add Team Members to your Organization.
- Add Sites to your Organization.
- Understand the difference between Accounts, Organizations, and Sites.