Fathom tracker causes an exception when tracking page views in ie11

[Driptap]

When using the Fathom tracker with React & React Router, history state changes are causing

Error: Object doesn't support this action

in Internet Explorer 11.

I've messed around with the script and narrowed it down to something in this function.

We are using React 16.13.1 & React Router 5.1.2.

Fathom is instantiated by this script:

const initFathom = () => {
  const { fathomSiteId } = configProvder.config.serviceKeys;
  if (fathomSiteId === '' || fathomSiteId === undefined) return;
  const url = 'https://cdn.usefathom.com/script.js';
  const d = document,
    g = d.createElement('script'),
    s = d.getElementsByTagName('script')[0];
  g.type = 'text/javascript';
  g.defer = true;
  g.setAttribute('site', fathomSiteId);
  g.setAttribute('spa', 'auto');
  g.src = url;
  if (s && s.parentNode) {
    s.parentNode.insertBefore(g, s);
  } else {
    throw new Error('Fathom script tag could not be inserted to DOM');
  }
};

This can be recreated by using a React Router Dom <Link> to switch <Route>. We're a little confused as to whats going on. Any ideas as to what's happening?

[gtrogers]

Even if fathom doesn't explicitly support IE11 it would be useful to understand any polyfills it would need to provide our own support.

[gtrogers]

I did some digging today. To use fathom pro on IE11 it looks like you need to polyfill the new Event('myevent') constructor and also the navigator.sendBeacon(...) method.

Navigation tracking is working with the Event polyfill, will confirm goal tracking with sendBeacon tomorrow.

[gtrogers]

So, for anyone else trying to get fathom / fathom pro working on IE11 you'll need the following polyfills

• new Event / custom event polyfill (depending on the polyfill you use use you might need to patch the event constructor yourself)
• navigator.sendBeacon

then it should work fine

[Driptap]

Closed as we have a solution ^^