{"version":3,"sources":["webpack:///./src/pages/heatmaps/heatmap-analysis.js","webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/helpers/transformImages.js"],"names":["withUsabilityTestingTemplate","edges","useStaticQuery","allFile","images","transformImages","href","target","rel","fluid","ganalytics","node","childImageSharp","alt","title","width","height","autoPlay","muted","loop","src","type","scrollmap","eye","woocommerce","className","arrow","module","exports","list","res","el","name"],"mappings":"+FAAA,0HAsQeA,uBA9PS,WACtB,IACaC,EACTC,yBAAe,cADjBC,QAAWF,MAsBPG,EAASC,YAAgBJ,GAC/B,OACE,oCACE,4EACA,sHACA,0FACA,6QAG2D,IACzD,kBAAC,IAAD,CAAMK,KAAK,gCAAgCC,OAAO,SAASC,IAAI,uBAA/D,WAEQ,IANV,wQAWA,kBAAC,IAAD,CACEC,MAAOL,EAAOM,WAAWC,KAAKC,gBAAgBH,MAC9CI,IAAI,yFACJC,MAAM,iDAER,uDACA,uOAKA,mFAEA,uDAC4B,IAC1B,kBAAC,IAAD,CAAMR,KAAK,gCAAgCC,OAAO,SAASC,IAAI,uBAA/D,mBAEQ,IAJV,uWAQ8F,KAE9F,sKAIA,sEACA,+EACA,4BACE,4BACE,wFADF,6GAIA,4BACE,4EADF,gSAMA,4BACE,oEADF,mRAOF,iLAIA,2BAAOO,MAAM,OAAOC,OAAO,OAAOC,UAAQ,EAACC,OAAK,EAACC,MAAI,GACnD,4BACEC,IAAI,2GACJC,KAAK,gBAGT,uFAEA,+OAG+B,KAG/B,sTAIc,KAEd,kBAAC,IAAD,CACEZ,MAAOL,EAAOkB,UAAUX,KAAKC,gBAAgBH,MAC7CI,IAAI,kDACJC,MAAM,2DAER,8PAGiD,KAEjD,yGAEA,4TAIe,KAGf,wXAIwE,KAExE,kBAAC,IAAD,CACEL,MAAOL,EAAOmB,IAAIZ,KAAKC,gBAAgBH,MACvCI,IAAI,yEACJC,MAAM,8EAGR,sKAIA,oGAEA,0QAGqD,KAGrD,2JAIA,kDACA,qqBAUA,kBAAC,IAAD,CACEL,MAAOL,EAAOoB,YAAYb,KAAKC,gBAAgBH,MAC/CI,IAAI,cACJC,MAAM,uBAGR,qCACU,IACR,kBAAC,IAAD,CACER,KAAK,2DACLC,OAAO,SACPC,IAAI,gCAHN,gBAQF,6EACA,2BACG,IADH,iQAIwE,KAGxE,gVAIqC,KAGrC,qEAEA,2MAEqF,IACnF,kBAAC,IAAD,CAAMF,KAAK,sBAAsBC,OAAO,SAASC,IAAI,uBAArD,qBAEQ,IALV,yaAYA,uEACA,oHACA,4BACE,2SAKA,mHACuF,KAEvF,gHACA,iIAKF,kRAGwE,IACtE,kBAAC,IAAD,CAAMF,KAAK,IAAIC,OAAO,SAASC,IAAI,uBAAnC,eAEQ,IANV,2BAO2B,KAE3B,yBAAKiB,UAAU,gBACb,kBAAC,IAAD,CAAMnB,KAAK,gCACT,6BACE,wCACA,kFAEF,yBAAKc,IAAKM,IAAOb,IAAI,QAAQC,MAAM,uB,mBC/P7Ca,EAAOC,QAAU,sT,u4BCEV,IAAMvB,EAAkB,SAACwB,GAE9B,IADA,IACA,EADMC,EAAM,GACZ,IAAiBD,KAAjB,aAAuB,CAAC,IAAbE,EAAY,QACrBD,EAAIC,EAAGpB,KAAKqB,MAAQD,EAEtB,OAAOD","file":"component---src-pages-heatmaps-heatmap-analysis-js-6ce3ad8ce5245adfb291.js","sourcesContent":["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 HeatmapAnalysis = () => {\n const {\n allFile: { edges },\n } = useStaticQuery(graphql`\n query HeatmapAnalysis {\n allFile(\n filter: {\n extension: { regex: \"/(jpg)|(jpeg)|(png)/\" }\n relativeDirectory: { eq: \"heatmaps/heatmap-analysis\" }\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
Below, we share a few tips which will help you make the most of your heatmap analytics.
\n\n You might be wondering – is there such a thing as a ‘Google Analytics heat map’? Not quite!\n However, Google Analytics is a great starting point in your heatmap endeavors, as it helps\n you decide which webpages it would be worth setting up a{' '}\n \n heatmap\n {' '}\n on. Among others, these can be pages that have a disturbingly low conversion rate or a\n bounce rate well above your industry standard. The general rule of thumb is to focus on\n pages with sufficient traffic to ensure that your analysis is statistically relevant.\n
\n\n Assuming that you’ve set up a heat map, you may now be wondering how to read it. Here’s an\n explanation of the general rules and those relevant to specific heatmap types, such as click\n and scroll maps.\n
\n\n In the most simple terms,{' '}\n \n heat map colors\n {' '}\n indicate areas on your webpage which are “hot” (i.e., get a lot of engagement, such as\n clicks, looks, or scrolls) and those which are “cold” (get the fewest notices or interaction\n from site visitors). The “hotter” the area, the warmer the color – think of yellows,\n oranges, and reds (with the latter colors pointing to the most noticed parts of your page).{' '}\n
\n\n Respectively, areas with few interactions will be marked in green and blue (to remember,\n it’s good to think of blue as being ice-cold).\n
\nUsing a click map can help you do the following:
\n\n Here’s where a usability tool like LiveSession will come to the rescue, allowing you to\n easily spot customer frustration in your heatmap analysis.\n
\n \n\n Another benefit of using heatmap analytics is assessing the relevance of your content. To\n learn if people lose interest you can turn to scroll maps – they’ll help you check how far\n down the page people scroll.{' '}\n
\n\n\n It’s worth bearing in mind that just because someone stops scrolling at half the page,\n doesn’t mean they aren’t interested in your content or your offer – it’s just one of the\n possible scenarios. It might also indicate they got answers to their questions and are ready\n to convert.{' '}\n
\n\n To find the reason why people stopped scrolling, you should ask additional questions, like\n did they click on any CTA’s? To get a detailed overview of how visitors behave on your\n website you should turn to session recordings.{' '}\n
\n\n One of the ways of creating a good user experience for site visitors is paying attention to\n the elements that are frequently ignored. You must find the reason behind any unexpected\n behavior – are there any areas that get zero clicks, or parts of the page where people don’t\n look at all?{' '}\n
\n\n\n Eye-tracking is also handy in spotting eye fixation – it might tell you where to place your\n CTAs, as it shows what elements people spend the most time looking at. It can also indicate\n the same for written content – for example, something you wrote on the page is too difficult\n to understand, which is why people spend too much time looking at it.{' '}\n
\n\n Bear in mind that eye-tracking is, however, a method that requires a special device, which\n means it’s mostly used in a lab environment.\n
\n\n Now that you know how to read a heatmap, it’s worth addressing the issue of heatmap bias. As\n you can see from the above section, heat maps will tell you a lot about what is happening on\n your site. However, it will not always reveal why.{' '}\n
\n\n\n For this reason, you should supplement your heatmap analysis findings with data from other\n tools. We particularly recommend:\n
\n\n Unlike heatmaps which show you the bulk of interactions, session recordings allow you to\n watch recordings of specific users. Let’s assume a scenario where you notice on your heatmap\n that your “add to cart” button gets a high volume of clicks, but it doesn’t translate to the\n number of people who proceed into the purchase finalization user path. To find the reason,\n you might decide to turn to session recordings. After watching, say, 10 videos of various\n user sessions you notice that an error is to blame – people click on the “add to cart”\n element on their wishlist page, but the button doesn’t work, so users simply decide to leave\n your site.\n
\n\n Source:{' '}\n \n WooCommerce\n \n
\n\n {' '}\n As mentioned earlier, while heatmaps can help you spot problematic pages or areas, it might\n be difficult to draw any conclusions solely based on heatmap data. If you want to understand\n the ‘why’ behind user behavior, then we recommend turning to surveys.{' '}\n
\n\n\n You can include a survey directly on your page, asking ‘Did you find everything you were\n looking for’ or ‘Could you please tell us what we can improve?’. Alternatively, you could\n send out a survey to your users asking them a few questions related to the problematic areas\n you have identified with heatmaps.{' '}\n
\n\n\n Sometimes, nailing down the reasons behind UX or conversion-related issues requires closer\n user investigation than any online software can give. Here’s where you can turn to{' '}\n \n usability testing\n {' '}\n sessions, which let you ask a group of people to complete a task on your website (for\n example, finalizing a purchase or finding a category in the site menu). While they do so,\n you can either watch them live or even ask follow-up questions to understand what they’re\n doing. This creates a great opportunity for what many other user-related tools lack, i.e.,\n the chance to note down a decent volume of qualitative feedback.\n
\nIn order to make the most of your heatmap analytics, we recommend the following tips:
\n\n Remember that in order to avoid heatmap bias, it’s worth cross-referencing your findings\n with data from other tools like user recordings or surveys. If you’re searching for a\n platform that combines session recordings and heatmaps then check out{' '}\n \n LiveSession\n {' '}\n – we offer a free trial.{' '}\n
\nChapter 6
\nThe top benefits of using heatmaps on your website
\n