{"componentChunkName":"component---src-templates-post-template-js","path":"/2020/04/18/add-tracking-links-to-your-markdown/","result":{"data":{"mdx":{"frontmatter":{"title":"Add Analytics Tracking Links to your Markdown","date":"2020 April 18th"},"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-04-18T00:00:00.000Z\",\n  \"title\": \"Add Analytics Tracking Links to your Markdown\",\n  \"tags\": [\"analytics\", \"learning\", \"guide\"],\n  \"published\": true\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, \"I\\u2019m talking Fathom Analytics again, this time about tracking link\\nclicks in my Markdown.\"), mdx(\"p\", null, \"I have written about how to \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://thelocalhost.blog/2020/01/02/track-custom-events-with-fathom-analytics/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"track custom events\"), \" with Fathom\\npreviously and this is really an extension to that post.\"), mdx(\"p\", null, \"If you would like to try Fathom and get a \\xA310 discount on your first\\ninvoice check \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://usefathom.com/ref/HG492L\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"my affiliate link\"), \".\"), mdx(\"p\", null, \"This situation is specific to using MDX and the MDXProvider as it\\ngives the ability to override rendering of links.\"), mdx(\"h2\", {\n    \"id\": \"the-problem-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#the-problem-\",\n    \"aria-label\": \"the problem  permalink\",\n    \"className\": \"anchor 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  })))), \"The problem \\uD83E\\uDD14\"), mdx(\"p\", null, \"I\\u2019d like to add a \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://usefathom.com/support/goals\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Fathom goal\"), \" to a link in my Markdown, to do this\\nI\\u2019ll need to get the goal ID I\\u2019ve created in Fathom to the link so\\nthat when it\\u2019s clicked it\\u2019s logged with Fathom.\"), mdx(\"p\", null, \"So I can add an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \" event to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"a\"), \" tag using the MDXProvider\\nand pass that ID to the analytics provider.\"), mdx(\"h2\", {\n    \"id\": \"the-solution-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#the-solution-\",\n    \"aria-label\": \"the solution  permalink\",\n    \"className\": \"anchor 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  })))), \"The solution \\uD83D\\uDCA1\"), mdx(\"p\", null, \"Ok, so I need a way to add a prop to a specific link that contains the\\ngoal ID for Fathom.\"), mdx(\"p\", null, \"Using a made up attribute added to the markup for the goal ID I can\\npick out the ID and pass it to the analytics provider from the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"A\"), \"\\ncomponent I\\u2019m using to override the links in the Markdown.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"{2,7}\",\n    \"{2,7}\": true\n  }), \"export const A = props => {\\n  const fa = useAnalytics()\\n  return (\\n    <a\\n      {...props}\\n      id={props.id}\\n      onClick={() => fa(props.goal)}\\n      target=\\\"_blank\\\"\\n      rel=\\\"noopener noreferrer\\\"\\n    >\\n      {props.children}\\n    </a>\\n  )\\n}\\n\")), mdx(\"p\", null, \"So the Markdown will look something like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\"\n  }), \"# My awesome Markdown\\n\\nFathom Analytics recently added a feature for\\n<a href=\\\"https://usefathom.com/blog/bypass-adblockers\\\" goal=\\\"IBQBRDPP\\\">custom\\ndomains</a> with their service.\\n\")), mdx(\"p\", null, \"So, job done right?\"), mdx(\"p\", null, \"Wellllll\\u2026\"), mdx(\"p\", null, \"No.\"), mdx(\"h2\", {\n    \"id\": \"the-other-problem-for-me-anyway-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#the-other-problem-for-me-anyway-\",\n    \"aria-label\": \"the other problem for me anyway  permalink\",\n    \"className\": \"anchor 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  })))), \"The other problem (for me anyway) \\uD83D\\uDE27\"), mdx(\"p\", null, \"I spend a lot of my time in Markdown files and I rarely use inline\\nlinks. With an inline Markdown link the link from that last example it\\nwould look something like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\"\n  }), \"# My awesome Markdown\\n\\nFathom Analytics recently added a feature for\\n[custom domains](https://usefathom.com/blog/bypass-adblockers) with\\ntheir service.\\n\")), mdx(\"p\", null, \"Doesn\\u2019t read great does it?\"), mdx(\"p\", null, \"When there is a lot of prose (text) it can be difficult to read when\\nthere are a lot of links in there.\"), mdx(\"p\", null, \"I prefer to use the link text and reference it at the bottom of my\\ndocument, like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\"\n  }), \"# My awesome Markdown\\n\\nFathom Analytics recently added a feature for [custom domains] with\\ntheir service.\\n\\n<!-- Links -->\\n\\n[custom domains]: https://usefathom.com/blog/bypass-adblockers\\n\")), mdx(\"h2\", {\n    \"id\": \"the-other-solution-🤯\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#the-other-solution-%F0%9F%A4%AF\",\n    \"aria-label\": \"the other solution 🤯 permalink\",\n    \"className\": \"anchor 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  })))), \"The other solution \\uD83E\\uDD2F\"), mdx(\"p\", null, \"So, I\\u2019d prefer to have the goal ID in the link but not cluttering up\\nmy beautifully crafted Markdown with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"a\"), \" tags everywhere. \\uD83D\\uDE01\"), mdx(\"p\", null, \"How do I do that then?\"), mdx(\"p\", null, \"The way I worked out how to do it was to use a URL parameter and\\nintercept it in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"A\"), \" component.\"), mdx(\"p\", null, \"In the Markdown I add the goal ID to the URL, on line 9:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\",\n    \"metastring\": \"{8-9}\",\n    \"{8-9}\": true\n  }), \"# My awesome Markdown\\n\\nFathom Analytics recently added a feature for [custom domains] with\\ntheir service.\\n\\n<!-- Links -->\\n\\n[custom domains]:\\n  https://usefathom.com/blog/bypass-adblockers?goalId=\\\"IBQBRDPP\\\"\\n\")), mdx(\"p\", null, \"This way the structure of the Markdown is unchanged making a much\\nnicer writing experience.\"), mdx(\"p\", null, \"How to use the goal ID from the URL parameter?\"), mdx(\"p\", null, \"First up I used an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \" handler to pull out the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"goalId\"), \" for the\\nanalytics provider.\"), mdx(\"p\", null, \"Using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"URL(props.href).searchParams\"), \" means that I can pull out the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"goalId\"), \" using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".get\"), \" function.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"{3-8}\",\n    \"{3-8}\": true\n  }), \"export const A = props => {\\n  const fa = useAnalytics()\\n  const onClick = () => {\\n    if (props.href.includes(`goalId`)) {\\n      const params = new URL(props.href).searchParams\\n      fa(params.get(`goalId`))\\n    }\\n  }\\n\\n  return (\\n    <a {...props} onClick={onClick}>\\n      {props.children}\\n    </a>\\n  )\\n}\\n\")), mdx(\"p\", null, \"The only thing with this was that the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"goalId\"), \" would still be in the\\nURL.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"531px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a8b55efd542a1abaf4905a646549dea6/d4713/url-with-goalid-showing.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"8.124999999999998%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'32\\\\'%20viewBox=\\\\'0%200%20400%2032\\\\'%20preserveAspectRatio=\\\\'none\\\\'%3e%3cpath%20d=\\\\'M0%2016v15h401V0H0v16\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/a8b55efd542a1abaf4905a646549dea6/60a22/url-with-goalid-showing.webp 160w\", \"/static/a8b55efd542a1abaf4905a646549dea6/4c812/url-with-goalid-showing.webp 320w\", \"/static/a8b55efd542a1abaf4905a646549dea6/a33a1/url-with-goalid-showing.webp 531w\"],\n    \"sizes\": \"(max-width: 531px) 100vw, 531px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/a8b55efd542a1abaf4905a646549dea6/69538/url-with-goalid-showing.png 160w\", \"/static/a8b55efd542a1abaf4905a646549dea6/72799/url-with-goalid-showing.png 320w\", \"/static/a8b55efd542a1abaf4905a646549dea6/d4713/url-with-goalid-showing.png 531w\"],\n    \"sizes\": \"(max-width: 531px) 100vw, 531px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/a8b55efd542a1abaf4905a646549dea6/d4713/url-with-goalid-showing.png\",\n    \"alt\": \"url with goalid showing\",\n    \"title\": \"url with goalid showing\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"I didn\\u2019t really like the way this looked, especially if someone was\\ngoing to share that link after clicking it.\"), mdx(\"p\", null, \"So reading into the URL API a bit more and reading up on some\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://stackoverflow.com/a/12151322/1138354\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"StackOverflow posts\"), \" I found that I could delete the parameter after\\nusing it.\"), mdx(\"p\", null, \"In the next block of code here, on line 3, I\\u2019m checking if the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props.href\"), \" contains a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"goalId\"), \" parameter.\"), mdx(\"p\", null, \"I can then manipulate the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props.href\"), \" in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useEffect\"), \" and setting the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"goalId\"), \" in state first on line 10.\"), mdx(\"p\", null, \"Then I can delete the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"goalId\"), \" from the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"url\"), \" on line 11.\"), mdx(\"p\", null, \"The props have been changed now so I\\u2019ll need to provide the new \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"href\"), \"\\nto the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"a\"), \" tag in the props, on line 25.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"{3-5,7-14,17-19,25}\",\n    \"{3-5,7-14,17-19,25}\": true\n  }), \"export const A = props => {\\n  const fa = useAnalytics()\\n  const containsGoalId = props.href.includes(`goalId`)\\n  const [goalId, setGoalId] = useState(``)\\n  const [newHref, setNewHref] = useState(``)\\n\\n  useEffect(() => {\\n    if (containsGoalId) {\\n      const url = new URL(props.href)\\n      setGoalId(url.searchParams.get(`goalId`))\\n      url.searchParams.delete(`goalId`)\\n      setNewHref(url.href)\\n    }\\n  }, [containsGoalId, props.href])\\n\\n  const onClick = () => {\\n    if (goalId) {\\n      fa(goalId)\\n    }\\n  }\\n\\n  return (\\n    <a\\n      {...props}\\n      href={containsGoalId ? newHref : props.href}\\n      onClick={onClick}\\n    >\\n      {props.children}\\n    </a>\\n  )\\n}\\n\")), mdx(\"p\", null, \"Now clicking the link will only call the analytics provider when\\nthere\\u2019s a goal ID in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"href\"), \" passed to the component in the props.\"), mdx(\"h2\", {\n    \"id\": \"heres-a-video-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#heres-a-video-\",\n    \"aria-label\": \"heres a video  permalink\",\n    \"className\": \"anchor 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  })))), \"Here\\u2019s a video \\uD83D\\uDCFA\"), mdx(\"p\", null, \"In this video detail what I\\u2019ve been writing about.\"), mdx(YouTube, {\n    youTubeId: \"Ihbx0BVIhZk\",\n    mdxType: \"YouTube\"\n  }), mdx(\"h2\", {\n    \"id\": \"resources-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#resources-\",\n    \"aria-label\": \"resources  permalink\",\n    \"className\": \"anchor 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  })))), \"Resources \\uD83D\\uDCD1\"), mdx(\"p\", null, \"These resources helped me along the way.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/URL\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"MDN URL API\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/delete\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"MDN searchParams Delete\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"SO Get Query String Values\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"SO Remove Query String Values\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://developers.google.com/web/updates/2016/01/urlsearchparams\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Google URLSearchParams\"))));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"I'm talking Fathom Analytics again, this time about tracking link\nclicks in my Markdown. I have written about how to  track custom events…","tableOfContents":{"items":[{"url":"#the-problem-","title":"The problem 🤔"},{"url":"#the-solution-","title":"The solution 💡"},{"url":"#the-other-problem-for-me-anyway-","title":"The other problem (for me anyway) 😧"},{"url":"#the-other-solution-🤯","title":"The other solution 🤯"},{"url":"#heres-a-video-","title":"Here's a video 📺"},{"url":"#resources-","title":"Resources 📑"}]},"timeToRead":2,"fields":{"slug":"/2020/04/18/add-tracking-links-to-your-markdown/","editLink":"https://github.com/spences10/thelocalhost/edit/authoring/posts/2020/04/18/add-tracking-links-to-your-markdown/index.mdx"}}},"pageContext":{"slug":"/2020/04/18/add-tracking-links-to-your-markdown/","previous":{"id":"d121f762-9302-559b-9005-9333c2f6b4b4","excerpt":"Fathom Analytics recently added a really neat feature for  custom\ndomains  with their service. What does that mean then? Well it's for bypassing ad-blocking\nextensions, not that Fathom wants to collect all your data,  far from\nit . The purpose of…","frontmatter":{"title":"Create a Custom Domain for Fathom Analytics","date":"2020-04-16T00:00:00.000Z"},"fields":{"slug":"/2020/04/16/fathom-create-custom-domain/"}},"next":{"id":"94e1257c-e0a9-5a96-bbcc-ab7a74fd77a9","excerpt":"Remember services like  Bitly  and  TinyURL ? Yeah, they still exist,\nshortening your URLs for you, they've been around for a long time too. Bitly founded in 2008 and TinyURL founded in 2002 😱 In this post I'm detailing how I made my own Bitly with…","frontmatter":{"title":"Make a simple, personal, URL shortener with Now.sh","date":"2020-04-19T00:00:00.000Z"},"fields":{"slug":"/2020/04/19/url-shortener-with-nowsh/"}}}}}