{"id":28226,"date":"2018-03-17T08:02:48","date_gmt":"2018-03-17T13:02:48","guid":{"rendered":"https:\/\/crazyeggblog.wpengine.com\/?page_id=28226"},"modified":"2025-04-17T19:02:09","modified_gmt":"2025-04-17T23:02:09","slug":"crazy-egg-features","status":"publish","type":"page","link":"https:\/\/www.crazyegg.com\/blog\/crazy-egg-features\/","title":{"rendered":"Crazy Egg Features"},"content":{"rendered":"\n

Creating an effective site requires more that an attractive design.<\/span><\/p>\n\n\n\n

You can have the perfect branding, eye-catching photos, and impeccable aesthetics. But your visitors aren\u2019t becoming customers, your site isn\u2019t help your business at all.<\/span><\/p>\n\n\n\n

Your site needs to be designed to generate conversions. And that requires a strong understanding of your target audience.<\/span><\/p>\n\n\n\n

Your need to know what they\u2019re looking for and which elements will drive them to make major conversions, like buying a product or submitting a contact form.<\/span><\/p>\n\n\n\n

But those actions start with smaller details, like the elements that attract their attention as soon as they land on a page, what they click on, and how they interact with your content.<\/p>\n\n\n\n

That\u2019s where user testing becomes essential.<\/p>\n\n\n\n

Many site owners make the mistake of implementing standard \u201cbest practices\u201d to increase conversions and sales. And while those recommendations can give you solid options to consider, it\u2019s important to remember that they haven\u2019t been tested on <\/span>your <\/span><\/i>audience.<\/span><\/p>\n\n\n\n

In fact, your audience may react negatively to the changes that increased conversions on another site.<\/span><\/p>\n\n\n\n

With user testing, you can learn more about how your site\u2019s visitors respond to certain elements. Then, you can make data-backed decisions about your site with a focus on matching their needs.<\/span><\/p>\n\n\n\n

This will help you drive engagement on your site, as well as develop a design that\u2019s intuitive for your users. It can also help you create streamlined user flows throughout your pages to increase your conversions and ROI.<\/span><\/p>\n\n\n\n

But\u2026 collecting all of this information sounds complicated, right?<\/span><\/p>\n\n\n\n

It doesn\u2019t have to be.<\/span><\/p>\n\n\n\n

With Crazy Egg, you can start collecting data and running user tests with zero technical experience.<\/span><\/p>\n\n\n\n

The following seven features make it simple to access actionable information about your visitors, then use that insight to optimize your site for conversions.<\/span><\/p>\n\n\n\n

Crazy Egg Snapshots<\/a><\/h2>\n\n\n\n

As you optimize your site for conversions, it\u2019s important to monitor each page\u2019s performance, as well as the changes you make and the results you see with each change.<\/span><\/p>\n\n\n\n

After all, the entire point of conversion rate optimization is to improve your site \u2014 so being able to determine whether you\u2019ve done that is essential.<\/span><\/p>\n\n\n\n

That\u2019s exactly what Snapshots help you do.<\/span><\/p>\n\n\n\n

What are Snapshots?<\/h3>\n\n\n\n

Snapshots are reports focused a single page on your site for a specific period of time. If you\u2019re new to user testing, your first snapshots can serve as benchmarks.<\/span><\/p>\n\n\n\n

They\u2019ll show how your users are engaging with the current version of your site. Later, you can create new <\/i>snapshots for the same pages to see how that engagement changes.<\/p>\n\n\n\n

Within each snapshot, you\u2019ll see several different reports on the page\u2019s performance, including a heatmap<\/a>, a scrollmap, a confetti report, an overlay report, and a list report. <\/span><\/p>\n\n\n\n

We\u2019ll get to those in a minute. <\/span><\/p>\n\n\n\n

But before you can access any of that data, you need to set up snapshots to start collecting it. <\/span><\/p>\n\n\n\n

How can Crazy Egg Snapshots help your site?<\/h3>\n\n\n\n

Snapshots help you track how users interact with a specific version of a page. <\/span><\/p>\n\n\n\n

As you optimize your site, your snapshots will show the evolution of each page, as well as the results each one generated. This can give you a before-and-after look at how users respond to your changes.<\/span><\/p>\n\n\n\n

\"crazy<\/a><\/figure>\n\n\n\n

You can see how users respond to each variation, and use your results to guide future changes and tests.<\/span><\/p>\n\n\n\n

Snapshots can also be used to monitor both desktop and mobile visitors. <\/span><\/p>\n\n\n\n

By default, snapshots solely include data from desktop, tablet, and smartphone users, but that data is all displayed on a screenshot as a desktop visitors sees your site.<\/span><\/p>\n\n\n\n

If you want to focus on a particular segment of users, however, you can select which devices you want to track traffic from, and how you want to see it displayed in your reports. <\/span><\/p>\n\n\n\n

How to create a Snapshot<\/h3>\n\n\n\n

Before you can start collecting user data, you\u2019ll need to install the Crazy Egg script on your site.<\/span><\/p>\n\n\n\n

All you need to do to complete this process is copy and paste a few lines of code into your header file. You can <\/span>grab this code and copy it to your clipboard here<\/span><\/a>.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Then, open the file that contains your header, and paste that line of code just before the closing <\/head> tag, like this:<\/span><\/p>\n\n\n\n

\"crazy<\/a><\/figure>\n\n\n\n

Save the file and re-upload it to your site. You\u2019re ready to start collecting data!<\/p>\n\n\n\n

Return to your Crazy Egg dashboard and select \u201cAdd\u201d to create your first snapshot.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Then, enter the URL of the page you want to monitor.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

On the next screen, you can determine which visitors you want to track, and how you want their visits to appear.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

If you want to track and view all of your visits in the same snapshot, you can stick with the default settings. <\/span><\/p>\n\n\n\n

But if you want to focus on optimizing a page for mobile visitors, on the other hand, you can exclude desktop and tablet traffic and opt to have your results displayed on a screenshot of your site as it appears on a smartphone. <\/span><\/p>\n\n\n\n

From here, it\u2019s up to you whether you want to customize your snapshot with any of the advanced options available on the page. <\/span><\/p>\n\n\n\n

For most users, the default settings are a solid starting point. But if you want to customize your URL tracking rules, determine how your snapshot treats pop-up elements, change your sampling ratio, or create a delay timer, these are all options. <\/span><\/p>\n\n\n\n

Then, click \u201cNext\u201d to determine your snapshot\u2019s duration.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

You can set your duration in terms of either days or visits, and your snapshot will end at whichever comes first. Snapshot durations are limited to 50,000 visits and 365 days. <\/span><\/p>\n\n\n\n

Click \u201cNext\u201d to finalize your snapshot. If everything worked correctly, you\u2019ll see a page confirming your new creation.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

When you return to your dashboard, though, your new snapshot will be listed as \u201cPending.\u201d <\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

This status will remain until Crazy Egg\u2019s server captures and processes a screenshot of your page. Then, it will switch to \u201cRunning\u201d and your snapshot will start collecting data. <\/span><\/p>\n\n\n\n

If you\u2019re planning to optimize multiple pages on your site for conversions, you can go ahead and create snapshots for each of the pages you want to work on. <\/span><\/p>\n\n\n\n

These can serve as performance benchmarks, and can give you helpful insight to use as you start your optimization process.<\/span><\/p>\n\n\n\n

Crazy Egg Heatmaps<\/a><\/h2>\n\n\n\n

If you\u2019re familiar with one Crazy Egg tool, it\u2019s most likely heatmaps. This is our signature tool, and a great starting point for any conversion rate optimization process. <\/span><\/p>\n\n\n\n

What is a heatmap? <\/b><\/h3>\n\n\n\n

A heatmap is a visual representation of where users click on your site.<\/span><\/p>\n\n\n\n

It pulls in data from actual user visits to show which elements on your page get the most attention, and which are being ignored.<\/span><\/p>\n\n\n\n

Areas that get lots of clicks \u201cglow,\u201d so the more clicks an area gets, the brighter it will appear in the heatmap.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

This makes for an extremely easy way to see how users engage with your content at a glance. Instead of analyzing hundreds of data points from a report, you can simply look at a page and see where visitors focus their attention. <\/span><\/p>\n\n\n\n

Why are heatmaps important? <\/b><\/h3>\n\n\n\n

Heatmaps essentially show you what people care about on your pages.<\/span><\/p>\n\n\n\n

They show you which elements attract attention and get clicks and which elements are being ignored. The underlying information, then, is what your visitors <\/span>want<\/span><\/i>.<\/span><\/p>\n\n\n\n

If you see that certain types of elements like photos or case studies attract more clicks than the rest of the content on the page, you can deduce that your visitors want to see photos.<\/span><\/p>\n\n\n\n

Then, you can use that information to guide the way that you design and improve that page, as well as others on your site.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

This is particularly important for conversion-focused elements, like call to action buttons and signup forms. <\/span><\/p>\n\n\n\n

If there\u2019s anything you test on your site, these should be it. Optimizing the pieces on each page that play a direct role in driving action is the best way to make an impact on the metrics that matter most to your business.<\/span><\/p>\n\n\n\n

Run heatmap tests on your conversion-focused pages, and see which are most effective at generating clicks.<\/p>\n\n\n\n

When you know which buttons and elements get the most clicks, you can replicate those elements to increase your conversions site-wide.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

On the flip side, it\u2019s also important determine which pages <\/span>aren\u2019t <\/span><\/i>driving conversions, and why that\u2019s the case.<\/span><\/p>\n\n\n\n

Sometimes, it\u2019s not as simple as an element not attracting users\u2019 attention. Some of your pages may have usability issues that prevent your visitors from taking the action you want. <\/span><\/p>\n\n\n\n

Those issues could be anything from broken elements to confusing buttons to unclear calls to action. With heatmaps, you can determine exactly what they are. <\/span><\/p>\n\n\n\n

Your reports can show you where your visitors are struggling, and what\u2019s preventing them from becoming customers. <\/span><\/p>\n\n\n\n

In many cases, you\u2019ll find that unimportant elements are distracting users from taking more important actions.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

For example, <\/span>Conversion Rate Experts<\/span><\/a> set a goal of increasing their opt-in rate for this resource page on their site:<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The page was performing well in terms of other metrics, and there weren\u2019t any obvious issues preventing users from signing up.<\/span><\/p>\n\n\n\n

But after running a heatmap test with Crazy Egg, they found that many of their users were being distracted by their sidebar.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

While a useful navigation setup is important, this page simply gave users too many options. And the sidebar on the right was distracting them from completing the goal conversion. <\/span><\/p>\n\n\n\n

They used this insight to develop a variant of the page that was virtually identical, except that it didn\u2019t have any navigation options on the right side of the page.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Then, they used <\/span>Visual Website Optimizer<\/span><\/a> to test that variant against the original page. <\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The variant without the sidebar generated 25.9% more signups, with a 99% chance of statistical significance. <\/span><\/p>\n\n\n\n

By basing their variant on user click data, they were able to easily create an effective version of the page that eliminated distractions and pushed users to focus on the most important element.<\/span><\/p>\n\n\n\n

Couple (formerly Pair) saw similar results when they set a goal to increase app downloads. <\/span><\/p>\n\n\n\n

The landing page they\u2019d designed to help them reach this goal was <\/span>already relatively simple<\/span><\/a>.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

But after running a heatmap test, they noticed that a large chunk of the page\u2019s visitors were leaving the page by clicking the small navigation buttons in the upper left. <\/span>Some users were also being distracted by social sharing icons.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

They ran a series of tests with different placements for these distracting elements, and ended up with a version that contained a simple navigation bar in the footer, instead of the header.<\/span><\/p>\n\n\n\n

As a result, they saw a 25% increase in downloads<\/a>.<\/p>\n\n\n\n

This type of test is especially important if you have multiple calls to action on a page.<\/span><\/p>\n\n\n\n

Although Couple\u2019s goal was to encourage all of their visitors to take the same action, that isn\u2019t always the case. <\/span><\/p>\n\n\n\n

You might provide a variety of options to suit visitors in different stages of the buying process \u2014 but it\u2019s important that your less important calls to action don\u2019t distract from the ones that drive sales and leads.<\/span><\/p>\n\n\n\n

For example, when <\/span>North Face<\/span><\/a> realized that many of their users were adding items to their carts and visiting their cart page, but not completing a purchase, they ran a heatmap test on their checkout page. <\/span><\/p>\n\n\n\n

They determined that a large number of clicks were going to a promotional banner and taking away from the checkout button.<\/span><\/p>\n\n\n\n

Although clicking that banner could help users who were unsure of their purchase learn more about a program that could eventually drive them to convert, it distracted users who were ready to buy from taking action. <\/span><\/p>\n\n\n\n

They addressed this issue by moving the checkout button above the banner and making it more prominent on the page.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

As a result, that button saw a 21% increase in clicks \u2014 a jump that could have a <\/span>huge <\/span><\/i>impact on overall revenue given that it directly drives sales. <\/span>In some cases, though, distraction isn\u2019t the problem. <\/span><\/p>\n\n\n\n

Sometimes, visitors will <\/span>want <\/span><\/i>to convert, but struggle to figure out how. This is arguably an even worse scenario, because it means that your site is preventing your business from earning qualified leads. <\/span><\/p>\n\n\n\n

In another example, Pronto wanted to improve their site\u2019s sales funnel and figure out why more visitors weren\u2019t converting into leads.<\/span><\/p>\n\n\n\n

They ran a heatmap test, with a focus on seeing how users were interacting with elements like videos, drop-down menus, and accordions.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

After analyzing the heatmap, Pronto noticed that their educational and industry-specific elements were effective in attracting clicks and attention. This affirmed that they were on the right track with their site content.<\/span><\/p>\n\n\n\n

They also noticed that many of their visitors were scrolling all the way down to the bottom of the page to click the tiny \u201cContact Us\u201d link in the footer.<\/p>\n\n\n\n

While this indicated that their users were interested enough to spend time searching for that link, it also meant that they were likely missing out on qualified leads that weren\u2019t willing to put in that much effort.<\/p>\n\n\n\n

Based on that information, they placed a contact page call to action at the top of their homepage and added a Contact Us button to their main navigation bar.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

These calls to action are both significantly easier to find than a footer link, and they stand out with contrasting colors.<\/span><\/p>\n\n\n\n

As a result, Pronto saw <\/span>17% more clickthroughs<\/span><\/a> to their contact page, and a 24% increase in site-generated leads.<\/span><\/p>\n\n\n\n

The takeaway here is that the easier you make it for your visitors to do what you want, the more likely they\u2019ll be to do it. <\/span><\/p>\n\n\n\n

On the flip side, you can also use heatmaps to adjust your site to match the actions your visitors are already taking.<\/span><\/p>\n\n\n\n

One of the most common issues site owners see when they run heatmap tests is that users are clicking on elements that aren\u2019t actually clickable. <\/span><\/p>\n\n\n\n

Think about this from the user\u2019s perspective: You find a company you really like and you\u2019re ready to contact them to become a customer. You click a button expecting to be taken to a page where you can make your next step\u2026<\/span><\/p>\n\n\n\n

And nothing happens.<\/span><\/p>\n\n\n\n

That\u2019s extremely frustrating.<\/span><\/p>\n\n\n\n

Fortunately, if you notice this issue on your site, it\u2019s an easy enough one to fix.<\/span><\/p>\n\n\n\n

Determine which page a user would logically expect to visit after clicking an element, then link it to that page.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Problem solved!<\/p>\n\n\n\n

You also might run into the exact opposite problem, and notice that your visitors can\u2019t tell that certain elements <\/span>are <\/span><\/i>links.<\/span><\/p>\n\n\n\n

If this is the case, you can either adjust your link placement to match where users are already clicking, or redesign your links to be more eye-catching.<\/span><\/p>\n\n\n\n

Or better yet \u2014 try both strategies and see which works best. <\/span><\/p>\n\n\n\n

Heatmaps are most effective when you use them continuously to gain insight on user behavior, make data-backed changes, then monitor the impact your changes make.<\/span><\/p>\n\n\n\n

Running a test isn\u2019t a once-and-done process, but a valuable tool for improving your site over time. <\/span><\/p>\n\n\n\n

How to access heatmap data<\/b><\/h3>\n\n\n\n

Once a snapshot has had time to accumulate sufficient data, you can access a heatmap of the page by selecting that snapshot from your main dashboard.<\/span><\/p>\n\n\n\n

Then, select \u201cHeatmap\u201d from the menu at the top of the page<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

At the top of the page, you\u2019ll see a summary with the amount of time your snapshot has had to accumulate data, the total number of visits, and the total number of clicks.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Below that, you can see a heatmap with all of those clicks mapped on a screenshot of your page.<\/span><\/p>\n\n\n\n

From here, analyzing your data is a fairly simply process. Areas that got lots of clicks will \u201cglow,\u201d and the warmer the color, the more clicks they attracted.<\/span><\/p>\n\n\n\n

Areas that didn\u2019t get as much attention will appear dark. <\/span><\/p>\n\n\n\n

As you analyze these reports, focus on the most important elements on each page, as well the areas that received the most attention from users.<\/span><\/p>\n\n\n\n

Ideally, those two things should be the same. <\/span><\/p>\n\n\n\n

And if they\u2019re not \u2014 you\u2019re in the right place. You can start by using the information in your heatmap to identify opportunities for improvement and potential changes for boosting your conversion rate.<\/span><\/p>\n\n\n\n

Case study: Nurse.com<\/b><\/p>\n\n\n\n

If you\u2019re new to heatmaps, making sense of your first report can be a bit confusing.<\/span><\/p>\n\n\n\n

So let\u2019s take a look at how it works in practice. <\/span><\/p>\n\n\n\n

For example, when <\/span>Nurse.com<\/span> wanted to improve their conversion rate for course sign ups, they started by running a heatmap test on the page about their courses.<\/span><\/p>\n\n\n\n

After looking at the results, they found that many of the clicks were going to elements other than the signup call to action.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The less important links on the page were attracting more attention than the calls to action, and many users were ignoring the page\u2019s body copy. They also noticed a heavy concentration of clicks on non-clickable elements. <\/span><\/p>\n\n\n\n

Based on these results, they created a new version of the page that removed the distracting links, consolidated the calls to action, and moved the most important details to the top left, where users were already focusing their attention. <\/span><\/p>\n\n\n\n

After running a heatmap test on this variant, it was clear that users were now focusing their attention on the most important element: The call to action.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

This variation resulted in a <\/span>15.7% increase in sales<\/span>.<\/span><\/p>\n\n\n\n

So as you look at your heatmap results, focus on determining whether your visitors\u2019 behavior is in line with what the page is designed to encourage them to do.<\/span><\/p>\n\n\n\n

And if not, you\u2019ve found a perfect starting point for conversion rate optimization.<\/span><\/p>\n\n\n\n

Crazy Egg Confetti<\/a><\/h2>\n\n\n\n

Much like heatmaps, the Confetti tool shows you where people are clicking on your pages. But beyond that, it takes things a step further by showing individual clicks.<\/span><\/p>\n\n\n\n

These clicks can be color-coded based on a variety of metrics, but by default, they indicate the referral source or where the visitor arrived on your site from.<\/span><\/p>\n\n\n\n

In the screenshot below, for example, red dots indicate clicks from users that arrived on the page from another page on the same site. <\/span><\/p>\n\n\n\n

The orange dots represent clicks from users that arrived on the page from google.com, while the green and white clicks represent users from google.co.uk and google.es, respectively. <\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

This can help you learn more about where your visitors come from, and how user behavior varies by referral source.<\/span><\/p>\n\n\n\n

If you see that the majority of the clicks on your main call to action are all the same color, for example, this indicates that the channel that color represents is a source of highly qualified leads. <\/span><\/p>\n\n\n\n

And referral sources are just the start. <\/span>Using the drop-down list in the upper left corner, you can select from a variety of options for color-coding your reports.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Here, you can choose to view clicks by: <\/span><\/p>\n\n\n\n