{"id":42826,"date":"2020-04-27T04:39:00","date_gmt":"2020-04-27T08:39:00","guid":{"rendered":"https:\/\/crazyeggblog.wpengine.com\/?p=42826"},"modified":"2026-01-06T15:14:38","modified_gmt":"2026-01-06T23:14:38","slug":"how-create-heatmap-online","status":"publish","type":"post","link":"https:\/\/www.crazyegg.com\/blog\/how-create-heatmap-online\/","title":{"rendered":"How to Create a Heatmap Online for Free in Less Than 15 Minutes"},"content":{"rendered":"\n

A heatmap is an extremely valuable tool for anyone with a website.<\/p>\n\n\n\n

Heatmaps are a visual representation of crucial website data. With just a simple image, you\u2019ll be able to determine what\u2019s working with your website and what needs improvement. <\/p>\n\n\n\n

One of the best parts about using a heatmap is that you won\u2019t have to wade through an overload of numbers or spend time trying to decipher complex spreadsheets. Heatmaps are simple. Every boss, client, or anyone, for that matter, can understand the results. <\/p>\n\n\n\n

With heatmap reports, you\u2019ll have a clear depiction of how visitors are interacting with your website.<\/p>\n\n\n\n

After you determine where people are focusing the majority of their attention on your site, you can use that information to optimize conversions. Whether it\u2019s removing distractions from a page that could be hindering your conversion rates or moving a CTA button, heatmaps improve CRO with data-driven visual reports. <\/p>\n\n\n\n

Creating a heatmap is easy. In fact, you can create one online in less than 15 minutes\u2014for free.<\/p>\n\n\n\n

For those of you who have never done this before or just need some extra guidance, I\u2019ll walk you through the step-by-step process for creating a heatmap. <\/p>\n\n\n\n

Step #1 \u2014 Create a Crazy Egg Account<\/h2>\n\n\n\n

There are a handful of reputable heatmap tools on the web, but Crazy Egg will be your best option. This is especially true for those of you who want to create a heatmap for free.<\/p>\n\n\n\n

More than 300,000 companies trust Crazy Egg for heatmap reports, including global brands like Dell, Yahoo, Etsy, Intuit Mint, Optimizely, and Twillo. <\/p>\n\n\n\n

Signing up for a Crazy Egg account<\/a> is simple. Just enter your email address and create a password. You can even sign up using your Google account with just one click.<\/p>\n\n\n\n

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

Every new Crazy Egg plan comes with a free 30-day trial. This is more than enough time to create as many heatmaps as you need and test the tool before you decide to commit. <\/p>\n\n\n\n

After you create an account, you\u2019ll be asked to choose a plan. The plans are based on monthly tracked pageviews, monthly recordings, and storage. <\/p>\n\n\n\n

The entry-level plan starts at 30,000 pageviews, 100 recordings, and three months of storage. The top-tier option goes up to 500,000 pageviews, 5,000 recordings, and two years of storage. There\u2019s even a custom plan for anyone who needs more than this.<\/p>\n\n\n\n

Select whichever option aligns closest to your monthly site traffic. <\/p>\n\n\n\n

Step #2 \u2014 Install the Tracking Script<\/h2>\n\n\n\n

After you\u2019ve created an account, Crazy Egg will prompt you to install a tracking script on your website. This code will connect with Crazy Egg, allowing the tool to collect data from your site.<\/p>\n\n\n\n

There are a few different ways to install the tracking script. Here\u2019s what the screen will look like when you get to this stage:<\/p>\n\n\n\n

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

These are the three ways to install your tracking code:<\/p>\n\n\n\n

  1. Do it yourself.<\/li>
  2. Have your developer (or someone else on your team) do it.<\/li>
  3. Integrate with a third-party app.<\/li><\/ol>\n\n\n\n

    All three options are very straightforward. It all depends on your comfort level and technical knowledge. But even if you have no development experience, you could easily install this on your own. For those of you who are more comfortable sending it off to your developer, that\u2019s fine.<\/p>\n\n\n\n

    I\u2019ll give you a quick breakdown of each option so you can decide what\u2019s best for you. <\/p>\n\n\n\n

    Install the Tracking Code Yourself<\/h3>\n\n\n\n

    If you decide on the first option, you\u2019ll be brought to a screen that looks like this:<\/p>\n\n\n\n

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

    Crazy Egg will automatically generate a tracking code. Simply copy the code and paste it into the <head> section of your website after your <meta> tags.<\/p>\n\n\n\n

    Here\u2019s an example of what that tracking script will look like after it\u2019s been installed on your website.<\/p>\n\n\n\n

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

    As you can see, I pasted this in the last line of the head section after the meta tags. If you know how to find and edit the HTML code on your site, this method is simple and straightforward.<\/p>\n\n\n\n

    Then go back to Crazy Egg and click \u201cCheck my installation\u201d to verify that it\u2019s been installed properly. <\/p>\n\n\n\n

    Have a Developer Install the Code<\/h3>\n\n\n\n

    If you\u2019re not comfortable doing this manually on your own, or you\u2019d rather have your developer do it, you can send them a simple email with all of the instructions they need.<\/p>\n\n\n\n

    Just click on the second option, and fill out the following details:<\/p>\n\n\n\n

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

    This process will be straightforward for any developer. They\u2019ll have the tracking script installed to your site in less than 60 seconds. <\/p>\n\n\n\n

    Integrate With a Third-Party App<\/h3>\n\n\n\n

    Another simple way to install the tracking script on your website is by integrating with the CMS platform you\u2019re using to manage your website. <\/p>\n\n\n\n

    Just select an app from the list to continue:<\/p>\n\n\n\n

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

    The instructions will vary slightly based on the platform for you\u2019re using. Regardless of what you click, Crazy Egg will automatically show you the step-by-step instructions for a code-free installation.<\/p>\n\n\n\n

    For example, if you\u2019re using WordPress, the instructions will walk you through adding the Crazy Egg plugin from your WordPress dashboard. Squarespace requires you to change some of your advanced settings. Shopify directs you to the app store. Wix sends you to its marketing integrations page. <\/p>\n\n\n\n

    No matter what platform you\u2019re using, the app integration process should take a few minutes at most to set up. You won\u2019t have to touch the HTML code of your site if you go this route.<\/p>\n\n\n\n

    Step #3 \u2014 Create a Snapshot<\/h2>\n\n\n\n

    Once the tracking script has been installed, you\u2019ll be ready to create your first snapshot. A snapshot gives you access to five different data reports\u2014heatmap, scrollmap, confetti, overlay, and list.<\/p>\n\n\n\n

    For the purposes of this tutorial, we\u2019ll focus on the heatmap report. <\/p>\n\n\n\n

    First, decide if you want to create one snapshot or multiple snapshots. Most people choose the latter of the two, but one is fine for now if it\u2019s your first time and you\u2019re still getting your feet wet. <\/p>\n\n\n\n

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

    For our purposes here today, I\u2019ll go through the process of creating one snapshot, so you have a firm grasp of how to set this up.<\/p>\n\n\n\n

    Crazy Egg walks you through each step with easy to follow form fields. Start by entering the URL of the page you want to create a heatmap for. Then name the snapshot (homepage, pricing page, FAQ page, etc.) and choose your reason for creating it.<\/p>\n\n\n\n

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

    These are the reasons you have for creating a snapshot:<\/p>\n\n\n\n