Tips & Scripts: How to collect user data (& more) from your landing pages with Hotjar

  • 15 June 2016
  • 6 replies
  • 48 views

As marketers, the ultimate question is what makes users tick? or how do we get more people to say yes. A/B testing is one of the most valuable ways to learn how visitors react and respond to your landing pages. But it’s not really the only way (anymore).

Introducing HotJar + Unbounce

It’s a fantastic testing tool that collects user behavior and helps marketers gain insight on how landing page visitors interact with the layout and design of a page. Here at Unbounce we rely and Hotjar to optimize our own landing pages and collect user feedback.

It’s worth noting that Hotjar isn’t new to the Unbounce Community. About 6 months ago some of our power users put their feelers out to get a sense of how the community utilizes Hotjar.

And, boy, the community came through!

So, what exactly is Hotjar? And, how can you put it to work to learn more about your audience and optimize your own landing pages?

What is HotJar?

Hotjar is a pretty powerful tool that reveals the online behavior and voice of your users. By combining both a.) analysis and, b.) feedback tools, Hotjar gives you the ‘big picture’ of how to improve your site’s user experience and conversion rates.

The analysis tools allow you to measure and observe user behavior (what users do) while the Feedback tools allow you to hear what your users have to say (Voice of User / Customer).

Hotjar provides six different tools (some have freemium options, all are implement-able in Unbounce):

  • Heatmaps - Understand what users want, care about and do on your site by visually representing their clicks, taps and scrolling behavior.

  • Visitor recording - Record real visitor behavior on your site. By seeing your visitors’ clicks, taps and mouse movements you can identify usability issues on the fly.

  • Conversion funnels - Where do your web visitors drop out of your conversion funnel? With conversion funnels, you can see exactly where potential leads lose interest.

  • Form analytics - Does your form have too many fields? Too few? Do visitors know how to answer the questions you’re asking? Form analytics reveal where visitors get stuck.

  • Feedback polls - Get an insight into who your website visitors are or what they’re looking for.

  • Surveys - Ask visitors or customers an unlimited number of questions with surveys.

Here at Unbounce, we use Hotjar to learn how to make our own website and landing pages better. I looped in Michael @Aagaard to explain his addiction to how he uses Hotjar for CRO.

At Unbounce, we also used Hotjar to improve our own signup process by watching real users move through the online signup process. Read the step-by-step breakdown of how we did it.

:new_blue: Unbounce + HotJar Webinar

Michael Aagaard teamed up with Hotjar just last week for the webinar, Secret Tips for Getting Amazing User Insight. Watch the recording here.

To install the Hotjar Tracking Code on your Unbounce site, copy the code from the Hotjar admin and follow the steps below.


How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


STEP 1: Create your Hotjar account and add your domain (takes 30 seconds)

STEP 2: Login to Unbounce and open your landing page

STEP 3: In Unbounce, click on Javascripts from your edit screen

STEP 4: Paste the Hotjar Tracking Code into the Head.

Note: This will add the Hotjar Tracking Code to your landing page. If you wish to add it to your entire domain, you can use the Script Manager. To track different domains, you’ll need to add individual tracking codes (see STEP 1).

STEP 6: Your Hotjar Tracking Code is now installed!

Once you have added the Hotjar Tracking Code to your site, you will need to wait a few minutes for Hotjar to check if it is installed correctly. This usually happens the moment your site is loaded with the Hotjar code on it (you can visit the page yourself to speed it up). Once Hotjar has detected the Tracking Code on your site, the Site Dashboard will show a notice like the one below:


Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


6 replies

Userlevel 7
Badge +4

Hotjar is amazing and it keeps getting better. Nowadays, I won’t launch and Unbounce page without it. Great overview Maggie!

Nicholas, how cool! That’s amazing to hear - sounds you are a doing data-driven marketing right ;) 

-Maggie

Thank you very much Maggie,

I did some research on Hotjar and I found it really interesting and beneficial as well. It also differentiates itself by being quite intuitive and easy to understand. 

There is also another SaaS tool I came across recently, which also analyzes visitor behavior on landing pages and also other pages in your website and offers you smart product recommendations for individual visitors. You might want to check it out,too.

Regards.

Userlevel 7
Badge +4

Hey Omertayfur,

Thanks for sharing! We install Hotjar on all our unbounce pages because of their awesome free basic plan. We get our customers gitty about data, and most of the time, we convert them to paid accounts.

I will def check out segmentify too!

Hi guys, Hotjar has detected my Unbounce Landing Page BUT it isn’t tracking the clicks through. I’ve applied the pop-up exclusion with the selector but still not tracking properly. Any advice? Thanks!!

Laura

How do you track different Unbounce variations in Hotjar?

Reply