{"version":3,"sources":["webpack:///./src/img/help/gtm/gtm3_2.png","webpack:///./src/img/help/integrations/gtm.png","webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/img/help/gtm/gtm_4.png","webpack:///./src/img/help/gtm/gtm_5.png","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/gtm/gtm_1.png","webpack:///./src/pages/help/how-install-with-google-tag-manager.js","webpack:///./src/img/help/gtm/gtm_3.png","webpack:///./src/img/help/gtm/gtm3_1.png","webpack:///./src/img/help/gtm/gtm_2.png","webpack:///./src/img/help/gtm/gtm_8.png","webpack:///./src/img/help/gtm/gtm_7.png","webpack:///./src/img/help/gtm/gtm_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","related","link","description","Wrapped","Article","role","margin","img1","img2","img3","img3_1","img3_2","href","target","rel","img4","img5","img6","img7","img8","frontmatter","metaTitle","metaDescription","canonical","logo","logoStyle","maxWidth","section"],"mappings":"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","file":"component---src-pages-help-how-install-with-google-tag-manager-js-f2417922fde59aaaf725.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/gtm3_2-4aa1c399244a7e210b57028432411436.png\";","module.exports = __webpack_public_path__ + \"static/gtm-e509b84bd2f616d6843852f9c76b3728.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","module.exports = __webpack_public_path__ + \"static/gtm_4-94970289f7a19cf6ccdd3afe6b8d6f88.png\";","module.exports = __webpack_public_path__ + \"static/gtm_5-055663b366651c3d90b29b55398e23c0.png\";","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/gtm_1-3e05076d9a42ad30dc4a29eefbec11c0.png\";","/* eslint-disable camelcase */\nimport React from 'react';\nimport Article from 'components/help/helpArticle';\nimport Image from 'components/help/helpImage';\nimport Link from 'components/ui/link';\n\nimport img1 from 'img/help/gtm/gtm_1.png';\nimport img2 from 'img/help/gtm/gtm_2.png';\nimport img3 from 'img/help/gtm/gtm_3.png';\nimport img3_1 from 'img/help/gtm/gtm3_1.png';\nimport img3_2 from 'img/help/gtm/gtm3_2.png';\nimport img4 from 'img/help/gtm/gtm_4.png';\nimport img5 from 'img/help/gtm/gtm_5.png';\nimport img6 from 'img/help/gtm/gtm_6.png';\nimport img7 from 'img/help/gtm/gtm_7.png';\nimport img8 from 'img/help/gtm/gtm_8.png';\nimport logo from 'img/help/integrations/gtm.png';\n\nconst Content = () => {\n  return (\n    <div>\n      To use LiveSession, you need to include a piece of simple JavaScript code on your website. We\n      provide a custom template to save your time and make the integration as easy as possible.\n      <div className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        <p>\n          <strong>Important</strong>: You need to meet these two conditions:\n        </p>\n        <ul style={{ margin: 0 }}>\n          <li>Your visitors have to use HTTPS</li>\n          <li>Your website needs an SSL certificate.</li>\n        </ul>\n      </div>\n      <p>Here’s how install the LiveSession tracking code using Google Tag Manager.</p>\n      <ul className=\"list-unstyled\">\n        <li>1. Go to your LiveSession account and go to Settings &gt; Websites.</li>\n        <li>\n          2. Select <i>Tracking code</i> and copy your TrackID.\n        </li>\n        <li>\n          3. Log in to your Google Tag Manager Account and select <i>Add a new tag</i>:\n          <Image src={img1} alt=\"Google Tag Manager integration\" title=\"Open GTM dashboard\" />\n        </li>\n        <li>\n          4. Choose a tag:\n          <Image src={img2} alt=\"Google Tag Manager integration\" title=\"Choose a tag\" />\n        </li>\n        <li>\n          5. Search for <i>LiveSession</i>, select LiveSession Tag and click <i>Add to workspace</i>\n          :\n          <Image\n            src={img3}\n            alt=\"Google Tag Manager integration\"\n            title=\"Search for tag in Gallery\"\n          />\n        </li>\n        <Image src={img3_1} alt=\"Google Tag Manager integration\" title=\"Search for LiveSession\" />\n        <Image src={img3_2} alt=\"Google Tag Manager integration\" title=\"Add to workspace\" />\n        <li>\n          6. Paste your TrackID. You can also fill the rest of the fields, but they are optional.\n          You can find more details about them{' '}\n          <a\n            href=\"https://developers.livesession.io/javascript-api/configuration/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            here\n          </a>\n          .\n          <Image src={img4} alt=\"Google Tag Manager integration\" title=\"Paste TrackID\" />\n        </li>\n        <li>\n          7. Choose a trigger, select <i>All Pages</i> to enable LiveSession on every page of your\n          website:\n          <Image src={img5} alt=\"Google Tag Manager integration\" title=\"All pages\" />\n        </li>\n        <li>\n          8. Save your tag:\n          <Image src={img6} alt=\"Google Tag Manager integration\" title=\"Save\" />\n        </li>\n        <li>\n          9. After that click on <strong>Submit</strong>.\n          <Image src={img7} alt=\"Google Tag Manager integration\" title=\"Publish\" />\n        </li>\n        <li>\n          10. Finally add info about your change and click <strong>Publish</strong>.\n          <Image src={img8} alt=\"Google Tag Manager integration\" title=\"Click Publish again\" />\n        </li>\n        <li>\n          Congrats, you&apos;re ready to go! Check if your script works properly using{' '}\n          <Link href=\"/help/how-to-check-if-my-tracking-script-works/\"> this guide</Link>.\n        </li>\n      </ul>\n    </div>\n  );\n};\n\nconst related = [\n  {\n    link: '/help/how-to-install-livesession-script/',\n    title: 'How to install LiveSession script?',\n    description: 'Check how can you install LiveSession on any website.',\n  },\n  {\n    link: '/help/how-to-check-if-my-tracking-script-works/',\n    title: 'How to check if my tracking script works',\n    description: 'Check if your tracking code is installed correctly',\n  },\n];\n\nconst Wrapped = Article(Content);\n\nexport const frontmatter = {\n  metaTitle: 'How to install LiveSession using Google Tag Manager?',\n  metaDescription:\n    'Add LiveSession to your website in few easy steps with Google Tag Manager help.',\n  canonical: '/help/how-install-with-google-tag-manager/',\n  logo,\n  logoStyle: {\n    maxWidth: 150,\n  },\n};\n\nexport default () => (\n  <Wrapped title={frontmatter.metaTitle} related={related} section=\"Get Started\" {...frontmatter} />\n);\n","module.exports = __webpack_public_path__ + \"static/gtm_3-ed48b38671e9e302a06058891dc62b62.png\";","module.exports = __webpack_public_path__ + \"static/gtm3_1-6ade7d67341cf5a928433c5a1d15982e.png\";","module.exports = __webpack_public_path__ + \"static/gtm_2-3156cb84fe8bcc425875a6a8142b1bbe.png\";","module.exports = __webpack_public_path__ + \"static/gtm_8-fd8e5ce9abe5e69cfaf1c791736243f5.png\";","module.exports = __webpack_public_path__ + \"static/gtm_7-a36dc894769502791809cb32248fe56c.png\";","module.exports = __webpack_public_path__ + \"static/gtm_6-ed07ef2ed86772333cb56b1505c5fff5.png\";"],"sourceRoot":""}