{"version":3,"sources":["webpack:///./src/img/help/google_analytics/ga_integration_3.png","webpack:///./src/img/help/google_analytics/ga_integration_7.png","webpack:///./src/img/help/google_analytics/ga_integration_5.png","webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/integrations/ga.png","webpack:///./src/img/help/google_analytics/ga_integration_1.png","webpack:///./src/img/help/google_analytics/ga_integration_8.png","webpack:///./src/components/help/toggleMore/index.js","webpack:///./src/pages/help/google-analytics-integration.js","webpack:///./src/img/help/google_analytics/ga_integration_4.png","webpack:///./src/img/help/google_analytics/ga_integration_2.png","webpack:///./src/img/help/google_analytics/ga_integration_6.png"],"names":["module","exports","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","ToggleMore","children","useState","show","setShow","e","preventDefault","handleClick","type","related","frontmatter","metaTitle","metaDescription","canonical","logo","Wrapped","HelpArticle","inline","margin","copy","role","href","screen1","screen2","screen3","screen4","screen5","screen6","screen7","screen8","section"],"mappings":"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","file":"component---src-pages-help-google-analytics-integration-js-1164eac591918784ac18.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/ga_integration_3-f99d0e9679443bbcf82526fa67145c68.png\";","module.exports = __webpack_public_path__ + \"static/ga_integration_7-25124399e0038b5a64bbab625614a6a0.png\";","module.exports = __webpack_public_path__ + \"static/ga_integration_5-2e7f27ffb887e4de35b6af513fc55dbf.png\";","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    <Styled.Card className=\"card\" style={cardStyle} setMarginBottom={setMarginBottom}>\n      <Styled.CardBody className=\"card-body\" style={cardStyle}>\n        <ImageModal {...props} />\n      </Styled.CardBody>\n    </Styled.Card>\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      <Container onClick={this.closeModal}>\n        <Close onClick={this.closeModal}>&times;</Close>\n        <Box onClick={this.closeModal}>\n          <ImageWrapped\n            style={imgModalStyle}\n            src={src}\n            alt={alt}\n            title={title}\n            loading={lazy ? 'lazy' : null}\n          />\n        </Box>\n      </Container>\n    );\n\n    return (\n      <>\n        <Image\n          style={imgStyle}\n          onClick={this.openModal}\n          src={src}\n          alt={alt}\n          title={title}\n          loading={lazy ? 'lazy' : null}\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","module.exports = __webpack_public_path__ + \"static/ga-3e75bdaa643a732a6f39ad3b52b9fe31.png\";","module.exports = __webpack_public_path__ + \"static/ga_integration_1-ae3d7f7eedf2b29bf3f907f05c320eb3.png\";","module.exports = __webpack_public_path__ + \"static/ga_integration_8-d35ee9675af7fdc57504987277581d73.png\";","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nconst ToggleMore = ({ children }) => {\n  const [show, setShow] = useState(false);\n\n  const handleClick = (e) => {\n    e.preventDefault();\n    setShow(!show);\n  };\n\n  const renderButton = () => (\n    <button className=\"btn btn-sm btn-outline-dark\" onClick={(e) => handleClick(e)} type=\"button\">\n      {show ? 'Hide' : 'Show more'}\n    </button>\n  );\n\n  const renderContent = () => <> {children} </>;\n\n  return (\n    <>\n      {renderButton()}\n      {show && renderContent()}\n    </>\n  );\n};\n\nexport default ToggleMore;\n\nToggleMore.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.object, PropTypes.node, PropTypes.string]).isRequired,\n};\n","import React from 'react';\n\nimport { HelpArticle, SubTitle } from 'components/help/helpArticle';\nimport Code from 'components/help/codeSnippet';\nimport Image from 'components/help/helpImage';\nimport ToggleMore from 'components/help/toggleMore';\nimport Link from 'components/ui/link';\n\nimport screen1 from 'img/help/google_analytics/ga_integration_1.png';\nimport screen2 from 'img/help/google_analytics/ga_integration_2.png';\nimport screen3 from 'img/help/google_analytics/ga_integration_3.png';\nimport screen4 from 'img/help/google_analytics/ga_integration_4.png';\nimport screen5 from 'img/help/google_analytics/ga_integration_5.png';\nimport screen6 from 'img/help/google_analytics/ga_integration_6.png';\nimport screen7 from 'img/help/google_analytics/ga_integration_7.png';\nimport screen8 from 'img/help/google_analytics/ga_integration_8.png';\nimport logo from 'img/help/integrations/ga.png';\n\nconst Content = () => {\n  return (\n    <div>\n      <SubTitle>What is Google Analytics?</SubTitle>\n      <p>\n        <strong>Google Analytics tracks visitors on website</strong>. It lets you understand source\n        of traffic on your website, conversion rates, and many more.{' '}\n      </p>\n      <SubTitle className=\"mt-5\">How does this integration work?</SubTitle>\n      <p>\n        This integration sends links to session replays from LiveSession to your Google Analytics\n        tracker.{' '}\n        <strong>\n          As a result, you can open recordings of a specific user directly from Analytics dashboard\n        </strong>\n        .\n      </p>\n      <p>\n        Every time a new session will start, our code will send an event to GA tracker with a link\n        to session replay.\n      </p>\n      <SubTitle className=\"mt-5\">How can I install this integration?</SubTitle>\n      <span>To install integration, add the code below before your </span>{' '}\n      <Code inline>{'</body>'}</Code> <span> closing tag:</span>\n      <Code margin=\"1rem 0\" copy>\n        {`<script>\nif(ga && __ls){\n__ls(\"getSessionURL\", function(url, isNew){\n    if(isNew){\n        ga('send', {\n            hitType: 'event',\n            eventCategory: 'LiveSession recording',\n            eventAction: url,\n            nonInteraction: 1\n        })\n    }\n})\n}\n</script>`}\n      </Code>\n      <div className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        To make this integration works you need to have Google Analytics and LiveSession installed\n        on your website. If you haven&apos;t installed our tracking code yet check{' '}\n        <Link href=\"/help/how-to-install-livesession-script/\">this article</Link>.\n      </div>\n      <p className=\"mt-3\">\n        Now you can go to &apos;Audience &gt; User Explorer&apos; section and open user profile.\n      </p>\n      <Image src={screen1} lazy alt=\"Google Analytics intergration\" title=\"Opening user profile\" />\n      <p>\n        Find event on actions list and expand details. You can also click expand all to make\n        browsing data easier.{' '}\n      </p>\n      <Image\n        src={screen2}\n        lazy\n        alt=\"Google Analytics intergration\"\n        title=\"Find event on actions list and expand details\"\n      />\n      <p>\n        Find &apos;LiveSession recording&apos; event on actions list and copy-paste link to your web\n        browser.{' '}\n      </p>\n      <Image\n        src={screen3}\n        lazy\n        alt=\"Google Analytics intergration\"\n        title=\"Copy-paste link to your web browser\"\n      />\n      <SubTitle className=\"mt-5\">\n        (Optional) Segment users with LiveSession session replay in Google Analytics\n      </SubTitle>\n      <p>\n        You can define &quot;LiveSession&quot; segment in Google Analytics to search users with our\n        event. It can make browsing session replays in GA easier. It&apos;s possible to add your own\n        conditions to our segment and search for specific user groups.\n      </p>\n      <ToggleMore>\n        <p className=\"mt-3\">Firstly, click on &quot;Add segment&quot;.</p>\n        <Image src={screen4} lazy alt=\"Google Analytics intergration\" title=\"Add segment\" />\n\n        <p>Then click on &quot;New segment&quot;.</p>\n        <Image\n          src={screen5}\n          lazy\n          alt=\"Google Analytics intergration\"\n          title=\"Click on new segment\"\n        />\n\n        <p>Open conditions section.</p>\n        <Image\n          src={screen6}\n          lazy\n          alt=\"Google Analytics intergration\"\n          title=\"Open conditions section\"\n        />\n\n        <p>Now we&apos;ll filter sessions. Find &quot;Event Category&quot; on list.</p>\n        <Image\n          src={screen7}\n          lazy\n          alt=\"Google Analytics intergration\"\n          title=\"Find 'Event Category' on list\"\n        />\n\n        <p>\n          Set exactly matches (1). Type in our &quot;Event Category&quot; name, in code specified\n          above it&apos;s &quot;LiveSession recording&quot; (2). Then, let&apos;s set up name for\n          our new segment - &quot;Users with session replays&quot; (3). Finally, save the segment\n          (4). You can add more conditions to filter some specific user groups.\n        </p>\n        <Image src={screen8} lazy alt=\"Google Analytics intergration\" title=\"Add filters\" />\n      </ToggleMore>\n    </div>\n  );\n};\n\nconst related = [];\n\nexport const frontmatter = {\n  metaTitle: 'LiveSession and Google Analytics integration',\n  metaDescription: 'Send LiveSession recordings as events to Google Analytics',\n  canonical: '/help/google-analytics-integration/',\n  logo,\n};\n\nconst Wrapped = HelpArticle(Content);\n\nexport default () => (\n  <Wrapped\n    related={related}\n    section=\"Integrations\"\n    title={frontmatter.metaTitle}\n    {...frontmatter}\n  />\n);\n","module.exports = __webpack_public_path__ + \"static/ga_integration_4-a5619cf10cb396564b96c82547446aed.png\";","module.exports = __webpack_public_path__ + \"static/ga_integration_2-743130317257b5ad8550373e7031efcc.png\";","module.exports = __webpack_public_path__ + \"static/ga_integration_6-0e1cb086e0cfc25037051a4d09a6f32e.png\";"],"sourceRoot":""}