Home Heatmaps

Heatmaps

Learn how to use heatmaps to visualize user interactions on your website, helping you identify popular areas and optimize your design for better engagement.
By Crowd team
• 5 articles

How to start collecting heatmaps from crowd

How to Set Up and Use Crowd Heatmaps New to Crowd? Start with our quick setup guide. Get valuable insights about your website visitors from day one! Get Started Crowd heatmaps show you exactly how visitors interact with your website using colors, blue areas show high activity, grey areas show low activity. This visual data helps you understand user behavior without guessing. The ultimate goal of Crowd is to help you improve your business by showing you exactly how visitors interact with your website. With these insights, you can make informed decisions that increase conversions, enhance user experience, and grow your revenue. What is a Heatmap? A heatmap is a visual tool that shows where users click, move, and scroll on your website, and Crowd Heatmaps continuously collect data across all pages on your site that have the Crowd tracking Script has been installed: - Click heatmaps show where users tap or click - Scroll heatmaps show how far down your page's users scroll - Movement heatmaps show where users move their cursor Why Use Crowd Heatmaps? Heatmaps help you: - Discover what elements visitors interact with most - Find out if people see your important content - Identify confusing or ignored areas of your site - Make smarter design decisions based on real user behavior Combined with Crowd's powerful AI Chat feature, heatmaps provide the visual and contextual data you need to transform your website into a conversion machine. While heatmaps show you WHERE problems exist, Crowd's AI helps you understand WHY they happen and HOW to fix them. Getting Started with Crowd Heatmaps 1. Create Your Crowd Account 1. Visit CrowdApp.io and click "Sign Up" 2. Enter your email address and create a password 3. Check your email for the confirmation code and enter it 4. Complete your account setup by answering a few quick questions 2. Generate / Install the Crowd Tracking Script For Crowd to collect data, you need to generate and add our Tracking Script to your website: 1. From your Crowd dashboard, click "Complete Installation" 2. Enter your website address (like yourwebsite.com) 3. Copy the tracking Script provided Adding the Code to Different Website Platforms WordPress: 1. Install the "Headers and Footers" plugin 2. Go to Settings → Headers and Footers 3. Paste the code in the Header section 4. Save changes Shopify: 1. Go to Online Store → Themes 2. Click "Actions" then "Edit code" 3. Open the theme.liquid file 4. Paste the code right before the </head> tag 5. Save changes Framer: 1. Open your project settings 2. Go to "Custom Code" 3. Add the code to the section 4. Save changes Wix: 1. Go to Site → Settings → Advanced → Custom Code 2. Click "+ Add Custom Code" 3. Paste the code and select "All pages" 4. Click "Apply" Webflow: 1. Go to Project Settings → Custom Code 2. Paste the code into the Head Code section 3. Publish your site with the changes 3. Check Your Installation Before collecting data, make sure your tracking Code is working: 1. In your Crowd dashboard, go to "Settings" → "Installation Check" 2. Click "Verify Installation" 3. If you see a green checkmark, you're ready to go! If verification fails: - Make sure the code is in the <head> section of your website - Check that there are no typing errors in the code - Your website is publicly accessible 4. Create Your First Heatmap Now you're ready to create a heatmap: 1. Go to Insights → Heatmaps in your dashboard 2. Click "Create New Heatmap" 3. Choose what to track: Single page (like your homepage) Multiple pages (like all blog posts) 4. Set how long to collect data (2-4 weeks is good) 5. Choose which devices to track (desktop, mobile, tablet) 6. Click "Start Collecting Data" Creating Your First Heatmap Now you're ready to start seeing how users interact with your site: 1. Go to "Insights" → "Heatmaps" in your dashboard 2. Click "Create New Heatmap" 3. Select what you want to track URL Options for Your Heatmap - Track a single page: Enter the exact URL (like "https://yoursite.com/home") - Track similar pages: Choose "URL contains" and enter common text (like "blog" to track all blog posts) - Track pages that start with: Great for tracking sections (like "products/") - Track pages that end with: Useful for specific file types (like ".html") Select Your Settings 1. Choose which devices to track: - Desktop - Mobile - Tablet - All devices 2. Pick the data collection time (1-4 weeks recommended for new sites) 3. Click "Start Collecting Data" (Show Image) Viewing / Generating Your Heatmap Once your heatmap has collected enough data (usually 100+ visitors): 1. Go to "Insights" → "Heatmaps" 2. Enter the URL you want to view Heatmap for 3. Select Time period (last 7 days, 30 days, etc.) 4. Select Filters and view your Heatmaps: Understanding Your Results Color meanings in Crowd's heatmaps: - Bright blue indicators (like the "18", "20", "16" shown): Represent interaction points or activity hotspots - Grey areas: Less interaction or engagement - White/empty spaces: Minimal or no user activity What to look for: - Blue numbered indicators showing where users are most active - Clear patterns in user navigation through your site - Areas with multiple indicators showing high engagement zones - Empty spaces that might indicate content users are skipping - Menu items that receive more attention (like "Platform" and "Resources" in the navigation) Interpreting the data: - Higher numbers typically indicate more frequent interactions - Clustered indicators suggest areas of strong user interest - Engagement across both desktop and mobile views (toggle between them to compare) - How the top navigation area performs compared to content lower on the page Remember that Crowd's clean, minimalist interface is designed to make these patterns immediately visible, helping you quickly identify opportunities for improvement without getting overwhelmed by excessive visual noise. Applying Filters to Your Heatmap Get even more specific insights by filtering your data: 1. Apply the "Filters" panel based on: Saving and Sharing Your Heatmap Want to save your findings or share them with your team? 1. Click "Save" to save your filters for later 2. Use "Export as" to download: PDF of your heatmap Common Questions How much traffic do I need for a good heatmap? At least 100 visitors to the page is recommended for meaningful results. How long does it take to collect data? Data starts collecting immediately, but allow 1-2 weeks for enough data to create useful insights. Can I see individual user journeys? Yes! Click "View Related Sessions" to see recordings of actual users navigating the page. Why is my heatmap not showing? Check that: - The page has enough visitors - The tracking code is properly installed - You've selected the correct URL format Using Crowd's AI Chat Crowd's most powerful feature is the AI Chat that works alongside your heatmaps: 1. From your dashboard, click on "AI Chat" in the main menu 2. Select the page you want to analyze or ask about your heatmap results 3. Ask questions like: - "Why are visitors not scrolling past my hero section?" - "How can I improve my form conversion rate?" - "What elements should I move above the fold?" 4. Get AI powered recommendations based on your actual visitor data The AI Chat combines your heatmap data with conversion optimization expertise to give you actionable steps that improve your business results. Need more help? Contact our support team via the chat bubble in your dashboard or email support@crowdapp.io.

Last updated on May 27, 2025

Types of Heatmaps on Crowd: See How Users Really Use Your Website

Heatmaps are visual tools that show you exactly how people interact with your website. Think of them as weather maps, but instead of showing rain or sunshine, they show where users click, scroll, and engage with your content. Crowd offers several types of heatmaps to help you improve your website and grow your business. What Makes Crowd's Heatmaps Special Before we dive into the different types, here's what makes Crowd's heatmaps stand out: - AI-powered insights: Crowd's AI chat can analyze your heatmaps and suggest improvements - Easy to understand: See complex user behavior at a glance - Action-oriented: Turn insights into business improvements quickly - Clean interface: Crowd's modern, minimalist design makes analyzing data straightforward 1. Click Heatmaps: Where Are Users Clicking? Click heatmaps show exactly where users tap or click on your website the most. On Crowd's interface, these appear as colored overlays on your actual webpage, with bright spots indicating the most clicked areas. Crowd offers several specialized click visualizations: - All clicks: Shows the complete picture of where users click most frequently - Dead clicks: Reveals where users click on non-interactive elements - Rage clicks: Highlights where users click repeatedly in frustration - Error clicks: Indicates clicks that resulted in errors or broken features - First clicks: Shows the first interaction users have with your page - Last clicks: Reveals the final click before users leave your page These different click views give you a comprehensive understanding of user behavior and potential pain points. What you will Learn: - Which buttons attract the most attention - If users are clicking on images or text that aren't actually clickable - Whether your important call to action buttons are being noticed - Which menu items users care about most - The common paths users take through your site (from first to last click) - Problem areas causing user frustration or errors How to Use This Information: - Move your most important buttons to "hot" areas - Make non clickable elements that users try to click into actual links - Fix any broken elements users are clicking on - Simplify your design by removing distractions that pull attention from important buttons - Optimize the user journey based on common click patterns Quick Tip: When you see users clicking on non clickable elements, it's a strong hint that they expect something to happen there. Consider making these elements interactive. 2. Scroll Heatmaps: How Far Do Your Users Go? Scroll heatmaps show how far down your page users scroll. The colors change from hot (red) at the top to cool (blue) as fewer people reach the bottom parts of your page. In Crowd's interface, you'll see a clear color gradient overlay on your webpage with numerical indicators showing percentage of users who reached each point. What you will learn: - The "average fold" the point where users typically need to start scrolling - What percentage of visitors see each part of your page - If people are missing important information because it's too far down - If your page is too long or too short for your content How to Use This Information: - Place your most important messages above the "average fold" - Add eye catching elements in "cold" areas to encourage more scrolling - Trim unnecessarily long pages if users aren't reaching the bottom - Position your call to action buttons where most people will see them Quick Tip: If less than 20% of users see your page's bottom section, consider moving that content higher up or making it more engaging! 3. Engagement Zone Maps: The Complete Picture Engagement zone Heatmaps (also known as "Area" heatmaps) combine click, scroll, and mouse movement data to show you which parts of your page users interact with most. Within Crowd's clean interface, these appear as color coded sections with different intensity levels showing varying engagement. What you will earn: - Which areas have the highest overall engagement - Content that captures attention in multiple ways - "Dead zones" that users mostly ignore - The most valuable sections of your page How to use this Information: - Focus your improvement efforts on highly engaged areas - Rework or remove content in dead zones - Compare engagement across different sections of your site - Get a complete understanding of how users experience your page Quick Tip: Crowd's AI chat can analyze your engagement zones and suggest specific improvements. 4. Device Specific Heatmaps: Desktop vs. Mobile vs. Tablet Crowd lets you view separate heatmaps for different devices because user behavior varies significantly across devices. The platform features a simple device selector in the interface to switch between views. What you will learn: - How behavior differs between desktop, tablet, and mobile users - Problems that only happen on certain devices - If your mobile design works as well as your desktop design - Which devices have better engagement with your content How to Use This Information: - Fix issues that only appear on specific devices - Improve the experience for the devices your audience uses most - Ensure your important elements work well across all devices - Create better responsive designs based on actual user behavior Quick Tip: Always check your mobile heatmaps first most websites now get more traffic from mobile than desktop. Using Crowd's Element Analysis with Your Heatmaps. From Insights to Business Growth The ultimate goal of using Crowd's heatmaps is to improve your business. Here's how insights turn into growth: 1. Find Problems: Use heatmaps to identify issues with your website 2. Make Changes: Implement improvements based on what you learn 3. Measure Results: Watch your conversion rates and business metrics improve 4. Repeat: Continue optimizing for ongoing growth Many Crowd users report 20-30% increases in conversion rates after making changes based on heatmap insights. Get Started with Crowd Heatmaps Today Here's how to start: 1. Log into your Crowd account 2. Click "Add Heatmap" and enter the URL you want to track 3. Choose which types of interactions to record (clicks, scrolls, etc.) 4. Wait for data to collect (usually 100+ visitors provides good insights) 5. Analyze your results and start making improvements! Remember: The best websites are constantly improving based on real user behavior and Crowd's heatmaps give you exactly that information. Need help? Crowd's support team is always ready to assist you through the chat button in the bottom corner of your dashboard

Last updated on May 27, 2025

Heatmaps and Filters in Crowd: A Simple Guide

Making Heatmaps Work for You with Filters Filters are like magic glasses that let you see how different groups of visitors interact with your website. Instead of seeing everyone's behavior mixed together, you can focus on specific visitor types to uncover insights. Why Use Filters with Your Heatmaps? Without filters, you're looking at everyone's behavior all mixed together. With filters, you can: - See if new visitors get confused by your website - Check if mobile users struggle with certain buttons - Find out if people from social media behave differently than those from Google - Focus on the visitors who matter most to your business Easy-to-Use Filters in Crowd Crowd organizes its powerful filters into four main categories: 1. Traffic Filters See differences based on where visitors came from and what they intended to do: - Traffic sources (Google search, paid ads, social media) - Intent (what visitors were trying to accomplish) - Campaign data - Landing pages Real-world use: Visitors from Instagram might behave differently than those from Google. This filter helps you create better landing pages for each traffic source. 2. Sessions Filters Filter based on visitor information and session details: - User ID - New/Returning visitors - Country - Region - City - Session duration Real-world use: New visitors don't know your site layout yet. The New/Returning filter helps you spot where first-time visitors might get lost or confused. 3. Behavior Filters Understand how visitors interact with your site: - Moved cursor - Clicked element - Entered text - Selected text - Rage clicks - Error clicks - First clicks - Dead clicks - Excessive scrolling - U-turn (leaving a page quickly) - Page scroll depth Real-world use: Rage clicks (when someone clicks rapidly in the same spot) often indicate user frustration. This filter helps you find and fix problematic elements on your site. 4. Technology Filters See how different devices and technologies affect user experience: - Device type (desktop, tablet, mobile) - Browser (Chrome, Safari, Firefox, Edge) - Operating system - Screen size Real-world use: If your mobile sales are lower than desktop, use the device filter to see if mobile users are missing important buttons or content. Practical Ways to Use Filtered Heatmaps Here are simple, real world ways to improve your website using filtered heatmaps: Find Conversion Problems 1. Use the Sessions filters to compare new vs. returning visitors 2. Look for differences in where they click and how far they scroll 3. Make changes to help new visitors navigate like experienced ones Spot User Frustration 1. Use the Behavior filters to find rage clicks and error clicks 2. These patterns show where users are getting stuck or confused 3. Fix these problem areas to improve user satisfaction and conversion rates Fix Mobile Experience 1. Use the Technology filters to show only mobile users 2. Look for areas where mobile users struggle (like tiny buttons or text that's hard to read) 3. Make mobile specific improvements to these elements Understand Different Traffic Sources 1. Use the Traffic filters to compare visitors from different sources (like Google vs. Facebook) 2. See what content each audience engages with most 3. Create custom landing pages optimized for each traffic source Identify Regional Differences 1. Use the Sessions filters to compare visitors from different countries 2. Look for differences in behavior patterns based on location 3. Consider creating region specific content or features Track Before & After Changes 1. Create heatmaps before making website changes 2. Make your updates 3. Create new heatmaps and compare the before/after results 4. See if visitor behavior improves in the ways you intended How to Apply Filters in Crowd: Step by Step 1. Log in to your Crowd dashboard 2. Go to Insights → Heatmaps 3. Select or enter the page Url you want to analyze 4. Click the "Filters" button (shown as a funnel icon at the top of the page) 5. Choose a category: Traffic, Sessions, Behavior, or Technology 6. Select specific filter criteria from the Properties column 7. Set your filter conditions and values 8. Click "View Heatmap" to update the heatmap with your filter Tips for Getting the Most from Filters - Start broad, then narrow down: First look at all users, then apply filters to investigate specific patterns - Compare similar time periods: When comparing segments, use the same date range - Check sample size: Make sure you have enough data in each filtered segment (at least 500-1000 pageviews) - Look for big differences: Small variations might be random, but big differences are worth investigating - Take notes: Keep track of what filters revealed interesting insights - Test your theories: If filters reveal a potential issue, confirm it by watching actual user sessions with Crowd's session recording feature Powerful Filter Combinations to Try These filter combinations often reveal useful insights: - New/Returning visitors (Sessions) + Device type (Technology): See how first time mobile users experience your site differently from regular desktop users - Traffic source (Traffic) + Clicked element (Behavior): Check if visitors from different sources click on different elements - Country (Sessions) + Rage clicks (Behavior): Understand if users from specific regions struggle with certain page elements - Intent (Traffic) + Page scroll depth (Behavior): See if visitors with different intentions scroll through your content differently Getting Help from Crowd's AI Chat Crowd's AI Chat is one of its most powerful features. Not sure what your heatmap data means? Just ask Crowds AI Chat Simply click on the chat icon and ask questions like: - "What do these heatmap patterns mean?" - "How can I improve my conversion rate based on this data?" - "What filter should I use to understand mobile bounce rates?" The AI will analyze your data and give you personalized recommendations. Remember, the ultimate goal of using Crowd's heatmaps and filters is to improve your business by creating a website that visitors love to use.

Last updated on May 27, 2025

Analyzing Your Heatmap Data

When to Start Analyzing: For reliable results, wait until you have - At least 1,000 - 3,000 page views - Data collected for 2-4 weeks - Enough visitors across all device types Viewing your Heatmaps: 1. Log in to your Crowd dashboard 2. Go to Insights → Heatmaps 3. Select the Url of the webpage you want to view heatmpas 4. Use filters and duration to explore your data, also use other tools for more specific data: What to look for Click Maps - Are users clicking your main buttons and links? - Are they clicking on non-clickable elements? - Which menu items get the most/least clicks? - Are distractions taking clicks away from important elements? Scroll Maps - How far down are users scrolling? - Where do most users stop scrolling? - Is important content being seen? - Does scroll depth differ by device type? Engagement Zones (Area Heatmaps) - Which areas have the highest overall engagement? - Are there dead zones with little interaction? - How does engagement flow through your page? Use Filters for deeper Analysis Filter your heatmap data to see how different user groups behave: - New vs. returning visitors - Traffic source (Google, social media, etc.) - Country or region - Browser type - Custom segments From Insights to Action Design Improvements - Make frequently clicked areas which are non-clickable elements into actual links - Move important content above where users stop scrolling - Fix areas with rage clicks - Simplify cluttered areas where clicks are scattered Content Changes - Put your best content where users engage most - Rewrite or remove content in areas users ignore - Add visual elements to encourage more scrolling - Break up long sections that lose user attention Conversion Boosts - Move call - to - action buttons to high engagement areas - Remove distractions near important buttons - Test different button placements based on click patterns Combining with other Tools Session Recordings Watch recordings of real users to understand the story behind your heatmap patterns. User Feedback Add Feedback Widget to pages with interesting heatmap patterns to learn why users behave as they do. Research Studies - Use heatmap insights to design effective research studies - Get qualitative insights to complement heatmap data - Validate your findings with user interviews and usability tests Best Practices - Compare over time: Look at heatmaps before and after making changes - Check all devices: User behavior often differs between desktop and mobile - Focus on important pages: Prioritize home page, product pages, and checkout - Share with your team: Make sure designers and developers see your findings - Review regularly: Check heatmaps every few months as user behavior changes.

Last updated on May 27, 2025

Viewing and Managing Screenshots in Crowd

Viewing Your Screenshots Screenshots in Crowd show exactly what your website looked like when the heatmap data was collected. This helps you understand your heatmap data in context and keep a record of your site's appearance over time. Why Screenshots Matter - Show exact layouts users were interacting with - Provide historical record of your site's appearance - Allow comparison of design changes over time - Give essential context for your heatmap data To access your Screenshots on Crowd 1. Log in to your Crowd dashboard 2. Go to Insights → Heatmaps 3. Enter the URL you want to view Heatmaps for 4. Click "Change screenshot" to see screenshot options 5. Select Screenshot to view Heatmaps of a particular page Types of Screenshots Available Full Page Screenshots Complete view of your webpage from top to bottom, including areas requiring scrolling Device Specific Screenshots - Desktop view - Tablet view - Mobile view Every new generated heatmap saves a new screenshot, creating a visual history of your site's evolution Screenshot Best Practices - Create baseline screenshots: Before making major design changes, create a heatmap to capture how your site looked before - Save screenshots for important pages: Keep a visual record of key pages like your homepage, product pages, and checkout - Use consistent viewports: When comparing screenshots over time, use the same device view for accurate comparison - Document changes: When making website changes, note what was changed and when, to help interpret heatmap differences Check all device types: Always look at mobile, tablet, and desktop screenshots as layouts can vary significantly Common Questions About Screenshots How often are screenshots updated? Screenshots are taken when you first create a heatmap. If your website design changes during data collection, you may need to create a new heatmap to get updated screenshots. Can I get screenshots of dynamic content? Crowd captures the state of your page at the moment the screenshot is taken. For pages with changing content (like slideshows or personalized content), the screenshot will show whatever was displayed at that moment. What if my page requires login? If your heatmap tracks a page that requires login, make sure you're logged in when setting up the heatmap so Crowd can access and screenshot the page correctly. Can I edit screenshots? You cannot edit screenshots directly in Crowd, but you can download them and edit them using image editing software if needed.

Last updated on May 27, 2025