HotJar + Convert: A Step-by-Step Guide to Full Funnel Optimization.

17th May 2020 – HotJar + Convert: A Step-by-Step Guide to Full Funnel Optimization.

CRO Movies Starring HotJar & Convert

Follow up on your changes with new heatmap reports to see the impact of your tweaks.
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!
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.
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.
As inspectlet says:
And we won’t pretend it’s QUITE as entertaining.
You could also create a Convert Split URL test to find out what converts better: Recruiters Feature or Survey Feature.

Integrate Convert Experiences with Hotjar

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.

Set up Integration:

Variants that can eliminate UI confusion, reduce traffic frustration and leave you with a definitive idea of what your prospects really want.

  1. Add Convert Experiences Tracking Code to your website
  2. Add Hotjar Tracking Code to your website
  3. Enable the Hotjar integration in your Experience Summary screen (under Settings section)
    (For more detail, read the full step-by-step instructions here).

Verify Integration

But…HotJar “movies” are (potentially) more important.

And a Convert Experiences/HotJar integration works wonders here.

What Data is used?

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

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.

What’s next?

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.
You can prevent online shopping cart abandonment by optimizing your checkout process with Hotjar visitor recordings.

  • 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?

After a while, your Convert report shows that Original version is winning and the extra social icons do not bring more purchases.
Even simple analysis can prompt changes that may have a huge impact on your store.
To integrate the two platforms:
[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]
<<Embed Code>>

Prevent Cart Abandonment with Visitor Recordings

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.
Once you have Convert with Hotjar up and running, what next?
Convert Chrome Debugger:

  • 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?

Why?

Example on a Shopify Store

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.
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).
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.
But what about users’ privacy?
Landing Page Optimization (LPO) is a critical part of any CRO drive.

Understand why Visitors Leave

With Customer Surveys and Polls

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.
HotJar offers a great feature called funnels

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.

Tip: HotJar offers 7 additional heatmap tests as well.

With Funnels

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.

With the rise in popularity of extra large screens, netbooks, tablets and phones; ensuring an optimal experience across gadgets is a challenge.

Make a Device test with Heatmaps

And when you add Convert Experiences to the mix, you have the power to convert HotJar insights from all stages of your funnel into test variants.
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:
Integrating Hotjar with Convert Experiences allows you enable all Hotjar features within your Convert Experiences account.
Once the installation is ready, verify the setup by installing the Convert Chrome Debugger:
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.
Convert Multivariate Experience

heatmap reports hotjar
If you would like to see this partnership in action, just sign up for a Free Trial of Convert Experiences.

“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.”
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.

Improve your Landing Pages

These are good questions to ask when viewing and analyzing visitor recordings. They’ll help you prevent online shopping cart abandonment where possible.
Another useful Hotjar feature is the Feedback tool and you will see it to the left.
Higher engagement and prioritization of key content suddenly becomes possible, even if there are numerous variables defining your on-page experience.
Your site pages look very different across devices and screens of different sizes.
You can now profile members of your target segment and just offer a gift in exchange for their services.
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.
So sure: it’s not the new Avengers.
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.
Convert Split URL test
First use a Convert Multivariate Experience to design forms with multiple tweaks or element changes.

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:

After the integration is enabled, every recording in your Hotjar account will be tagged so: “Convert: AAA – BBB” where:

Detect Points of UI Confusion:

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:

Lastly apply A/B testing to the fields that remain and narrow your form down to what’s really important to visitors.

Simply add this Hotjar feature to your Convert experience and you will start collecting feedback

Make Your Form Submissions Soar

Hotjar account
Once you’re done, use Hotjar visitor recordings to eliminate the form fields or form elements frustrating your traffic.

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.

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.

Privacy Concerns especially with GDPR?

Hotjar feature is the Feedback tool
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.
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.
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.
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.
You want to know why visitors prefer the Original vs the Variation that you designed with Convert.