{"version":3,"sources":["webpack:///./src/pages/help/how-to-connect-events-from-google-analytics.js","webpack:///./src/components/Link.js","webpack:///./src/icons/alertIcons.js","webpack:///./src/components/information/index.js"],"names":["related","link","title","description","frontmatter","metaTitle","metaDescription","canonical","Wrapped","Article","color","blank","href","className","inline","role","section","Link","children","additionalProps","target","DevelopersLink","h","props","process","startsWith","defaultProps","warning","width","height","viewBox","fill","xmlns","fillRule","d","clipRule","success","danger","info","cx","cy","r","Alert","styled","div","Text","p","Information","style","filterIcon","Object","entries","icons","filter","icon","undefined"],"mappings":"6FAAA,wIA+DMA,EAAU,CACd,CACEC,KAAM,sCACNC,MAAO,+CACPC,YAAa,6DAEf,CACEF,KAAM,uCACNC,MAAO,mCACPC,YAAa,mEAIJC,EAAc,CACzBC,UAAW,+CACXC,gBAAiB,iEACjBC,UAAW,sDAGPC,EAAUC,aA3EA,WACd,OACE,6BACE,kBAAC,IAAD,0BACA,0PAKA,8GACA,kBAAC,IAAD,CAAaC,MAAM,WAAnB,0CAC0C,IACxC,kBAAC,IAAD,CAAgBC,OAAK,EAACC,KAAK,kCAA3B,SAEkB,IAJpB,kBAOA,kBAAC,IAAD,CAAUC,UAAU,QAApB,uCACA,gFACiD,kBAAC,IAAD,CAAMC,QAAM,GAAZ,kBADjD,sBAEW,sDAFX,sCAIA,kBAAC,IAAD,qpBAyBA,yBAAKD,UAAU,gCAAgCE,KAAK,SAApD,oKAE6E,IAC3E,kBAAC,IAAD,CAAMH,KAAK,4CAAX,gBAHF,SA8BS,4BACb,kBAACJ,EAAD,eAASR,QAASA,EAASgB,QAAQ,YAAYd,MAAOE,EAAYC,WAAeD,M,sHC9E5E,SAASa,EAAT,GAA0C,IAA1BC,EAAyB,EAAzBA,SAAUP,EAAe,EAAfA,MAAOC,EAAQ,EAARA,KAChCO,EAAkB,GAMxB,OAJIR,IACFQ,EAAgBC,OAAS,UAIzB,mCAAGR,KAAMA,GAAUO,GAChBD,GAeA,SAASG,EAAT,GAAuD,IA5B1CC,EA4BaJ,EAA4B,EAA5BA,SAAUN,EAAkB,EAAlBA,KAASW,EAAS,iBACrDJ,EAAkB,CACtBP,KAASY,2CA9BOF,EA8B2CV,EA7BtDU,EAAEG,WAAW,KAAOH,EAApB,IAA4BA,IAgCnC,OACE,gBAACL,EAAD,iBAAUM,EAAWJ,GAClBD,GAXPD,EAAKS,aAAe,CAClBf,OAAO,I,qRC1BIgB,EACX,yBACEd,UAAU,6BACVe,MAAM,MACNC,OAAO,MACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAEN,0BACEC,SAAS,UACTC,EAAE,iYACFC,SAAS,YAEX,0BAAMD,EAAE,gHAGCE,EACX,yBACEvB,UAAU,qBACVe,MAAM,MACNC,OAAO,MACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAEN,0BACEC,SAAS,UACTC,EAAE,mHACFC,SAAS,YAEX,0BACEF,SAAS,UACTC,EAAE,uGACFC,SAAS,aAIFE,EACX,yBACExB,UAAU,2BACVe,MAAM,MACNC,OAAO,MACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAEN,0BACEC,SAAS,UACTC,EAAE,gEACFC,SAAS,YAEX,0BAAMD,EAAE,gHAGCI,EACX,yBACEzB,UAAU,oBACVe,MAAM,MACNC,OAAO,MACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAEN,0BACEC,SAAS,UACTC,EAAE,gEACFC,SAAS,YAEX,0BAAMD,EAAE,kNACR,4BAAQK,GAAG,IAAIC,GAAG,MAAMC,EAAE,OClExBC,EAAQC,IAAOC,IAAV,yEAAGD,CAAH,ubA+BLE,EAAOF,IAAOG,EAAV,wEAAGH,CAAH,0DAMGI,EAAc,SAAC,GAAgC,IAA9B7B,EAA6B,EAA7BA,SAAUR,EAAmB,EAAnBA,MAAOsC,EAAY,EAAZA,MACtCC,EAAcC,OAAOC,QAAQC,GAAOC,QAAO,SAACC,GACjD,OAAOA,EAAK,KAAO5C,EAAQ4C,EAAK,GAAK,QADvC,GAGA,OACE,kBAACZ,EAAD,CAAO7B,UAAWH,EAAOsC,MAAOA,GAC7BC,EAAW,GACZ,kBAACJ,EAAD,KAAO3B,KAWb6B,EAAYrB,aAAe,CACzBsB,WAAOO","file":"component---src-pages-help-how-to-connect-events-from-google-analytics-js-c6651ac36c6bbcf6a395.js","sourcesContent":["import React from 'react';\nimport Article, { SubTitle } from 'components/help/helpArticle';\nimport Code from 'components/help/codeSnippet';\nimport Link from 'components/ui/link';\nimport { DevelopersLink } from '../../components/Link';\nimport { Information } from '../../components/information';\n\nconst Content = () => {\n  return (\n    <div>\n      <SubTitle>How does it work?</SubTitle>\n      <p>\n        If you have already set up custom events in your Google Analytics account, you can easily\n        use them with LiveSession. You can configure LiveSession callback to collect data every time\n        the GA tracker sends a custom event.\n      </p>\n      <p>Edit the code below according to your needs to start tracking GA custom events.</p>\n      <Information color=\"warning\">\n        Custom Events are available via JS API.{' '}\n        <DevelopersLink blank href=\"/javascript-api/methods/#track\">\n          Learn\n        </DevelopersLink>{' '}\n        how to use it.\n      </Information>\n      <SubTitle className=\"mt-5\">How can I install this integration?</SubTitle>\n      <span>\n        To install integration, edit your tracking ID (<Code inline>UA-XXXXXXXXX-X</Code>) and add\n        the code <strong>after initializing</strong> Google Analytics and LiveSession.\n      </span>\n      <Code>\n        {`<script>\n    window.ga =\n    window.ga ||\n    function () {\n        (ga.q = ga.q || []).push(arguments);\n    };\n    ga.l = +new Date();\n    ga(\"create\", \"UA-XXXXXXXXX-X\", \"auto\");\n    ga(\"send\", \"pageview\");\n    ga(function (tracker) {\n    var originalSendHitTask = tracker.get(\"sendHitTask\");\n    tracker.set(\"sendHitTask\", function (model) {\n        originalSendHitTask(model);\n        const eventType = tracker.get(\"eventCategory\");\n        if (window.__ls) {\n        window.__ls(\"track\", eventType, {\n            category: eventType,\n            action: tracker.get(\"eventAction\"),\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    </div>\n  );\n};\n\nconst related = [\n  {\n    link: '/help/google-analytics-integration/',\n    title: 'LiveSession and Google Analytics integration',\n    description: 'Send LiveSession recordings as events to Google Analytics',\n  },\n  {\n    link: '/help/how-do-the-custom-events-work/',\n    title: 'How does the Custom Events work?',\n    description: 'Wondering about the usability of our Custom Events? Read here.',\n  },\n];\n\nexport const frontmatter = {\n  metaTitle: 'How to connect events from Google Analytics?',\n  metaDescription: 'Take a look how to pass Google Analytics events to LiveSession',\n  canonical: '/help/how-to-connect-events-from-google-analytics/',\n};\n\nconst Wrapped = Article(Content);\n\nexport default () => (\n  <Wrapped related={related} section=\"Developer\" title={frontmatter.metaTitle} {...frontmatter} />\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    <a href={href} {...additionalProps}>\n      {children}\n    </a>\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    <Link {...props} {...additionalProps}>\n      {children}\n    </Link>\n  );\n}\n\nDevelopersLink.propTypes = {\n  href: PropTypes.string.isRequired,\n  children: PropTypes.node.isRequired,\n};\n","import React from 'react';\n\nexport const warning = (\n  <svg\n    className=\"bi bi-exclamation-triangle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z\" />\n  </svg>\n);\nexport const success = (\n  <svg\n    className=\"bi bi-check-circle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8 2.5A5.5 5.5 0 1013.5 8a.5.5 0 011 0 6.5 6.5 0 11-3.25-5.63.5.5 0 11-.5.865A5.472 5.472 0 008 2.5z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nexport const danger = (\n  <svg\n    className=\"bi bi-exclamation-circle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M7.002 11a1 1 0 112 0 1 1 0 01-2 0zM7.1 4.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 4.995z\" />\n  </svg>\n);\nexport const info = (\n  <svg\n    className=\"bi bi-info-circle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z\" />\n    <circle cx=\"8\" cy=\"4.5\" r=\"1\" />\n  </svg>\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    <Alert className={color} style={style}>\n      {filterIcon[1]}\n      <Text>{children}</Text>\n    </Alert>\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":""}