Does Fathom work with Turbolinks?

[monooso]

Hello,

I've just installed Fathom [1], and the dashboard is running nicely. However, it doesn't seem to be capturing any data. I suspect this may be because I'm using Turbolinks.

Here's a quick (simplified) summary of how Turbolinks works, in case you're unfamiliar with it:

1. The user clicks a link.
2. Turbolinks intercepts the link, and loads the page over AJAX.
3. Turbolinks swaps the current page body with the new page body.
4. Turbolinks updates the address bar URL.

This means the standard "document ready" type events never fire. Turbolinks recommends listening for the turbolinks:load event instead, but as far as I can tell I have no control over that.

I've reviewed this issue regarding tracking URLs on a single page, but I don't think it applies here, because the problem is (or appears to be) the lack of a document load event.

So, my questions are:

1. Does Fathom work with Turbolinks out the box?
2. If not [1], is there some way I can make Fathom work with Turbolinks?
3. If not [1 & 2], are there any plans to make Fathom play nicely with Turbolinks?

Thanks for taking the time to read this far, and for all your work on Fathom.

Cheers,
Stephen

[1] Which was an incredibly smooth process, by the way. You've done an excellent job with the first-run experience.

[monooso]

I think I may have answered my own question. It certainly appears to be working. The solution was pretty simple:

document.addEventListener('turbolinks:load', e => {
  if (typeof window.fathom === 'function') {
    window.fathom('trackPageview')
  }
})

If somebody else can confirm that this is correct, then the issue can be marked as resolved.

Cheers,
Stephen

[JackEllis]

I was going to link you to https://github.com/turbolinks/turbolinks/blob/master/README.md#full-list-of-events

Fathom doesn’t support turbolinks out of the box. The approach you’ve arrived at looks good.

[monooso]

Thanks @JackEllis.

[cbaconnier]

I think I may have answered my own question. It certainly appears to be working. The solution was pretty simple:

document.addEventListener('turbolinks:load', e => {
  if (typeof window.fathom === 'function') {
    window.fathom('trackPageview')
  }
})

If somebody else can confirm that this is correct, then the issue can be marked as resolved.

It does work on Chrome. Unfortunately I can't make it work on Firefox.

Edit: my issue is related to this tracker https://cdn.usefathom.com/tracker.js
The one on this repo seems different: https://github.com/usefathom/fathom/blob/v1.2.1/assets/src/js/tracker.js

[m1guelpf]

@cbaconnier That's because the hosted version of Fathom and the version hosted on this repo are now two different codebases with different features. If you're not paying for the hosted Fathom, you should probably change the URL of your tracker to your-fathom-instance.com/tracker.js.

[cbaconnier]

@m1guelpf I'm using the paid version. But at the time being, the paid tracker is not on Github.

It seems that in this particular case, Firefox will load the image generated by the tracker from its cache.
To solve the issue I copied the paid tracker locally and I changed:

{p:c,h:s,r:d,sid:e.siteId,tz:Intl.DateTimeFormat().resolvedOptions().timeZone}

To this

{p:c,h:s,r:l,sid:t.siteId,tz:Intl.DateTimeFormat().resolvedOptions().timeZone,t:Date.now()}

It force Firefox to load the new URL since it will be different. @JackEllis is already aware of it :)