{"componentChunkName":"component---src-templates-blog-post-template-js","path":"/2020/01/02/track-custom-events-with-fathom-analytics/","result":{"data":{"mdx":{"id":"e6a0c926-1ae9-51e0-a8c8-37bcf47da573","frontmatter":{"title":"Track Custom Events With Fathom Analytics","date":"2020 January 2nd","cover":{"id":"afe43dab-060f-5e72-bc94-2ecbccf49a09","publicURL":"/static/cover-1ef2a01e752c1774daa3cacfe7dcf11f.jpg"}},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"date\": \"2020-01-02T00:00:00.000Z\",\n  \"title\": \"Track Custom Events With Fathom Analytics\",\n  \"tags\": [\"analytics\", \"learning\", \"guide\", \"hooks\", \"react\"],\n  \"published\": true,\n  \"cover\": \"./cover.jpg\",\n  \"coverCredit\": \"Photo by Aranxa Esteve on Unsplash\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar YouTube = makeShortcode(\"YouTube\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"In this guide I\\u2019m going to go through how to track custom events in a\\nGatsby site using Fathom analytics.\"), mdx(\"h2\", {\n    \"id\": \"preamble\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#preamble\",\n    \"aria-label\": \"preamble permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Preamble\"), mdx(\"p\", null, \"At the end of last month (November 2019) I started using \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://usefathom.com/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Fathom\\nAnalytics\"), \" in place of Google Analytics.\"), mdx(\"p\", null, \"I wanted a simpler way to track visitors to my sites and Fathom offers\\nthat with a great, really intuitive interface and simple design.\"), mdx(\"p\", null, \"So far, I love it, and would like to recommend it to others! Fathom\\nhave an awesome affiliate program where every customer can take part!\"), mdx(\"p\", null, \"For every paying customer I refer with \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://usefathom.com/ref/HG492L\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"my unique code\"), \", I\\u2019ll get a\\n25% lifetime commission on that customers payments, and if you use\\nthat code too \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://usefathom.com/ref/HG492L\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"you\\u2019ll get a $10 discount on your first invoice\"), \".\"), mdx(\"p\", null, \"For now here\\u2019s some of the Fathom marketing copy.\"), mdx(\"h2\", {\n    \"id\": \"why-fathom\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#why-fathom\",\n    \"aria-label\": \"why fathom permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Why Fathom?\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"You don\\u2019t need to display those cookie notices as they don\\u2019t use\\ncookies, nor do they track invasive data.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"They are focused on privacy for website visitors, they don\\u2019t track\\nvisitors, save their personal information, or need it to be\\nprofitable.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"They have hundreds of customers and track tens of millions of page\\nviews per month, so they may be a small company, but they\\u2019re doing\\nbig things!\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"They can handle viral content, so your site won\\u2019t slow down because\\nof them, an they wont ever stop tracking for you because of a spike\\nin popularity.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"All of the plans allow for unlimited websites to be tracked and\\nreceive top-notch customer support. Plans start at $14 a month.\"))), mdx(\"p\", null, \"Do you use Google Analytics (GA) for any of your sites? I\\u2019ve used it\\nin the past and it gives the sort of information you\\u2019d expect but it\\ncan be quite confusing to navigate and find that information.\"), mdx(\"p\", null, \"What you get with Fathom out of the box is very similar to GA, but\\nit\\u2019s all there on one page. You get the standard metrics like, \\u2018Unique\\nvisits\\u2019, \\u2018Page views\\u2019, \\u2018Avg time on site\\u2019 and \\u2018Bounce rate\\u2019.\"), mdx(\"p\", null, \"There\\u2019s also the breakdown of the most popular pages and referring\\nsites.\"), mdx(\"p\", null, \"The difference (apart from the simple to use interface), you\\u2019re not\\ngiving away your visitors data to the big G!\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Want to track what users of your site are clicking and navigating\\nto?\")), mdx(\"p\", null, \"But say you want to track how many times a user of your site clicked a\\nparticular button or link?\"), mdx(\"h2\", {\n    \"id\": \"-heres-a-video-detailing-the-process\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#-heres-a-video-detailing-the-process\",\n    \"aria-label\": \" heres a video detailing the process permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"\\uD83D\\uDCFA Here\\u2019s a video detailing the process.\"), mdx(YouTube, {\n    youTubeId: \"yeMCma4Ae7Q\",\n    mdxType: \"YouTube\"\n  }), mdx(\"h2\", {\n    \"id\": \"set-up-fathom-account\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#set-up-fathom-account\",\n    \"aria-label\": \"set up fathom account permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Set-up Fathom account\"), mdx(\"p\", null, \"If you want to follow along you\\u2019re going to need a Fathom Analytics\\naccount, if you haven\\u2019t already got one then please consider signing\\nup with my affiliate link, \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://usefathom.com/ref/HG492L\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"my unique code\"), \" will get you a $10\\ndiscount off of your first invoice! \\uD83E\\uDD1D\"), mdx(\"h2\", {\n    \"id\": \"addconfig-fathom-gatsby-plugin\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#addconfig-fathom-gatsby-plugin\",\n    \"aria-label\": \"addconfig fathom gatsby plugin permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Add/Config Fathom Gatsby plugin\"), mdx(\"p\", null, \"In this guide I\\u2019m going to use a Gatsby starter\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/v4iv/gatsby-starter-business\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"gatsby-starter-business\"), \" which is a nice starter with some of the\\nrelevant things I\\u2019d want to track. Things like the pricing page and\\nhow many people submit a contact form.\"), mdx(\"p\", null, \"In the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" plugins array the config looks pretty\\nsimilar to this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"{\\n  resolve: `gatsby-plugin-fathom`,\\n  options: {\\n    siteId: process.env.GATSBY_FATHOM_TRACKING_ID_MY_AWESOME_SITE,\\n    // or use the site ID in plaintext\\n    // siteId: 'PBZRRJHH',\\n  },\\n},\\n\")), mdx(\"p\", null, \"In the example I\\u2019m doing I\\u2019m hard-coding in the site ID but you can\\nuse environment variables if you like.\"), mdx(\"h2\", {\n    \"id\": \"push-to-netlify-and-test\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#push-to-netlify-and-test\",\n    \"aria-label\": \"push to netlify and test permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Push to Netlify and test\"), mdx(\"p\", null, \"For the purposes of the guide I build and push the site to Netlify\\nthen check in the console on the browser that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fathom\"), \" is available as\\na global function.\"), mdx(\"p\", null, \"I can now check my Fathom dashboard to see that the site has a\\nvisitor.\"), mdx(\"p\", null, \"Cool, cool! That\\u2019s Fathom Analytics configured for the site, now to\\nthe custom events.\"), mdx(\"h2\", {\n    \"id\": \"create-goals-in-fathom-analytics\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#create-goals-in-fathom-analytics\",\n    \"aria-label\": \"create goals in fathom analytics permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Create goals in Fathom Analytics\"), mdx(\"p\", null, \"To track events in Fathom I\\u2019ll first need to set up a goal! This will\\ngive a unique ID that I can pass to the Fathom global function that\\u2019s\\non my configured site.\"), mdx(\"p\", null, \"So, to get to the goal section of my site I\\u2019ll scroll to the bottom of\\nthe configured site\\u2019s dashboard and click the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Show more data\"), \" toggle.\"), mdx(\"p\", null, \"This will reveal the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Goals\"), \" section where I can configure goals. In\\nthis example I\\u2019ll be adding goals for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"about\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pricing\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"blog\"), \",\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"contact-us\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"form-submit\"), \".\"), mdx(\"p\", null, \"Each time I save the goal I\\u2019m given a JavaScript snippet to use, like:\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fathom('trackGoal', 'CYAZA98C', 0);\"), \" , this is what I\\u2019m going to be\\nadding into my code example.\"), mdx(\"h2\", {\n    \"id\": \"use-react-context-api-to-make-an-analytics-provider\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#use-react-context-api-to-make-an-analytics-provider\",\n    \"aria-label\": \"use react context api to make an analytics provider permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Use React Context API to make an analytics provider\"), mdx(\"p\", null, \"I\\u2019m going to use the React context API to create an analytics provider\\nto be used throughout the app.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import React, { createContext, useContext, useEffect } from 'react';\\n\\nconst AnalyticsContext = createContext({});\\n\\nexport const AnalyticsProvider = ({ children }) => {\\n  useEffect(() => {\\n    if (typeof window.fathom === 'undefined') {\\n      window.fathom = (x, y, z) => {\\n        console.log(`I'm a fake Fathom`, x, y, z);\\n      };\\n    }\\n  }, []);\\n\\n  const logClicks = goalId => {\\n    window.fathom('trackGoal', goalId, 0);\\n  };\\n\\n  return (\\n    <AnalyticsContext.Provider value={logClicks}>\\n      {children}\\n    </AnalyticsContext.Provider>\\n  );\\n};\\n\\nexport const useAnalytics = () => {\\n  return useContext(AnalyticsContext);\\n};\\n\")), mdx(\"p\", null, \"In this example I\\u2019m defining one function to be available via the\\ncontext provider and passed in with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"value\"), \" but I could add in many\\nfunctions here for different event types.\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useEffect\"), \" hook is for when I\\u2019m on the dev server and don\\u2019t want\\nto be submitting data to Fathom, I\\u2019ll instead get a console message.\"), mdx(\"p\", null, \"As high up the component tree as possible, I\\u2019m going to add the\\nprovider.\"), mdx(\"h2\", {\n    \"id\": \"add-custom-event-tracking-for-fathom\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#add-custom-event-tracking-for-fathom\",\n    \"aria-label\": \"add custom event tracking for fathom permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Add custom event tracking for Fathom\"), mdx(\"p\", null, \"In this example there\\u2019s a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Layout\"), \" component I can add the provider\\nto, this wraps all of the components in the application so the\\nprovider can be accessed throughout the site.\"), mdx(\"p\", null, \"Then use in the areas I want to track a goal I\\u2019ll use the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useAnalytics\"), \" hook.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const NavBar = ({ toggleNavbar, isActive }) => {\\n  const fa = useAnalytics();\\n  return (\\n    // other wrapping elements\\n    <Link\\n      onClick={() => {\\n        fa('CDDZY97C');\\n      }}\\n      className=\\\"navbar-item\\\"\\n      to=\\\"/about\\\"\\n    >\\n      About\\n    </Link>\\n    // other wrapping elements\\n  );\\n};\\n\")), mdx(\"h2\", {\n    \"id\": \"wrap-up\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#wrap-up\",\n    \"aria-label\": \"wrap up permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Wrap up\"), mdx(\"p\", null, \"Ok, time for me to review what I just did and what you\\u2019ll need to do\\nif you\\u2019re looking to do the same:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Set up Fathom account\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Add and configure the Fathom Gatsby plugin\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Push the configured site to Netlify to test configuration.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Add custom tracking code in the shape of a React Context API\\nProvider\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Wrap the app in the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AnalyticsProvider\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Consume the analytics provider function to log the event to the\\n\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fathom\"), \" global function.\")), mdx(\"p\", null, \"\\uD83E\\uDD41 Demo site: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://gatsby-starter-business-fathom.netlify.com\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://gatsby-starter-business-fathom.netlify.com\")), mdx(\"p\", null, \"\\uD83D\\uDCC8 Demo Fathom Dashboard:\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://app.usefathom.com/share/nymdtplm/gatsby-starter-business\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://app.usefathom.com/share/nymdtplm/gatsby-starter-business\")), mdx(\"p\", null, \"\\uD83E\\uDD1D Affiliate link for $10 of off your first month of Fathom\\nAnalytics: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://usefathom.com/ref/HG492L\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://usefathom.com/ref/HG492L\")), mdx(\"h2\", {\n    \"id\": \"thanks-for-reading-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#thanks-for-reading-\",\n    \"aria-label\": \"thanks for reading  permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"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\"\n  })))), \"Thanks for reading \\uD83D\\uDE4F\"), mdx(\"p\", null, \"That\\u2019s all folks! If there is anything I have missed, or if there is a\\nbetter way to do something then please let me know.\"), mdx(\"p\", null, \"Follow me on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/spences10\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Twitter\"), \" or \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/spences10/ama\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Ask Me Anything\"), \" on GitHub.\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"In this guide I'm going to go through how to track custom events in a\nGatsby site using Fathom analytics. Preamble At the end of last month…","tableOfContents":{"items":[{"url":"#preamble","title":"Preamble"},{"url":"#why-fathom","title":"Why Fathom?"},{"url":"#-heres-a-video-detailing-the-process","title":"📺 Here's a video detailing the process."},{"url":"#set-up-fathom-account","title":"Set-up Fathom account"},{"url":"#addconfig-fathom-gatsby-plugin","title":"Add/Config Fathom Gatsby plugin"},{"url":"#push-to-netlify-and-test","title":"Push to Netlify and test"},{"url":"#create-goals-in-fathom-analytics","title":"Create goals in Fathom Analytics"},{"url":"#use-react-context-api-to-make-an-analytics-provider","title":"Use React Context API to make an analytics provider"},{"url":"#add-custom-event-tracking-for-fathom","title":"Add custom event tracking for Fathom"},{"url":"#wrap-up","title":"Wrap up"},{"url":"#thanks-for-reading-","title":"Thanks for reading 🙏"}]},"timeToRead":4,"fields":{"slug":"/2020/01/02/track-custom-events-with-fathom-analytics/","editLink":"https://github.com/spences10/thelocalhost.blog/edit/authoring/posts/2020/01/02/track-custom-events-with-fathom-analytics/index.mdx"}}},"pageContext":{"slug":"/2020/01/02/track-custom-events-with-fathom-analytics/","previous":{"id":"1c70f7fc-8e60-5d91-ab35-59ca9b4c09fe","excerpt":"React Advanced London going deep! Here's my recollection of my attendance at React Advanced London 2019\nsupported with videos from the event. Ken Wheeler - React Performance Ken's keynote didn't disappoint! Ken talks about how performance fixes\naren…","frontmatter":{"title":"React Advanced - London 2019","date":"2019-12-31T00:00:00.000Z"},"fields":{"slug":"/2019/11/06/react-advanced-london-2019/"}},"next":{"id":"1c92c35d-4367-5b13-8e48-06117076408e","excerpt":"In this guide I'm going to detail upgrading a Windows Subsystem Linux\n(WSL) Ubuntu install from the current version 18.04 to 19.10 this is\nan intermediary release before Ubuntu 20.04 is released on 2020\nApril 23. I have documented  this process in…","frontmatter":{"title":"Upgrade Windows Subsystem Linux - Ubuntu 18.04 to Ubuntu 19.10","date":"2020-01-28T00:00:00.000Z"},"fields":{"slug":"/2020/01/28/update-wsl-ubuntu-from-18.10-to-19.10/"}}}}}