As a marketer or as a designer,
you need to take the guesswork out,
and use data to make improvements.
In this video, we will look at tools
and resources you can use to improve websites
and landing pages to increase conversions
from your existing traffic.
My name is Waseem Bashir,
and I run an agency specializing
in convergent rate optimization.
Over the years, I've used countless tools,
and conducted 1,000s of experiments.
In this video, I will show you some of the things
you should consider when looking at heatmaps.
After watching this video,
you will understand the various heatmapping tools,
and also, resources that you can try out.
Let's do it.
(upbeat music)
Let me holistically explain how heatmaps help.
As a designer or as a marketer,
you want to identify areas on your website or landing pages
which are not performing.
Obviously, there are lots of variables
that we need to consider,
but one of them is user experience.
Using website heatmaps and behavior analytics tools,
you can identify problems which are stopping
your visitors to take the next step.
Later, once we identify problems,
we can come up with hypotheses and test them.
We will talk more on that in the future series
of AB testing.
For now, let's understand how users behave on your website.
Heatmaps allow us to identify areas on our website
where users spend the most time.
You can use tools like Hotjar, Crazy Egg,
and Microsoft Clarity and capture heatmaps.
Google Analytics can tell you what's happening,
heatmaps can show you why.
In our agency, we use both Hotjar and Crazy Egg.
Both have their pros and cons, more on that later.
Let's talk about this example from a test
which we recently ran for our client.
When looking at both heatmaps and scroll maps,
we noticed the call-to-action button
appeared below the fold.
The average fold on mobile was about 658 pixels.
A side note on the average fold.
The average fold is the average location
that would be visible as a user opens the page
before they've done any scrolling.
This is presented as a white line
with the label Average Fold.
So in order to make the form visible,
we move the call-to-action above the fold,
and push the benefits below the form section.
Voila, we measured a huge spike.
The result was a 20% increase in conversions.
Depending on your findings,
I recommend document them in a Google Sheet.
This will help you pick one item at the time
as an AB test candidate.
We will cover this in a separate video.
Let's talk about the various heatmaps.
The first one is movement map.
Using a move map in Hotjar,
you can identify hotspots that are drawing user attention.
Using this knowledge,
you can understand which areas are looked at the most,
and some blind spots which are going unnoticeable.
A click map is kind of a heatmap that will show you
which areas on your page are being clicked,
and how many times they've been clicked.
This could indicate an issue with your CTA for example,
or any other link,
but it also indicates places
where people might be interested in, in more information,
such as frequently asked questions.
Crazy Egg has a powerful click map data,
which you can filter by lots of options.
However, annoyingly,
you can only select one filter at a time.
Why not allow multiple filters if the data is already there?
(chuckles) Hotjar, are you listening?
Scroll maps are similar to heatmaps,
but instead of showing us where users spend the most time,
scroll maps show us where users
move around within a webpage.
So if you have information on your page
and visitors are dropping off
before they scroll to check it out,
a good idea would be to push that information up
so it's easily visible.
Scroll maps will help position various sections
depending on visitor's instruction with your page.
Here's a pro tip.
If you notice not many people are
scrolling past 25% of the page,
consider a split test where you test out
a shorter version of your page.
Watching session recordings.
You can watch sessions of users interacting
with your website or landing page.
Most tools offer this feature.
Although they are great to find
some great user experience gems,
watching them one-by-one is pretty laborious.
Here's what I would recommend.
Watching people convert.
This includes both main goals, such as filling out a form,
and micro conversions, such as playing a video.
For further investigation,
put a list of issues that you might want to investigate,
and then, watch recordings of those and gain more insights.
Correlate recordings to other data points
such as rage clicks.
This way, you'll get more insights
on what led to the pain that made users click manically.
Although tools like Google Analytics,
Hotjar, or Crazy Egg offer data points,
they are still based on inferences you drive from them.
This is where Hotjar shines at.
Hotjar has a very powerful feature, on-page surveys.
On-page surveys help in AB testing
because they give us insights
into what visitors think about our content.
You can set up surveys and ask questions like,
did you find what you were looking for?
Are you satisfied with the experience?
Would you recommend this to a friend?
On-page surveys are great tools
to gather feedback from customers
and ask them what kind of content
they liked and didn't like.
This feature is only available in Hotjar,
and over the years, has become very powerful.
You can also get notified via email or Slack
every time when a visitor fills out your survey.
That's pretty amazing.
We, in fact, use the survey as a lead generation tool
for one of our clients,
and have collected over 354 leads in the last year.
Rage clicks, Crazy Egg has a very useful feature
where you can check out rage clicks.
These are areas where visitors are clicking,
expecting to do something.
For example, here on Bequest, we noticed visitors,
instead of clicking the call-to-action button,
were instead clicking this graphic, which had no action.
Most heatmap tools have a script block
that you can easily install on your website or landing page.
If you're running a WordPress website,
I would recommend setting up Google Tag Manager first.
If you don't know what Google Tag Manager is,
I would recommend watching a few videos.
Using Google Tag Manager, set up a new tag.
Choose the trigger to run on all pages and publish it.
If you're using a landing page builder tool,
then you can easily add the script via the script section.
In Unbounce, you can find it under the Scripts tab.
In Swipe Pages for example,
you can find the scripts via the dashboard.
Make sure to save and publish your page
to activate the script on your page.
Which of these tools do you want to try
or already have checked out?
Please leave a comment below.
Once you have installed your script, head over to Hotjar.
You can follow the same steps
for Crazy Egg or Microsoft's Clarity.
Find your account and click New Heatmap.
Make sure you enter the correct domain URL
including wildcards.
In our case, we want to track a landing page
for a Google PPC campaign.
Since the final URL might include UTM parameters,
Google Click ID, the URL could be different every time.
Hence, we want to capture the URL
including any URL parameters.
In order to set up any kind of tracking,
I prefer using Google Tag Manager.
If you have WordPress, you can install this plugin,
Google Tag Manager for WordPress.
Once you've installed it,
you will see it appear under Settings.
And if you click on it,
it'll take you to a screen where you can actually add
your Google Tag Manager ID.
Google Tag Manager ID is the ID which you get
when you sign up for Google Tag Manager,
and you can easily copy/paste that.
Once you've set up your Google Tag Manager,
you can then set up different tags.
Let's see how this works.
By any chance,
if the Google Tag Manager plugin didn't work for you,
there's another plugin called Insert Headers and Footers.
Once you install it, you should be able to see this,
where you can install Google Tag Manager
by dropping in those scripts.
And you can find these scripts under the Admin area,
and click Install Google Tag Manager.
You can copy both of these scripts in the right areas.
For example, this one goes in the head section,
and this one goes in the body section.
And that's it, just click Save.
And that should solve in case if you have
any issues using the other method.
Let's set up Hotjar for our website.
I'm going to use my personal website waseembashir.com,
and head over to Hotjar, paste my URL here,
and select Blog or Personal as a site type.
For Site Owner, I'm going to select my owner account.
Because I have multiple websites under my Hotjar account,
you might not see this option.
So once I click Add Site,
I can then head over to my website
by clicking this link here.
(upbeat music)
Okay, now, we have to set up Hotjar
using Google Tag Manager.
I prefer to set up using the manual method,
and I'm going to show you how to do that.
So click on Add Code Manually,
and head over to your Google Tag Manager account.
Click New Tag.
And under Tag Configuration,
select Hotjar as one of the options here.
And simply copy the ID
and paste it in here as the Hotjar site ID.
And for triggering, choose All Pages.
Rename this to Hotjar and click Save.
And then, once you have saved,
click Submit and Publish
to publish this tag onto your website.
So this effectively means Hotjar will be triggered
across all pages on your website.
Let's verify the installation by clicking this button.
(bright music)
Yay, so we set it up.
So everything is live, and now,
We can capture heatmap data in Hotjar.
Once you log into Hotjar,
you might see this screen
where you don't have any heatmaps.
It's because, actually, Hotjar is doing
some clever stuff in the background.
It will actually look at top 20 high-traffic pages
and will start capturing data for those pages.
But that doesn't mean you don't have control
over manual heatmaps.
You can easily switch to manual heatmaps
and select the pages for which you wanna capture data.
Let me show you how to do that.
So you can click New Heatmap,
and type in the name of the page.
So for example, if I want to capture data for the blog page,
I can copy this URL
and call it Blog
Category page.
(bright music)
And I guess I have a basic account,
so I'm gonna set up 1,000 page views as default.
And for the actual URL,
I'm going to paste in the URL,
but I'm going to ensure that I select Simple URL Match,
because sometimes, if you're passing URL parameters,
that might not trigger the heatmap,
you can select Exact Match URL for example.
But with Simple URL, it will also capture,
even if you are passing UTM parameters, for example.
Just click Review and Save, and click Create Heatmap.
So now, you will see the blog category page
has been added here, and over a period of time,
we will see data being captured for this particular page.
And if you look here, for the homepage,
this is a heatmap which is already,
which has automatically been set up.
And now, we can look at the heatmap
and see what visitors are doing.
But obviously, only two people have visited,
which is basically just me.
I don't see any data here, but that's absolutely fine.
Over a period of time, we will see data.
And the second thing which you could enable is Recordings.
And by default, Hotjar will automatically enable it for you.
And over a period of time,
you will see recordings appear here.
So those are the two things
which I would set up straight away.
And in the future, if you want to set up surveys,
you can easily do that by clicking New Survey
and defining the type of question
you want to ask for your visitors.
We can cover this in detail.
Please leave me a comment below
if you would like me to set this up,
but I will let you play with this.
Let's now set up a heatmap using Crazy Egg.
Crazy Egg is similar to Hotjar,
but I prefer Crazy Egg for its reporting.
So let's add a new snapshot by clicking this button.
Because we're going to record a heatmap for just one page,
I'm going to select this option.
And here, I'm going to copy the URL.
So I'm going to use the same website and paste it in here.
I'm going to name this as Homepage.
And here, as you can see,
Crazy Egg can allow you to track heatmaps
for particular devices.
And that's something which Hotjar doesn't have.
You can check out some of the advanced settings here,
and control when Crazy Egg will be triggered.
And you can define exactly those settings,
but I'm happy with the default.
So I'm going to click Review.
So this looks okay.
And then, I'm going to create
three screenshots or snapshots.
In order to install Crazy Egg,
we will follow the exact same steps we did for Hotjar.
And here, in Google Tag Manager,
just select Crazy Egg from the list of tools.
And then, head over to your account,
which is basically when you click on your profile here,
and click Manage Account, that's the account number.
And copy that account number into Google Tag Manager,
and paste it in here.
And just like Hotjar,
we're going to enable it for all pages.
Call it Crazy Egg, and then, Save, and then, Publish.
(bright music)
Awesome, so let's head over to Crazy Egg
and check our installation.
(bright music)
I'm going to copy the URL,
paste it in here, and click Check URL.
(bright music)
Awesome, so Crazy Egg has been installed,
and now, we can see heatmap data come through.
So I'm going to select my website here.
And then, over a period of time,
we will see data come through here.
And it's the same principle, just like Hotjar,
where you will see recordings as well,
and as well as heatmaps.
So that's the way you can set up Crazy Egg on your website.
Please leave a comment below if you face any problems
or if you have any questions.
So today, we looked at how you can use various heatmap tools
to capture different data points.
If you got value from this video,
please consider subscribing to my channel
to watch in-depth marketing tutorials.
Check out my other videos in this series here.
(bright music)