{"version":3,"sources":["webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/components/ui/image-modal.js","webpack:///./src/components/Link.js","webpack:///./src/pages/help/how-do-the-custom-events-work.js","webpack:///./src/img/help/custom-events/custom-events1.png","webpack:///./src/img/help/custom-events/custom-events4.png","webpack:///./src/img/help/custom-events/custom-events2.png","webpack:///./src/icons/alertIcons.js","webpack:///./src/components/information/index.js"],"names":["Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","className","style","defaultProps","Container","Box","Close","span","ImageWrapped","img","Image","ImageModal","escFunction","event","showModal","state","keyCode","closeModal","setState","openModal","window","innerWidth","componentDidMount","document","addEventListener","this","componentWillUnmount","removeEventListener","render","src","imgStyle","imgModalStyle","alt","title","lazy","modal","onClick","loading","React","Component","Link","children","blank","href","additionalProps","target","DevelopersLink","h","process","startsWith","related","link","description","frontmatter","metaTitle","metaDescription","canonical","Wrapped","Article","color","inline","lang","marginTop","marginBottom","customevent1","customevent2","margin","customevent4","section","module","exports","warning","width","height","viewBox","fill","xmlns","fillRule","d","clipRule","success","danger","info","cx","cy","r","Alert","Text","p","Information","filterIcon","Object","entries","icons","filter","icon","undefined"],"mappings":"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","file":"component---src-pages-help-how-do-the-custom-events-work-js-224d8734ef065abe430e.js","sourcesContent":["import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Card = styled.div`\n margin: ${(props) => (props.setMarginBottom ? '2rem 0' : '2rem 0 3rem')};\n border: none;\n\n ${media.desktop} {\n margin: ${(props) => (props.setMarginBottom ? '1.25rem 0' : '1.25rem 0 2rem')};\n }\n`;\n\nexport const CardBody = styled.div`\n box-shadow: 0px 0px 10px #00000029;\n padding: 0;\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImageModal from 'components/ui/image-modal';\nimport * as Styled from './styled';\n\nconst HelpImage = (props) => {\n const { cardStyle, setMarginBottom } = props;\n return (\n \n \n \n \n \n );\n};\n\nexport default HelpImage;\n\nHelpImage.propTypes = {\n cardStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n setMarginBottom: PropTypes.bool,\n};\n\nHelpImage.defaultProps = {\n cardStyle: null,\n setMarginBottom: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n top: 0;\n left: 0;\n position: fixed;\n width: 100%;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 99999;\n`;\n\nconst Box = styled.div`\n background-color: transparent;\n position: relative;\n width: 95vw;\n height: 95vh;\n padding: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n`;\n\nconst Close = styled.span`\n position: absolute;\n font-size: 1.8rem;\n right: 20px;\n top: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n background-color: #fff;\n border-radius: 100px;\n width: 40px;\n height: 40px;\n padding-bottom: 3px;\n filter: drop-shadow(5px 1px 4px rgba(0, 0, 0, 0.2));\n z-index: 10;\n`;\n\nconst ImageWrapped = styled.img`\n max-width: 100%;\n max-height: 100%;\n display: block;\n margin: 0 auto;\n border: none;\n`;\nconst minWidthToShow = 600;\n\nconst Image = styled.img`\n border: 1px solid #eaebec;\n max-width: 100%;\n height: auto;\n\n @media (min-width: ${minWidthToShow}px) {\n cursor: pointer;\n }\n`;\n\nclass ImageModal extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n showModal: false,\n };\n }\n\n componentDidMount() {\n document.addEventListener('keydown', this.escFunction, false);\n }\n\n componentWillUnmount() {\n document.removeEventListener('keydown', this.escFunction, false);\n }\n\n escFunction = (event) => {\n const { showModal } = this.state;\n\n if (event.keyCode === 27 && showModal) {\n this.closeModal();\n }\n };\n\n closeModal = () => {\n this.setState({ showModal: false });\n };\n\n openModal = () => {\n if (window.innerWidth >= minWidthToShow) {\n this.setState({ showModal: true });\n }\n };\n\n render() {\n const { showModal } = this.state;\n const { src, imgStyle, imgModalStyle, alt, title, lazy } = this.props;\n\n const modal = (\n \n ×\n \n \n \n \n );\n\n return (\n <>\n \n {showModal && modal}\n \n );\n }\n}\n\nexport default ImageModal;\n\nImageModal.propTypes = {\n src: PropTypes.string.isRequired,\n imgStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n imgModalStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n alt: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n lazy: PropTypes.bool,\n};\n\nImageModal.defaultProps = {\n lazy: false,\n imgStyle: null,\n imgModalStyle: null,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction hrefHelper(h) {\n return h.startsWith('/') ? h : `/${h}`;\n}\n\nexport function Link({ children, blank, href }) {\n const additionalProps = {};\n\n if (blank) {\n additionalProps.target = '_blank';\n }\n\n return (\n \n {children}\n \n );\n}\n\nLink.propTypes = {\n blank: PropTypes.bool,\n href: PropTypes.string.isRequired,\n children: PropTypes.node.isRequired,\n};\n\nLink.defaultProps = {\n blank: false,\n};\n\nexport function DevelopersLink({ children, href, ...props }) {\n const additionalProps = {\n href: `${process.env.GATSBY_LS_DEVELOPERS_URL}${hrefHelper(href)}`,\n };\n\n return (\n \n {children}\n \n );\n}\n\nDevelopersLink.propTypes = {\n href: PropTypes.string.isRequired,\n children: PropTypes.node.isRequired,\n};\n","import React from 'react';\nimport Article, { SubTitle } from 'components/help/helpArticle';\nimport Image from 'components/help/helpImage';\nimport customevent1 from 'img/help/custom-events/custom-events1.png';\nimport Link from 'components/ui/link';\nimport Code from 'components/help/codeSnippet';\nimport customevent2 from '../../img/help/custom-events/custom-events2.png';\nimport customevent4 from '../../img/help/custom-events/custom-events4.png';\nimport { DevelopersLink } from '../../components/Link';\nimport { Information } from '../../components/information';\n\nconst Content = () => {\n return (\n
\n \n Custom Events are available via JS API.{' '}\n \n Learn\n {' '}\n how to use it.\n \n Custom Event - what is it?\n

\n Custom events allow you to capture more data with every interaction your customers make with\n your website, according to your business needs. You decide how custom events are triggered\n (i.e., clicking a specific button or performing a set of predefined actions). Use Custom\n events as filters to search sessions\n that match your research criteria to make it more accurate.\n

\n How to pass Custom Event to LiveSession?\n

\n To pass Custom Events to LiveSession, call the __ls(“track”) function:\n

\n \n ls("track", "User Subscribed")\n \n Where can I find Custom Events?\n

\n Custom Events are available on our filters list. You can find it under toggled search input.\n

\n \n

\n Choose one or more Custom Events you passed to LiveSession and use them as a search term.\n All of the events you sent will be listed on a filters list. If you don’t see your events,\n please ensure you sent at least one custom event using our{' '}\n \n API\n \n .\n

\n

The value of a custom event will be identical to its name:

\n \n

\n You can pass up to 50 properties with every event to better understand your visitors’\n behavior. Here’s an example of a code snippet:\n

\n {`__ls(\"track\", \"User Subscribed\", {\n plan_str: \"premium\",\n seats_int: 1,\n total_float: 255.50,\n isPatron_bool: true\n});`}\n \n Remember to update sample values. You have to trigger the function on every page view as we\n do not store custom properties’ values in any way.\n \n

\n Custom events and their properties will be available on the{' '}\n session player’s timeline, on the right side of\n the screen:\n

\n\n \n

\n If you want to send custom events, please refer to our{' '}\n \n technical documentation\n \n .\n

\n
\n );\n};\n\nconst related = [\n {\n link: '/help/what-is-a-session/',\n title: 'What is a session?',\n description: 'A session is a set of the user’s interactions with a website within a timeframe.',\n },\n {\n link: '/help/how-does-the-search-work/',\n title: 'How does the Search work?',\n description: 'See how Search does looks like and how it works.',\n },\n {\n link: '/help/how-does-the-timeline-work/',\n title: 'How does the Timeline work?',\n description: 'See how Timeline does looks like and how it works.',\n },\n];\n\nexport const frontmatter = {\n metaTitle: 'How do the Custom Events work?',\n metaDescription: 'Wondering about the usability of our Custom Events? Read here.',\n canonical: '/help/how-do-the-custom-events-work/',\n};\n\nconst Wrapped = Article(Content);\n\nexport default () => (\n \n);\n","module.exports = __webpack_public_path__ + \"static/custom-events1-2363618a26feef9f1abec016039e13c9.png\";","module.exports = __webpack_public_path__ + \"static/custom-events4-21f73dc9262f3bb6c47d4c8729f259de.png\";","module.exports = __webpack_public_path__ + \"static/custom-events2-ddeff70afe43589bcca7ef01e6d0f0b1.png\";","import React from 'react';\n\nexport const warning = (\n \n \n \n \n);\nexport const success = (\n \n \n \n \n);\nexport const danger = (\n \n \n \n \n);\nexport const info = (\n \n \n \n \n \n);\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport PropTypes from 'prop-types';\nimport * as icons from '../../icons/alertIcons';\n\nconst Alert = styled.div`\n margin: 1.5rem 0 1rem;\n border-radius: 4px;\n padding: 10px 12px 10px 16px;\n background-color: transparent;\n display: flex;\n align-items: center;\n & svg {\n align-self: center;\n line-height: 100%;\n width: 16px;\n height: 16px;\n }\n &.info {\n background-color: #cce5ff;\n border: 1px solid #b8daff;\n }\n &.success {\n background-color: #d4edda;\n border: 1px solid #c3e6cb;\n }\n &.warning {\n background-color: #fff3cd;\n border: 1px solid #ffeeba;\n }\n &.danger {\n background-color: #f8d7da;\n border: 1px solid #f5c6cb;\n }\n`;\n\nconst Text = styled.p`\n margin: 0 0 0 16px;\n width: fit-content;\n font-weight: 400;\n`;\n\nexport const Information = ({ children, color, style }) => {\n const [filterIcon] = Object.entries(icons).filter((icon) => {\n return icon[0] === color ? icon[1] : null;\n });\n return (\n \n {filterIcon[1]}\n {children}\n \n );\n};\n\nInformation.propTypes = {\n color: PropTypes.string.isRequired,\n children: PropTypes.node.isRequired,\n style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n};\n\nInformation.defaultProps = {\n style: undefined,\n};\n"],"sourceRoot":""}