{"componentChunkName":"component---src-templates-simple-markdown-js","path":"/developer-portal/analytics/","matchPath":"","result":{"data":{"markdownRemark":{"html":"<h1 style=\"position:relative;\"><a href=\"#enable-analytics\" aria-label=\"enable analytics permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"enable-analytics\"></div>Enable analytics</h1>\n<p>Whether you utilize Google Analytics, Google Tag Manager, Heap.io or something else, it can be enabled with a few lines of configuration in the <code class=\"language-text\">siteConfig.yaml</code>.</p>\n<div class=\"admonition admonition-attention\"><div class=\"admonition-heading\"><h5><span class=\"admonition-icon\"><i></i></span>attention</h5></div><div class=\"admonition-content\"><p>Analytics is disabled in development server mode. So enabling will have no impact until built and deployed.</p></div></div>\n<h2 style=\"position:relative;\"><a href=\"#google-analytics\" aria-label=\"google analytics permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"google-analytics\"></div>Google Analytics</h2>\n<p>Let's say our tracking id is <code class=\"language-text\">UA-132456789-1</code>.</p>\n<div class=\"code-wrapper\">\n        <div class=\"gatsby-code-button-container\"\n             data-toaster-id=\"3917174253833488400\"\n             data-toaster-duration=\"1500\"\n             onClick=\"copyCodeToClipboard(`analytics:\n  ga:\n    # you can use any options here from https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/\n    # note that GA doesn't work in DEV\n    trackingId: UA-132456789-1`, `3917174253833488400`)\"\n        >\n          <div class=\"gatsby-code-button\" title=\"Copy the code snippet\">Copy</div>\n          <div class=\"done-indicator done-indicator-3917174253833488400\">Copied</div>\n        </div>\n        <div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">analytics</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">ga</span><span class=\"token punctuation\">:</span>\n    <span class=\"token comment\"># you can use any options here from https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/</span>\n    <span class=\"token comment\"># note that GA doesn't work in DEV</span>\n    <span class=\"token key atrule\">trackingId</span><span class=\"token punctuation\">:</span> UA<span class=\"token punctuation\">-</span>132456789<span class=\"token punctuation\">-</span><span class=\"token number\">1</span></code></pre></div>\n      </div>\n<h2 style=\"position:relative;\"><a href=\"#other-javascript-add-ons\" aria-label=\"other javascript add ons permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"other-javascript-add-ons\"></div>Other JavaScript add-ons</h2>\n<p>If we needed to enable some other JavaScript, we can do that too.\nHere is an example of enabling the Intercom chat widget.\nYou would replace the part that says <code class=\"language-text\">your-code</code> with your intercom id.</p>\n\n      <div class=\"code-snippets-tabs\" >\n    <div class=\"snippets-tabs-headers\">\n      <span class=\"tab-header active\" data-lang=\"yaml\" data-snippet-id=\"yaml\">yaml</span><span class=\"tab-header \" data-lang=\"js\" data-snippet-id=\"js\">js</span>\n    </div>\n    <div class=\"snippets-tabs-contents\">\n      <div class=\"tab-content active\" data-lang=\"yaml\" data-snippet-id=\"yaml\"><div class=\"code-wrapper\">\n        <div class=\"gatsby-code-button-container\"\n             data-toaster-id=\"56757370889018090000\"\n             data-toaster-duration=\"1500\"\n             onClick=\"copyCodeToClipboard(`scripts:\n  - ./static/intercom.js`, `56757370889018090000`)\"\n        >\n          <div class=\"gatsby-code-button\" title=\"Copy the code snippet\">Copy</div>\n          <div class=\"done-indicator done-indicator-56757370889018090000\">Copied</div>\n        </div>\n        <div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">scripts</span><span class=\"token punctuation\">:</span>\n  <span class=\"token punctuation\">-</span> ./static/intercom.js</code></pre></div>\n      </div></div><div class=\"tab-content \" data-lang=\"js\" data-snippet-id=\"js\"><div class=\"code-wrapper\">\n        <div class=\"gatsby-code-button-container\"\n             data-toaster-id=\"59899139502596180000\"\n             data-toaster-duration=\"1500\"\n             onClick=\"copyCodeToClipboard(`window.intercomSettings = {\n  app_id: &quot;hvbieiwv&quot;,\n};\n\n(function () {\n  var w = window;\n  var ic = w.Intercom;\n  if (typeof ic === &quot;function&quot;) {\n    ic(&quot;reattach_activator&quot;);\n    ic(&quot;update&quot;, w.intercomSettings);\n  } else {\n    var d = document;\n    var i = function () {\n      i.c(arguments);\n    };\n    i.q = [];\n    i.c = function (args) {\n      i.q.push(args);\n    };\n    w.Intercom = i;\n    var l = function () {\n      var s = d.createElement(&quot;script&quot;);\n      s.type = &quot;text/javascript&quot;;\n      s.async = true;\n      s.src = &quot;https://widget.intercom.io/widget/your-code&quot;;\n      var x = d.getElementsByTagName(&quot;script&quot;)[0];\n      x.parentNode.insertBefore(s, x);\n    };\n    if (d.readyState === &quot;complete&quot;) {\n      l();\n    } else {\n      if (w.attachEvent) {\n        w.attachEvent(&quot;onload&quot;, l);\n      } else {\n        w.addEventListener(&quot;load&quot;, l, false);\n      }\n    }\n  }\n})();`, `59899139502596180000`)\"\n        >\n          <div class=\"gatsby-code-button\" title=\"Copy the code snippet\">Copy</div>\n          <div class=\"done-indicator done-indicator-59899139502596180000\">Copied</div>\n        </div>\n        <div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">window<span class=\"token punctuation\">.</span>intercomSettings <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  app_id<span class=\"token operator\">:</span> <span class=\"token string\">\"hvbieiwv\"</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> w <span class=\"token operator\">=</span> window<span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">var</span> ic <span class=\"token operator\">=</span> w<span class=\"token punctuation\">.</span>Intercom<span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> ic <span class=\"token operator\">===</span> <span class=\"token string\">\"function\"</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">ic</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"reattach_activator\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token function\">ic</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"update\"</span><span class=\"token punctuation\">,</span> w<span class=\"token punctuation\">.</span>intercomSettings<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">var</span> d <span class=\"token operator\">=</span> document<span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">var</span> <span class=\"token function-variable function\">i</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      i<span class=\"token punctuation\">.</span><span class=\"token function\">c</span><span class=\"token punctuation\">(</span>arguments<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n    i<span class=\"token punctuation\">.</span>q <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    i<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">c</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">args</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      i<span class=\"token punctuation\">.</span>q<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>args<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n    w<span class=\"token punctuation\">.</span>Intercom <span class=\"token operator\">=</span> i<span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">var</span> <span class=\"token function-variable function\">l</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">var</span> s <span class=\"token operator\">=</span> d<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"script\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      s<span class=\"token punctuation\">.</span>type <span class=\"token operator\">=</span> <span class=\"token string\">\"text/javascript\"</span><span class=\"token punctuation\">;</span>\n      s<span class=\"token punctuation\">.</span>async <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">;</span>\n      s<span class=\"token punctuation\">.</span>src <span class=\"token operator\">=</span> <span class=\"token string\">\"https://widget.intercom.io/widget/your-code\"</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">var</span> x <span class=\"token operator\">=</span> d<span class=\"token punctuation\">.</span><span class=\"token function\">getElementsByTagName</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"script\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n      x<span class=\"token punctuation\">.</span>parentNode<span class=\"token punctuation\">.</span><span class=\"token function\">insertBefore</span><span class=\"token punctuation\">(</span>s<span class=\"token punctuation\">,</span> x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>d<span class=\"token punctuation\">.</span>readyState <span class=\"token operator\">===</span> <span class=\"token string\">\"complete\"</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token function\">l</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>w<span class=\"token punctuation\">.</span>attachEvent<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        w<span class=\"token punctuation\">.</span><span class=\"token function\">attachEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"onload\"</span><span class=\"token punctuation\">,</span> l<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n        w<span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"load\"</span><span class=\"token punctuation\">,</span> l<span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n      </div></div>\n    </div></div>\n    ","headings":[{"value":"Enable analytics","depth":1},{"value":"Google Analytics","depth":2},{"value":"Other JavaScript add-ons","depth":2}]},"contentItem":{"data":{"lastModified":"2023-03-21T02:46:22.000Z","enableToc":null,"disableLastModified":null,"tocMaxDepth":null,"requestLogin":false}},"siteConfig":{"enableToc":false,"disableLastModified":false,"tocMaxDepth":4}},"pageContext":{"matchPath":"","id":"f2522c76-d96b-5696-9281-52d80aab0498__redocly content/developer-portal/analytics/","seo":{"title":"Enable analytics","description":null,"image":"","keywords":null,"jsonLd":null,"lang":null,"siteUrl":null},"pageId":"developer-portal/analytics.md","pageBaseUrl":"/developer-portal/analytics","type":"markdown","toc":{"enable":true,"maxDepth":4,"headings":[{"depth":1,"value":"Enable analytics","id":"enable-analytics"},{"depth":2,"value":"Google Analytics","id":"google-analytics"},{"depth":2,"value":"Other JavaScript add-ons","id":"other-javascript-add-ons"}]},"data":{"title":""},"catalogInfo":null,"link":"/developer-portal/analytics/","sidebarName":"","isLanding":false,"showPrevButton":null,"showNextButton":null,"apiVersions":null,"apiVersionId":null,"isDefaultApiVersion":null}},"staticQueryHashes":["1123603147","1302185487","1344209882","1398840060","1520077861","1975142765","2667623876","2950305614","3240152602","3743992808","561138138"]}