How does it work?
You can integrate Hotjar with Checkout X to track the user behavior on checkout. The integration allows you to monitor shopper behavior during checkout with Hotjar recordings on the following pages:
Checkout page - see what people do on your checkout once they arrive on it.
Upsells page - get the data you need to find out how the customer reacts to the buttons on the upsell page.
Thank you page - track the behavior of the customers once they check their purchase information.
Hotjar tracks the following actions of the customer depending on the device they’ve used when they’ve opened a specific page:
Direction of mouse movement
How can I set up the integration?
Set up Hotjar to track only on Checkout X
Create or log in to your Hotjar account and link the store you will use the integration for. Then, follow these steps:
1. Go to your Hotjar Dashboard.
2. Copy the Site ID from the URL in Hotjar related to your store.
Or you could find the Side ID when you go to Sites & Organizations list from the Settings menu. From there you will see a listing of the Sites and Organizations you have access to, along with their IDs.
3. Log in to your Checkout X account > Configuration
4. Go to Integrations > Hotjar
5. Paste the Hotjar Site ID in the field
6. Click on Save Changes
7. Go back to Hotjar and select Verify installation
8. You should have a notification message displayed that your tracking code is successfully verified.
Create Heatmaps in Hotjar for Checkout X pages
To be able to track and review the behavior of the customers on the pages, you need to create heatmaps. When integrating Hotjar with Checkout X, you could track the Checkout, Upsells, and Thank you pages. For this purpose, you need to follow the steps below:
1. In your Hotjar account go to Heatmaps from the Analytics menu on the left.
2. Select New Heatmap.
3. Add the name of your heatmap depending on the page you want to track. For example, let’s create a Checkout Page heatmap. Then, click Next to continue.
4. Select the number of pageviews recorded, depending on your subscription plan in Hotjar. Then, click Next to continue.
5. Page Targeting - if you want to target the Checkout, Upsells, or Thank you pages in general, you need to select the Similar pages option. Then, from the drop-down field select URL contains and add the following part depending on the page you want to target:
- Checkout Page - add /checkout
- Upsell Page - add /upsells
- Thank You Page - add /thank-you
Then, click Next to continue.
Note: A new heatmap needs to be generated for each page.
6. Click on Create Heatmap. Done! Once the sessions are completed, the heatmap will be generated and you could preview it. Afterward, if you want to create a new heatmap for the same page, just duplicate it and it will start running again.
Set up Hotjar to track all of the pages on your store
If you want to track the Cart Page, Home Page, or your Product page, you need to set up the integration on your e-commerce platform too.
Log in to your Hotjar account and link the store you will use the integration for. Then, follow these steps:
1. Find your Tracking code to install by going to Sites & Organizations
2. Click on the Tracking Code button next to the site URL
3. Click Copy on Clipboard
4. In the Shopify dashboard of your store, click on Online Store
5. Click on Themes
6. Select the Actions button on the top right and choose Edit Code
7. Under Layout, choose theme.liquid
8. Open the search bar using keyboard shortcuts Ctrl+F (or Cmnd + F) and search for the </head> tag in the code. Or you could scroll down the page until you find the tag.
9. Paste your Hotjar Tracking Code just before the closing </head> tag.
10. Click Save and Publish your Theme to apply the changes. Then, the tracking code should be installed on your Storefront successfully.
❓ FAQ ❓
🙋 I experience a problem with the integration, who should I contact?
For more accurate information, please visit the Hotjar Help Center and contact their Support Team there.
🙋 Can I create a heatmap for a specific upsell page?
No, this is not possible. You could have a heatmap only for all upsells pages in general.
🙋 Can I create a heatmap for a specific Thank you page?
Unfortunately, this is not possible. You could have a heatmap only for all Thank you pages in general.
🙋 Can I use one heatmap for two or more pages?
No, each page has an individual heatmap. For example, if you want to track 3 pages on your store, you need to create 3 heatmaps for each page.
🙋 Is the integration going to slow down the checkout page?
No, it won’t.
🙋 Does the integration collect the billing information of the customer on checkout?
No, it doesn’t and it won’t show confidential information. The fields are shown blank.