{"version":3,"sources":["webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/pages/heatmaps/click-maps.js","webpack:///./src/helpers/transformImages.js"],"names":["module","exports","withUsabilityTestingTemplate","edges","useStaticQuery","allFile","images","transformImages","href","target","rel","fluid","clickmaps","node","childImageSharp","alt","title","webapp","hero","ab","className","src","arrow","list","res","el","name"],"mappings":"8EAAAA,EAAOC,QAAU,sT,kCCAjB,0HAuSeC,uBA/RG,WAChB,IACaC,EACTC,yBAAe,cADjBC,QAAWF,MAsBPG,EAASC,YAAgBJ,GAC/B,OACE,oCACE,oDAEA,2MAKA,kDACuB,IACrB,kBAAC,IAAD,CAAMK,KAAK,gCAAgCC,OAAO,SAASC,IAAI,uBAA/D,WAEQ,IAJV,yOAUA,0RAKA,+FAEA,wJAIA,mIAKA,uLAKA,wQAMA,6NAMA,2PAMA,weASA,+UAOA,4JAKA,kBAAC,IAAD,CACEC,MAAOL,EAAOM,UAAUC,KAAKC,gBAAgBH,MAC7CI,IAAI,2BACJC,MAAM,qGAIR,6GAEA,uRAGkE,KAGlE,+NAKA,sFAEA,uNAGW,IACT,kBAAC,IAAD,CAAMR,KAAK,0BAA0BC,OAAO,SAASC,IAAI,uBAAzD,oBAEQ,IANV,kFAUA,4CACiB,IACf,kBAAC,IAAD,CAAMF,KAAK,IAAIC,OAAO,SAASC,IAAI,uBAAnC,eAFF,+NAO2C,KAE3C,kBAAC,IAAD,CACEC,MAAOL,EAAOW,OAAOJ,KAAKC,gBAAgBH,MAC1CI,IAAI,+EACJC,MAAM,wDAER,4WAOA,2FAEA,sXAOA,iIAIA,qDAEA,gEACqC,IACnC,kBAAC,IAAD,CAAMR,KAAK,qCAAqCC,OAAO,SAASC,IAAI,uBAApE,4BAEQ,IAJV,4dAaA,0LAIA,iFAEA,0LAKA,8EAEA,6IAEsB,KAGtB,kBAAC,IAAD,CACEC,MAAOL,EAAOY,KAAKL,KAAKC,gBAAgBH,MACxCI,IAAI,yFACJC,MAAM,gDAER,iMAIA,iFAEA,2QAKA,kBAAC,IAAD,CACEL,MAAOL,EAAOa,GAAGN,KAAKC,gBAAgBH,MACtCI,IAAI,uDACJC,MAAM,mDAER,gTAIO,IACL,kBAAC,IAAD,CAAMR,KAAK,iCAAiCC,OAAO,SAASC,IAAI,uBAAhE,mBALF,KAUA,mFAEA,8HAEY,KAGZ,mQAMA,4QAKA,2FACA,+KAEkE,KAElE,4BACE,6FACA,yFACA,sHAIF,mUAI0B,IACxB,kBAAC,IAAD,CAAMF,KAAK,IAAIC,OAAO,SAASC,IAAI,uBAAnC,eAEQ,IAPV,4BAUA,yBAAKU,UAAU,gBACb,kBAAC,IAAD,CAAMZ,KAAK,+BACT,6BACE,wCACA,8EAEF,yBAAKa,IAAKC,IAAOP,IAAI,QAAQC,MAAM,uB,u4BC9RtC,IAAMT,EAAkB,SAACgB,GAE9B,IADA,IACA,EADMC,EAAM,GACZ,IAAiBD,KAAjB,aAAuB,CAAC,IAAbE,EAAY,QACrBD,EAAIC,EAAGZ,KAAKa,MAAQD,EAEtB,OAAOD","file":"component---src-pages-heatmaps-click-maps-js-b970e91ec5cfe63b0eba.js","sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTMuNUgxOC4yMjRMOS44MjQwMSAyMS45TDEyIDI0TDI0IDEyTDEyIDBMOS44OTk5OSAyLjEwMDAxTDE4LjIyNCAxMC41SDBWMTMuNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"","import React from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport { transformImages } from 'helpers/transformImages';\nimport withUsabilityTestingTemplate from 'hoc/content-cluster';\nimport Link from 'components/ui/link';\nimport Img from 'gatsby-image';\nimport arrow from 'img/ui/arrow_white.svg';\n\nconst ClickMaps = () => {\n  const {\n    allFile: { edges },\n  } = useStaticQuery(graphql`\n    query ClickMaps {\n      allFile(\n        filter: {\n          extension: { regex: \"/(jpg)|(jpeg)|(png)/\" }\n          relativeDirectory: { eq: \"heatmaps/click-maps\" }\n        }\n      ) {\n        edges {\n          node {\n            name\n            childImageSharp {\n              fluid(quality: 95) {\n                ...GatsbyImageSharpFluid_withWebp\n              }\n            }\n          }\n        }\n      }\n    }\n  `);\n  const images = transformImages(edges);\n  return (\n    <>\n      <h2>What is a click map?</h2>\n\n      <p>\n        Imagine being able to clearly gauge which areas of your site visitors click on, which\n        pictures grab their attention, and which portions of the copy are the most persuasive.\n      </p>\n\n      <p>\n        This is what a click{' '}\n        <Link href=\"/heatmaps/what-is-a-heat-map/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          heatmap\n        </Link>{' '}\n        does. This visual guide represents clicks on all the clickable data on your website.\n        Anything from images and buttons to links, or elements that are hyperlinked and take users\n        to different sections or other pages on your website.\n      </p>\n\n      <p>\n        They can also show if there are areas on your website with a low click rate. These are the\n        red flags you need to watch out for, especially if you are witnessing massive drop-off rates\n        or certain content is not attracting user interaction as it should.\n      </p>\n      <h2>5 best practices for click heatmaps to boost website engagement</h2>\n\n      <p>\n        So, how can you ensure that a click heatmap will boost your on-site engagement? Here are\n        some best practices to consider.\n      </p>\n      <h3>\n        1. Use click maps to identify which Call to Actions (CTAs) on your site have the highest\n        click rate\n      </h3>\n\n      <p>\n        CTAs guide visitors to make decisions on your website, and help users to better understand\n        what the expectation is when they interact with your content.\n      </p>\n\n      <p>\n        A good example is an eCommerce shop. Using CTAs such as “Shop Now” or “Add to basket” can\n        offer cues as to where these hyperlinked buttons will take them or what decisions they will\n        be making once they have selected a certain action.\n      </p>\n\n      <p>\n        However, these CTAs can sometimes also cause confusion and result in drop-offs when users\n        are unsure of what to do next. They might even decide not to proceed further due to unclear\n        wording.\n      </p>\n\n      <p>\n        A click map can help you to identify which CTAs are getting good click rates and which ones\n        are not grabbing users’ attention. Understanding the user intent can clarify why people are\n        taking certain actions on your site.\n      </p>\n\n      <p>\n        Once you have identified the best performing CTAs, you need to decide whether these buttons\n        and links are getting the types of engagement that you are looking for. If, for instance,\n        you have a website that allows users to use free online tools for keyword research, you\n        would create a CTA that says “Use Free Keyword Tool Now”. After all, you want your visitors\n        to use the tool and potentially, following a pleasant user experience, sign up for a paid\n        plan.\n      </p>\n\n      <p>\n        This is why it is important not to play all your cards at the same time. Your website\n        visitors are not all at the same place in the sales funnel when they visit your website –\n        which means immediately expecting a “use more/all features” CTA wouldn’t be something\n        everyone would initially be interested in.\n      </p>\n\n      <p>\n        Use your click heatmap data to map out a natural flow on your website – do not bombard your\n        users with too many CTAs at once!\n      </p>\n\n      <Img\n        fluid={images.clickmaps.node.childImageSharp.fluid}\n        alt=\"Clickmaps by LiveSession\"\n        title=\"Use click maps to identify which Call to Actions (CTAs) on your site have the highest\n        click rate\"\n      />\n\n      <h3>2. Improve your users’ shopping experiences by consulting your click map data</h3>\n\n      <p>\n        As mentioned earlier, click heat map data can help you identify where customers are clicking\n        the most. Not only do they collect insights for actual buttons, but they also show you which\n        non-clickable elements users mistakenly assume are hyperlinked.{' '}\n      </p>\n\n      <p>\n        Based on your gathered data, you might be able to boost engagement and conversion if you\n        place your Call to Action buttons, such as “Buy Now”, in the places or elements that get the\n        most hits.\n      </p>\n      <h3>3. Use a tool that tracks rage clicks and error clicks</h3>\n\n      <p>\n        Have you ever heard the phrases “rage clicks” or “rapid-fire” clicks? These types of clicks\n        where users are repeatedly and rapidly clicking on different website contents likely\n        indicate{' '}\n        <Link href=\"/blog/user-frustration/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          user frustration\n        </Link>{' '}\n        – a big red flag that you need to optimize your website for better engagement.\n      </p>\n\n      <p>\n        Tools, such as{' '}\n        <Link href=\"/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          LiveSession\n        </Link>\n        , can help you pinpoint errors and bugs that cause user problems and lower your engagement\n        rates. These include aspects such as non-clickable elements where users might be keen to\n        shop for a product on an eCommerce site.{' '}\n      </p>\n      <Img\n        fluid={images.webapp.node.childImageSharp.fluid}\n        alt=\"Click heatmaps – an example of rage and error clicks analysis in LiveSession\"\n        title=\"Use a tool that tracks rage clicks and error clicks\"\n      />\n      <p>\n        For instance, in a fashion online store, shoppers might be hovering and clicking on an image\n        of a t-shirt, assuming there’s a hyperlink that will display more product info. Hyperlinking\n        these images could boost conversions and positive click rates – all by using your click map\n        data to correct areas on your website’s user interface.\n      </p>\n\n      <h3> 4. Back your website improvements by the data you gathered</h3>\n\n      <p>\n        Once you’ve determined where your website visitors are spending the most of their time, you\n        can analyze it with your team and decide which parts of your website should be optimized.\n        This can be anything from adding features such as the above-mentioned hyperlinked images or\n        more engaging content with great CTAs that will pique their interest.\n      </p>\n\n      <p>\n        Remember not to “lose” the elements on your website that work – enhancement is what you are\n        after!\n      </p>\n      <h3>5. Fix your user flow</h3>\n\n      <p>\n        Your website’s user flow describes{' '}\n        <Link href=\"/user-experience/user-journey-map/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          the journey a user takes\n        </Link>{' '}\n        to complete certain actions. Using click maps can indicate where there are hiccups in the\n        process. Say, for instance, that a user wants to add a product on an eCommerce website to\n        their wish list. When they click “add to wish list”, it immediately adds the product cart,\n        which the user doesn’t want yet as they are not 100% sure if they want to complete the\n        purchase. Forcing their hand could lead to a drop off midway into their journey or not even\n        bothering to continue.\n      </p>\n\n      <p>\n        Testing your website’s journey together with your click heatmaps data can help you identify\n        these glitches and fix your user flow to boost user engagement.\n      </p>\n      <h2>3 types of tools worth using with your click maps</h2>\n\n      <p>\n        Boosting your website’s engagement and click rates can be further enhanced by combining your\n        click maps with other online tools. Here are some to consider.\n      </p>\n\n      <h3>1. Use jointly with session recording software</h3>\n\n      <p>\n        A session can be defined as the set time a user has interacted with your website based on a\n        specific timeframe.{' '}\n      </p>\n\n      <Img\n        fluid={images.hero.node.childImageSharp.fluid}\n        alt=\"Using click maps with session recording software – a great way for boosting conversion\"\n        title=\"Use jointly with session recording software\"\n      />\n      <p>\n        Using session recording software with your click maps can reveal on a per user basis where\n        someone clicked during various phases of their user experience journey.\n      </p>\n      <h3>2. Include click maps to support your A/B testing</h3>\n\n      <p>\n        A/B testing for websites – which is comparing two versions of a design and interface to see\n        which design is performing the best – can help you improve your user flow and as a result\n        boost engagement thanks to a smoother web interaction.\n      </p>\n      <Img\n        fluid={images.ab.node.childImageSharp.fluid}\n        alt=\"A/B testing is a great supplement to your click maps\"\n        title=\"Include click maps to support your A/B testing\"\n      />\n      <p>\n        When you have your two options and have your click map software ready, you are able to\n        determine if any design or function changes are for the better or made certain parts of the\n        user journey worse. For this purpose, you can, for instance, integrate your click map tool\n        with{' '}\n        <Link href=\"/integrations/google-optimize/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          Google Optimize\n        </Link>\n        .\n      </p>\n      <h3>3. Combine click maps with other types of heat maps</h3>\n\n      <p>\n        Using click maps together with other heat maps can provide a more rounded view of user\n        behavior.{' '}\n      </p>\n\n      <p>\n        Scroll maps can help you identify at which points users stopped scrolling certain pages.\n        This could be a clear sign that you need to consider updating your content and functionality\n        – including your website’s clickable elements.\n      </p>\n\n      <p>\n        Mouse tracking/hover maps, which are best tested in person using eye-tracking software, can\n        indicate where users lingered on the content or paused to read more. This can reveal which\n        pieces of content proved the most interesting to them.\n      </p>\n      <h2>Boosting engagement rates with click maps – final thoughts </h2>\n      <p>\n        Using click heat map data can significantly improve your website by boosting user\n        experience. To improve user engagement, remember the following:{' '}\n      </p>\n      <ul>\n        <li>Optimize your CTAs and their placement based on your findings</li>\n        <li>Consider areas of your user flow that require improvement</li>\n        <li>\n          Continuously test new features and fix any glitches that you find during the process.\n        </li>\n      </ul>\n      <p>\n        Click maps are a great way of optimizing your website for getting more leads. Consider using\n        these online software tools as part of your business strategy today! If you’re on the\n        lookout for a click map tool that can be smoothly integrated with other types of usability\n        testing software, check{' '}\n        <Link href=\"/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          LiveSession\n        </Link>{' '}\n        – we offer a free trial!\n      </p>\n      <div className=\"next-chapter\">\n        <Link href=\"/heatmaps/heatmap-analysis/\">\n          <div>\n            <p>Chapter 5</p>\n            <p>How to analyze heatmaps – a step-by-step guide</p>\n          </div>\n          <img src={arrow} alt=\"arrow\" title=\"white arrow\" />\n        </Link>\n      </div>\n    </>\n  );\n};\n\nexport default withUsabilityTestingTemplate(ClickMaps);\n","/* eslint-disable no-restricted-syntax */\n/* eslint-disable guard-for-in */\nexport const transformImages = (list) => {\n  const res = [];\n  for (const el of list) {\n    res[el.node.name] = el;\n  }\n  return res;\n};\n"],"sourceRoot":""}