1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Setting Up Fathom Analytics with Netlify</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="setting-up-fathom-analytics-with-netlify">Setting Up Fathom Analytics with Netlify</h1>
<p>2021-01-19</p>
<p>It’s no secret that I’m passionate about open source software, but I’m also extremely adamant about protecting the privacy of all users across the web. So when I decided to implement analytics on my own personal website, I ended up choosing Fathom (<em>get a $10 credit using that link!</em>).</p>
<p>You should research further into the company yourself if you’re interested, but in a nutshell the Fathom platform provides:</p>
<ul>
<li>GDPR, ePrivacy, PECR and CCPA compliance</li>
<li>ad-blocker bypasses (in a good way -> zero impact on users)</li>
<li>anonymous visitor stats</li>
<li>software created by indie developers</li>
</ul>
<p>Although this might sound like a “paid” blog post, I can assure you this is completely based on my own opinions and experience with the service. I’m just very pleased with the product :)</p>
<p>Enough chit-chat - let’s breakdown how to setup Fathom on your own site hosted through Netlify!</p>
<h2 id="step-0-assumptions">Step 0: Assumptions</h2>
<p>I’m going into this tutorial with the assumption that you:</p>
<ol>
<li>Have an active Fathom account (or are at least trying the 7-day free trial)</li>
<li>Have a website already setup on Netlify (custom domain optional)</li>
</ol>
<p>And that’s all you need.</p>
<h2 id="step-1-adding-a-custom-domain-dns-setup">Step 1: Adding a Custom Domain (DNS Setup)</h2>
<p>Even though you have the option to use the <code>default</code> tracking script URL, I would highly recommend setting it up through your own domain. This helps avoid any browser extensions or firewalls that might block outside URL request made by individual sites.</p>
<ol>
<li>Navigate to the Fathom <strong>Settings</strong> page in the bottom footer (must be logged in)</li>
<li>Select <strong>Domains</strong> from the sidebar</li>
<li>Enter your custom domain in the <code>Add a new custom domain</code> input</li>
<li>Select <strong>Start Process</strong></li>
<li>Keep note of both the <code>CNAME</code> and <code>VALUE</code> (we will copy this in a moment)</li>
</ol>
<p>Open a new tab, and login to your Netlify account:</p>
<ol>
<li>From your <code>Team Overview</code> page, navigate to the top-level <code>Domains</code> page</li>
<li>Select the domain you plan to add Fathom to</li>
<li>Under <strong>DNS settings</strong> > <strong>DNS records</strong> select <code>Add New Record</code></li>
<li>Select <code>CNAME</code> from the dropdown of available options</li>
<li>Paste the Fathom <code>CNAME</code> (from the steps above) into the <strong>Name</strong> input</li>
<li>Paste the Fathom <code>VALUE</code> (from the steps above) into the <strong>Value</strong> input</li>
<li>Click <strong>Save</strong></li>
</ol>
<p>That’s it for DNS setup!</p>
<h2 id="step-2-adding-fathom-your-website">Step 2: Adding Fathom Your Website</h2>
<p>Now that we will be using our own custom domain for the script, it’s time to actually <em>add it</em> to our website. From the same Fathom <strong>Settings</strong> page as before:</p>
<ol>
<li>Navigate to the <strong>Sites</strong> page in the sidebar</li>
<li>Enter your custom domain in the <code>Add a new site</code> input and click <strong>Get site code</strong></li>
<li>In the modal prompt, select your custom domain from the dropdown list (you’ll see the script code change accordingly)</li>
<li>Copy the tracking code snippet and add it to all the pages you plan to track on your site</li>
<li>When ready, select <strong>Verify site code</strong></li>
<li>If everything went correctly you should be done!</li>
</ol>
<h2 id="step-3-watch-those-live-stats">Step 3: Watch Those Live Stats!</h2>
<p>Open a cold beer (or a bubbly soda if you prefer) and watch your website visitor stats come rolling in on the dashboard! Not only do you now have solid analytics on your website but you have the piece of mind that your users’ privacy isn’t being invaded. Everybody wins!</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
