\n \n \n);\n\nexport default FeaturesPage;\n","import React from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport { transformImages } from 'helpers/transformImages';\n\nexport const purpleCards = [\n {\n id: 0,\n desc: 'Advanced filtering will help you remain focused on the crucial recordings only.',\n title: 'Filters',\n },\n {\n id: 1,\n desc: 'Save filter presets and segment your visitor’s base so you can quickly start where you left off.',\n title: 'Segments',\n },\n {\n id: 2,\n desc: 'Set up daily or weekly notifications and get notified about changes in segments you created.',\n title: 'Segment notifications',\n },\n {\n id: 3,\n desc: 'Cut off unimportant traffic from being tracked. Reduce the clutter in your sessions list.',\n title: 'Recording rules',\n },\n];\n\nexport const blueCards = [\n {\n id: 0,\n desc: 'Watch recurring sessions of a single user and see how changes you made impact their buying decisions.',\n title: 'User identification',\n },\n {\n id: 1,\n desc: 'Add more context to each session and give your support team an extra piece of data to provide better customer experience.',\n title: 'Custom properties',\n },\n {\n id: 2,\n desc: 'Extend your filter list with industry-specific events to better suit your needs. Track actions that bring your visitors closer to making a buying decision.',\n title: 'Custom events',\n },\n];\n\nexport const yellowCards = [\n {\n id: 0,\n title: 'Session replays',\n desc: 'See what users do on your website and find bottlenecks in your user’s journey.',\n },\n {\n id: 1,\n title: 'Funnels',\n desc: `Analyze paths that can lead to conversion and get to know which one you should improve.`,\n },\n {\n id: 2,\n title: 'Click & Heat Maps',\n desc: `Find places on your website where a visit will most likely convert into a sale. `,\n },\n {\n id: 3,\n title: 'Dev Tools',\n desc: `Detect JavaScript errors on the spot and debug your web application with ease.`,\n },\n];\n\nexport const useFeatureData = () => {\n const {\n session,\n heatmap,\n devtools,\n funnels,\n allFile: { edges },\n } = useStaticQuery(graphql`\n query {\n session: file(relativePath: { eq: \"ecommerce/session.png\" }) {\n childImageSharp {\n fluid(quality: 95, maxWidth: 1600) {\n ...GatsbyImageSharpFluid_tracedSVG\n }\n }\n }\n heatmap: file(relativePath: { eq: \"ecommerce/heatmap.png\" }) {\n childImageSharp {\n fluid(quality: 95, maxWidth: 1600) {\n ...GatsbyImageSharpFluid_tracedSVG\n }\n }\n }\n devtools: file(relativePath: { eq: \"ecommerce/devtools.png\" }) {\n childImageSharp {\n fluid(quality: 95, maxWidth: 1600) {\n ...GatsbyImageSharpFluid_tracedSVG\n }\n }\n }\n funnels: file(relativePath: { eq: \"ecommerce/funnels.png\" }) {\n childImageSharp {\n fluid(quality: 95, maxWidth: 1600) {\n ...GatsbyImageSharpFluid_tracedSVG\n }\n }\n }\n allFile(\n filter: {\n extension: { regex: \"/(jpg)|(jpeg)|(png)/\" }\n relativeDirectory: { eq: \"featurePhotos\" }\n }\n ) {\n edges {\n node {\n name\n childImageSharp {\n fluid(quality: 95, maxWidth: 1600) {\n ...GatsbyImageSharpFluid_tracedSVG\n }\n }\n }\n }\n }\n }\n `);\n\n const pics = transformImages(edges);\n\n return {\n yellow: {\n cards: yellowCards,\n images: [session, funnels, heatmap, devtools],\n },\n blue: {\n cards: blueCards,\n images: [pics.blue1, pics.blue2, pics.blue3],\n },\n purple: {\n cards: purpleCards,\n images: [pics.purple1, pics.purple2, pics.purple3, pics.purple4],\n },\n featureCards: [\n {\n title: 'Engagement score',\n desc: (\n <>\n \n Find the most engaging sessions without having to watch them all. Our Engagement score\n allows you to focus on recordings with the most (or least) user activity. The rating\n depends on many factors, including the number of pages visited by your users and the\n number of clicks during the session. The Engagement score will{' '}\n show you the most important sessions automatically.\n
\n \n ),\n image: pics.engagement.node.childImageSharp.fluid,\n },\n {\n title: 'User journey',\n desc: (\n <>\n \n A user journey is a path your visitors take when exploring your website. In\n LiveSession, you can easily watch and analyze it. It will help you{' '}\n improve the sales funnel in your store or make adjustments to your\n website’s navigation. You can also use it to track events that led to conversions and\n see how they contributed to achieving your goals.\n
\n \n ),\n image: pics.userjourney.node.childImageSharp.fluid,\n },\n {\n title: 'Rage clicks & error clicks',\n desc: (\n <>\n \n Rage clicks and Error clicks{' '}\n automatically spot pain points and errors on your website. Rage click\n happens when your visitor keeps clicking on an UI element repeatedly and may indicate\n your visitors frustration. Error clicks are reported when a JavaScript error occurs.\n LiveSession marks them automatically to make it easier for you to{' '}\n find the most urgent issues.\n
\n \n ),\n image: pics.errors.node.childImageSharp.fluid,\n },\n {\n title: 'Inspect mode',\n desc: (\n <>\n \n While watching a recording, you can{' '}\n select any particular element of your website and see how it’s used.\n This allows you to browse sessions in which your users interact with this element.\n Depending on your needs, you can search by CSS selectors or by text. With Inspect\n mode, you can interpret A/B tests results or understand how users\n interact with your website.\n
\n \n ),\n image: pics.inspect.node.childImageSharp.fluid,\n },\n ],\n personalData: {\n mainImage: pics.personaldata.node.childImageSharp.fluid,\n },\n };\n};\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","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}"],"sourceRoot":""}![\"GDPR]({badge} "\\"GDPR")
\n \n \n ![\"CCPA]({badge2} "\\"CCPA")
\n \n