HotJar + Convert: A Step-by-Step Guide to Full Funnel Optimization.
CRO Movies Starring HotJar & Convert
So sure: it’s not the new Avengers.
And we won’t pretend it’s QUITE as entertaining.
But…HotJar “movies” are (potentially) more important.
Because with this nifty tool you get to see first hand how visitors interact with your website, why they abandon carts, what keeps them from submitting forms, and the pages or site sections that cause them to hit the back button.
Variants that can eliminate UI confusion, reduce traffic frustration and leave you with a definitive idea of what your prospects really want.
Integrate Convert Experiences with Hotjar
Set up Integration:
To integrate the two platforms:
- Add Convert Experiences Tracking Code to your website
- Add Hotjar Tracking Code to your website
- Enable the Hotjar integration in your Experience Summary screen (under Settings section)
(For more detail, read the full step-by-step instructions here).
Once the installation is ready, verify the setup by installing the Convert Chrome Debugger:
What Data is used?
After the integration is enabled, every recording in your Hotjar account will be tagged so: “Convert: AAA – BBB” where:
- AAA – the name of the experiment limited to the first 20 characters or the Experiment’s ID as found in your Convert account, depending on whether you have data anonymization enabled or not;
- BBB – the name of the variation limited to the first 20 characters or the Variation’s ID as found in your Convert account, depending on whether you have data anonymization enabled or not;
Inside your Hotjar account, you can filter the recordings based on a certain Experiment – Variation pair to analyze visitor behavior when served a particular variation:
Once you have Convert with Hotjar up and running, what next?
Now we’ll show you how even a basic knowledge of Convert Experiences can help you improve your landing pages, your form fields, your CTAs, your responsive design and much more. You can see:
- How many visitors your website gets
- How long your visitors hang around
- What state (or country) they’re from
- Which devices (mobile, desktop, tablet) your visitors use
- From which campaign they land in your store
- If your product image is actually appealing.
- If the store inspires an action from the visitor.
- If the product’s positioning on the page is awkward for the customer.
- If they have to scroll down too far to get to the product.
- Whether or your not as an effective, clear value proposition & CTA?
The amount of information can feel overwhelming and we recommend not diving in too deep at first. Focus on the key metrics that really matter to you.
Even simple analysis can prompt changes that may have a huge impact on your store.
[PS: On that note, check out our Small Data webinar. We cover the process of finding and using the “little things” for a big impact]
The point of integrating Convert Experiences with Hotjar is to get the most insight into user behavior as possible. The more you track, the better you can understand how your visitors interact with you site.
Prevent Cart Abandonment with Visitor Recordings
You can prevent online shopping cart abandonment by optimizing your checkout process with Hotjar visitor recordings.
Visitor recordings are short recordings that let you see what a visitor is doing on your site. And if you watch and analyze many of these recordings, you’ll start to spot patterns. You’ll be able to identify red flags during your checkout process. And you’ll understand better why people are abandoning their cart.
Visitor recordings can give you a lot of raw information. In order to use these insights to lower your cart abandonment rate, here are some things you should look for:
- How long are people staying on your product page?
- How fast do people scroll? Do they skim or read attentively?
- Are visitors getting distracted by something?
- What grabs your visitors attention? What interests them most?
- What makes them click away from their shopping cart?
- What else could be hurting your conversion rate?
These are good questions to ask when viewing and analyzing visitor recordings. They’ll help you prevent online shopping cart abandonment where possible.
Example on a Shopify Store
Let’s imagine that you have a Shopify store and you want to change the checkout page. You install the Convert tracking code on the checkout page of Shopify by following the instructions here and you create an A/B Experience within Convert. The variant sports extra banners on the checkout page with trust symbols and Free Shipping (hey! The experts say they work).
After a while, you notice in the Convert report that the Original version is winning and the extra banners did not bring in more purchases.
You want to know why visitors prefer the Original vs the Variation that you designed with Convert.
To do this you use HotJar visitor recordings on the checkout page of the Variation and you notice that visitors abandon the cart because they are actually distracted by these banners.
You remove the banners and adapt the Convert A/B experience to encourage more checkouts. AND you learn that in the future, if you want your audience to take action—prioritize minimizing distractions, over adding trust boosters.
Understand why Visitors Leave
With Customer Surveys and Polls
Another useful Hotjar feature is the Feedback tool and you will see it to the left.
With surveys and polls you can insert a request for customer feedback on your website. This comes in handy when even usability testing doesn’t shed light on the visitor resistance.
You can use these features at the moment of the maximum drop-offs and find out why visitors leave without taking further action. The comments that come through will support the quantitative data you have collected in Convert Experiences. Here is how to enable polls in a Convert A/B experience or personalization.
HotJar offers a great feature called funnels. So instead of using surveys and polls, you can simply use HotJar funnels to definitively spot the pages where significant drop-offs happen!
Make a Device Test with Heatmaps
Your site pages look very different across devices and screens of different sizes.
With the rise in popularity of extra large screens, netbooks, tablets and phones; ensuring an optimal experience across gadgets is a challenge.
Important content that is above the fold on a desktop could end up well below the fold on a phone. Equally, your page content could look sparse and unreadable on very large screens.
Hotjar heatmap reports will easily reveal these differences across browsers and devices and how visitors interact with your content. Introduce responsive design so you can adjust your pages to accommodate screen and browser specs. Use your findings from Hotjar Heatmaps to tweak this responsive design.
Higher engagement and prioritization of key content suddenly becomes possible, even if there are numerous variables defining your on-page experience.
Follow up on your changes with new heatmap reports to see the impact of your tweaks.
Once you are done, hand these findings over to Convert personalizations where different audiences will get different designs based on their device and browser preferences. Find out how you can enable heatmaps on Convert personalizations here.
Tip: HotJar offers 7 additional heatmap tests as well.
Improve your Landing Pages
Landing Page Optimization (LPO) is a critical part of any CRO drive.
With Hotjar you understand what users want, what they care about and how they interact with your site through a visual representation (map) of their clicks, taps and scrolling behaviour. You see what confuses people, and you can eliminate these roadblocks.
Let’s imagine you have a landing page and you want to optimize it. You install the Convert tracking code on the landing page and you create your Convert A/B experience. The changes that you go with are extra social buttons in the footer.
After a while, your Convert report shows that Original version is winning and the extra social icons do not bring more purchases.
You want to know why visitors prefer the Original vs the Variation you designed with Convert. For that, you use HotJar and you notice that visitors do not scroll to the footer of your landing page.
You move the social icons to the header and adapt the Convert A/B experience for discernible positive impact on conversions. Insights from People Who Matter.
Imagine that you have built a Convert Multipage Experience and you need to get an idea of the effectiveness of your hypothesis—fast. The Hotjar Recruiters widget gets consent from qualified traffic quickly and easily—and signs people up for user research.
You can now profile members of your target segment and just offer a gift in exchange for their services.
You could also create a Convert Split URL test to find out what converts better: Recruiters Feature or Survey Feature.
Simply add this Hotjar feature to your Convert experience and you will start collecting feedback
Detect Points of UI Confusion:
As inspectlet says:
“Rage Clicks identify moments of frustration by users, usually caused by excessive clicking in areas without triggering any UI changes. Common points of user rage include clicking on dead links (text that looks like a link but isn’t), clicking on images hoping to enlarge them (unsuccessfully) and other points of UI confusion.”
In your Hotjar dashboard, go to session recordings. Filter by the URL of the page you want to investigate. Then apply the rage click filter. You’re all set to watch and analyze the recordings of customers who rage clicked on any page on your website. Analyzing the recordings should point you in the right direction to fix the UI elements frustrating your visitors.
Make Your Form Submissions Soar
When designing and experimenting with your forms, you can have additional insights into how your visitors interact with form fields. With HotJar and Convert Experiences, you learn about the fields that remain blank, the fields that see data re-entry and in short know about the fields that tank your form conversion rates.
First use a Convert Multivariate Experience to design forms with multiple tweaks or element changes.
Once you’re done, use Hotjar visitor recordings to eliminate the form fields or form elements frustrating your traffic.
Lastly apply A/B testing to the fields that remain and narrow your form down to what’s really important to visitors.
We have seen so far that with a simple piece of code, Hotjar records user sessions of your website visitors. You can actually see them scroll, move their cursor across the screen, and click or tap depending on the device they’re using.
But what about users’ privacy?
The new law regarding data privacy, GDPR makes recording user sessions a little creepy. Can this be considered a breach of privacy? No, because Hotjar does not collect personally identifiable information about individual users, such as the IP address. Instead, they assign a unique user ID number to differentiate session recordings. Furthermore, Hotjar automatically detects entry fields for sensitive information such as passwords and credit card numbers and does not record the keystrokes. You can also choose to manually mask certain input fields and text in Hotjar’s settings.
Convert truly cares about your privacy and the privacy of your traffic. Conversion rate optimization is essential if you wish to guide your visitors to the best solution you offer without frustrating them in the process.
This is why we have a deep integration with a tool like HotJar which literally draws a CRO picture worth a million clicks – without infringing on user rights.
Scan this QR code and take this blog with you, wherever you go.
In her role as Head of Content at Convert, Carmen is dedicated to delivering top-notch content that people can’t help but read through. Connect with Carmen on LinkedIn for any inquiries or requests.