How to use custom domain?

[Dimitrios Lytras]

For the simple snippet, we can use

<script src="https://cdn.usefathom.com/3.js" site="###"></script>
<script>
    window.fathom || document.write('<script src="###/core.js"><\/script>');
</script>

If we were to use trackingUrl we would be greeted with a TypeError: e is null

var e = document.querySelector('script[src*="cdn.usefathom.com"]'),
  t = {
    siteId: e.getAttribute('site'),
    spa: e.getAttribute('spa'),
    trackerUrl: '###'
  };

Any idea on how to bypass adblockers?

[Mike Bifulco]

Hey @dimitrisnl - did you end up finding a fix for this? I'm seeing the same error with my custom domain from usefathom.com

[Dimitrios Lytras]

@mbifulco Afaik this plugin uses the legacy snippet.

The current suggested way from the docs suggested document.write which isn't acceptable from me.

Overall I wasn't satisfied with Fathom so I didn't pursue it further. SimpleAnalytics seems to provide first-class support for Gatsby though.

edit: Fathom has improved greatly, and since the thread has been linked in various places, I don't want to be dissuade anyone from trying

[Mike Bifulco]

Got it - I appreciate the update.

[Lars Graubner]

I still think this is a valid request. At the moment I'm not using Fathom hence I don't know much about custom domains. Does the tracking scripts differs from the old one? Shouldn't be too hard to distinguish between those two options.

[Eugene Fedorenko]

@lgraubner, they show both new and legacy code snippets in the docs.

[Jack Ellis]

@dimitrisnl We're removing document.write with V2 of custom domains. Sorry about that. We've had feedback and we're bringing V2 of custom domains with a single domain, our own "CDN" and the same simplicity.

I'm going to review Gatsby now, thank you all.

[Dimitrios Lytras]

Thanks for the update @JackEllis - I loved the simplicity of the interface and hopefully I can revisit the product soon.

[Jack Ellis]

@dimitrisnl You bet. For Gatsby, honestly, I'd just do this:

1. cp .cache/default-html.js src/html.js
2. Add in <script src="https://your-custom-domain.com/3.js" site="SITE-ID" spa="pushstate" defer></script> just before the in src/html.js

Then the first pageview will auto track, then pushstate / popstate etc. will trigger page view tracking.

We are modifying this slightly for the new version but that'll work for now. In the new version (coming this week or next) we are going with spa="auto", where it uses HTML 5 History API but falls back to the hashchange listener if it's available (EmberJS does this, for example

[Eugene Fedorenko]

@JackEllis, I tried that just yesterday and it didn't work because you use document.querySelector('script[src*="cdn.usefathom.com"]') query in your script, which fails when only a custom domain is used. I ended up rewriting your wrapper for Gatsby, but didn't think to include spa="pushstate":

<script src="https://cdn.usefathom.com/3.js" site="XXXXXXX" />
<script dangerouslySetInnerHTML={{ __html: `
  if (!window.fathom) {
    let main = document.querySelector('script[src*="cdn.usefathom.com"]');
    let script = document.createElement('script');
    script.src = "https://my-custom-domain.com/core.js";
    main.parentNode.insertBefore(script, main.nextSibling);
  }
` }} />

Anyway, looking forward to v2 with a simpler script :)

[Jack Ellis]

You are completely right @efedorenko, sorry.

If you want a peek at the new code, it’s uncompressed at script.js instead of 3.js. It’s Alpha but early testing looks good!

[Eugene Fedorenko]

Nice! Thanks for sharing.

[Jack Ellis]

For anyone coming across this in the future, this will be ready to roll on 11th May 2020 (maybe sooner).

1. Navigate to your Gatsby project
2. Run cp .cache/default-html.js src/html.js
3. Add the following snippet just before in that file
4. (optional) If you have a custom domain, replace cdn.usefathom.com with your custom domain

<!-- Fathom - beautiful, simple website analytics -->
<script src="https://cdn.usefathom.com/script.js" spa="auto" site="YOUR-SITE-ID"></script>
<!-- / Fathom -->

[Mike Bifulco]

@JackEllis the above worked a treat, except for the need to change the comment format to jsx👇

{/* Fathom - beautiful, simple website analytics */}
<script
  src="https://cdn.usefathom.com/script.js"
  spa="auto"
  site="YOUR-SITE-ID"
></script>
{/* Fathom  */}

[Jack Ellis]

@mbifulco Strange, I tested my code on Gatsby and it worked fine without that. Is this needed? If so, thank you, I had no idea.

P.S. Remember, that code is in "alpha" until tomorrow / next week :P I mean, it works great, but it's not "production ready" until we release it. I suppose it's RC :P

[Mike Bifulco]

It may work both ways - but eslint was unhappy with the former

[Jack Ellis]

@mbifulco Very helpful, thanks Mike, I'll amend the instructions. I didn't try to build, I only had it in dev.

[Manuele J Sarfatti]

I had to change the comment format as well, seems like regular HTML comments are not supported in JSX: https://wesbos.com/react-jsx-comments

[Mike Bifulco]

@JackEllis I saw you linked to my comment above from Fathom docs - it's really only the comments that need to change their format. Since the snippet you provide here doesn't include html style comments, there shouldn't be any problem. It may cause more confusion than anything to link to this thread at this point (not that I don't love attention 😂)